Chart.js入门教程

Chart.js⼊门教程
是⼀个简单、⾯向对象、为设计者和开发者准备的图表绘制⼯具库。

相信⼤部分⼈都⼀样，看到⼀⼤筐⽤⽂本或者表格形式呈现的数据就头疼。

因为这种呈现⽅式也太⽆聊了吧。

⽽且这对于我们处理原始数据也造成⼀定的困难。

不信？我反⼿就是⼀个例⼦：
更进⼀步说，柱状图能够直观的显⽰出趋势或者事实。

以这张表格为例，柱状图会直观地告诉你美国的⼈⼝是孟加拉的两倍，中国的⼈⼝是俄罗斯的10倍。

你只需要看看柱状图的长度就可以得出这些信息。

虽然这个表⾥只有10个国家，不出意料的话，我猜你⼤概也会直接忽略掉它。

正常情况下，⼈们只会看⼀两个他们感兴趣的国家。

但是如果这张表被转换为柱状图的话，⼈们看⼀眼就会得到有关⼈⼝数量分布的⼤致信息。

那么本⽂的重点来了，你可以使⽤Chart.js来制作各种各样的图表。

下⾯将为你全⽅位介绍chart.js。

chart.js最与众不同之处是，它可以在HTML5 Canvas上⾯绘制出⾊的响应式图表。

Chart.js允许你把不同的图表类型混合在⼀起，然后在上⾯绘制⽇期、对数或⾃定义⽐例的数据。

还可以在更改数据或更新颜⾊时应⽤运⽤框外动画。

下⾯将教你安装chart.js，然后介绍配置选项和其他的⽅⾯。

安装和使⽤
你可以从GitHub⾥⾯下载最新版本的或者在你的项⽬中使⽤。

或者你也可以通过以下命令在npm或bower中来安装chart.js。

npm install chart.js --save
bower install chart.js --save
Chart.js有两种不同的版本。

常规版本的Chart.js和Chart.min.js，附带chart.js库的同时还带着颜⾊解析器。

如果你想使⽤这个版本并且在你的图表中使⽤时间轴，你需要在安装Chart.js之前安装上。

⽽另⼀个版本Chart.bundle.js 和Chart.bundle.min.js早就包含了Moment.js 。

你唯⼀需要注意的就是两个版本只能安装⼀个，否则会引起错误。

⼀旦你决定好使⽤哪个版本之后，你就可以在你的项⽬中引⼊Chart.js了
<script src="path/to/Chart.min.js"></script>
<script>
var barChart = new Chart({...})
</script>
创建图表
下⾯将以上⾯的⼈⼝表为例来创建条形图。

Y轴表⽰⼈⼝数量，X轴表⽰国家。

下⾯将创建⼀个id名为popChart的画布。

<canvas id="popChart" width="600" height="400"></canvas>
⼀般来说，画布的宽度和⾼度决定了图表的尺⼨。

在创建响应式图表时，宽⾼⽐由画布的宽度和⾼度决定。

接下来，你需要实例化Chart类。

这可以通过传递要绘制图表的画布的节点，jQuery实例或2d上下⽂来完成。

var popCanvas = $("#popChart");
var popCanvas = document.getElementById("popChart");
var popCanvas = document.getElementById("popChart").getContext("2d");
接下来你需要做的就是把所有的参数传递给构造器。

var barChart = new Chart(popCanvas, {
type: 'bar',
data: {
labels: ["China", "India", "United States", "Indonesia", "Brazil", "Pakistan", "Nigeria", "Bangladesh", "Russia", "Japan"],
datasets: [{
label: 'Population',
data: [1379302771, 1281935911, 326625791, 260580739, 207353391, 204924861, 190632261, 157826578, 142257519, 126451398],
backgroundColor: [
'rgba(255, 99, 132, 0.6)',
'rgba(54, 162, 235, 0.6)',
'rgba(255, 206, 86, 0.6)',
'rgba(75, 192, 192, 0.6)',
'rgba(153, 102, 255, 0.6)',
'rgba(255, 159, 64, 0.6)',
'rgba(255, 99, 132, 0.6)',
'rgba(54, 162, 235, 0.6)',
'rgba(255, 206, 86, 0.6)',
'rgba(75, 192, 192, 0.6)',
'rgba(153, 102, 255, 0.6)'
]
}]
}
});
第⼆个参数传递的对象包含了Chart.js创建图表的所有信息。

type键指定图表类型，可以取下列值：line, bar, radar, polarArea, pie, doughnut 以及bubble。

data键包含了要⽤到的所有数据。

background键图表的背景⾊。

默认值是'rgba(0,0,0,0.1)'。

每个图表都有⾃⼰的特定键，你可以⽤它们来控制图表的外观。

这张图表是上⾯代码最终呈现效果。

如果你想让图表在所有的设备上都显⽰⼀样的尺⼨，只需将responsive的值设为false。

配置选项
Chart.js库允许你个性化定制你的图表。

例如，你可以改变上⾯图表的颜⾊和边框宽度。

你还可以通过更改字体⼤⼩和颜⾊来修改⼯具提⽰栏和图例。

在这个⼩节⾥⾯你将会学习到这些设置样式的键。

Chart.js库具有四个特殊的全局键，可⽤于更改图表中的所有字体。

这些键是 defaultFontFamily, defaultFontSize, defaultFontStyle，和defaultFontColor。

字体⼤⼩以像素为单位指定，不适⽤于 radialLinear刻度点标签。

同样， defaultFontStyle不适⽤于⼯具提⽰标题或页脚。

Chart.defaults.global.defaultFontFamily = "Lato";
Chart.defaults.global.defaultFontSize = 18;
Chart.defaults.global.defaultFontColor = 'blue';
下⾯的图表应⽤了上⾯这些全局字体设置。

通过全局键来修改样式将有助于让你的⽹站风格保持⼀致。

你也可以修改图标中的图例。

配置选项将需要传递到options.legend命名空间中。

您也可以为所有图表指定全局图例选项Chart.defaults.global.legend。

图例的位置
受position键的控制，它的值可以是top，left，bottom，和right。

你也可以使⽤display键显⽰或隐藏图例。

除了图例之外，你还可以控制图例标签的外观。

其配置选项在图例配置下⽅的label键中。

可以使⽤boxWidth键指定颜⾊框的宽度。

当没有指定值时，使⽤默认值40。

默认情况下，字体系列，字体⼤⼩，字体颜⾊和字体样式值都将从全局配置继承。

但是，你可以使⽤fontSize，fontStyle和fontFamily，fontColor为它们指定⾃⼰的值。

var barChart = new Chart(popCanvas, {
type: 'bar',
data: data,
options: {
legend: {
display: true,
position: 'bottom',
labels: {
boxWidth: 80,
fontColor: 'rgb(60, 180, 100)'
}
}
}
});
你可以使⽤options.tooltips命名空间来控制图表的本地绘制⽅式。

类似地，Chart.defaults.global.tooltips可以⽤于设置全局⼯具提⽰栏的外观。

可以使⽤enabled键来指定是否向⽤户呈现⼯具提⽰。

将将其设置为false 将禁⽤⼯具提⽰。

该键的默认值为true。

你还可以使⽤intersect 键控制⼯具提⽰的显⽰/隐藏⾏为。

当设置为true（也是此键的默认值）时，仅当⿏标指针与条形图进⾏交互时才会显⽰⼯具提⽰。

设置时false，根据mode 键指定的⾏为显⽰⼯具提⽰。

Mode键⽤于确定在⼯具提⽰栏中显⽰哪些元素。

其默认值为nearest。

当你设置intersect为false时，将显⽰最接近⿏标指针的栏的⼯具提⽰。

就像图例⼀样，你还可以控制⼯具提⽰栏的基于不同字体的属性的值。

唯⼀的区别是，必须为⼯具提⽰的标题、正⽂和页脚元素单独设置值。

例如，你可以通过改变bodyFontFamily， bodyFontSize，bodyFontStyle，和 bodyFontColor来改变提⽰栏的字体属性。

⼯具提⽰栏的标题和页脚还
有titleMarginBottom和footerMarginTop属性。

它们可以⽤于在标题和页脚与⼯具提⽰栏的正⽂之间添加⼀些额外的空间。

同样，你可以使⽤xPadding和yPadding属性向⼯具提⽰栏的左/右和上下两边添加额外的填充。

你也可以使⽤caretSize 键控制⼯具栏提⽰箭头的⼤⼩。

也可以使⽤backgroundColor键更改⼯具提⽰栏的背景。

var barChart = new Chart(popCanvas, {
type: 'bar',
data: data,
options: {
tooltips: {
cornerRadius: 0,
caretSize: 0,
xPadding: 16,
yPadding: 10,
backgroundColor: 'rgba(0, 150, 100, 0.9)',
titleFontStyle: 'normal',
titleMarginBottom: 15
}
}
});
上述选项将隐藏插⼊符号，因为caretSize被设置为0.
总结
以上给⼤家提供了chart.js库的基本介绍，然后展⽰了如何创建⼀个条形表。

相信你也学会了各项配置吧~
虽然在这篇⽂章中只介绍了条形表，实际上上⾯的配置适⽤于所有类型的图表哒。

JavaScript已经成为在web上⼯作的"de facto" 语⾔之⼀。

它不是没有它的学习曲线，它有很多框架和库等着你去学习。

如果你正在寻找额外的资源来学习或在你的⼯作中使⽤，请查看我们在中可⽤的内容。