Chart.js使用起来相比D3.js更加容易和灵活，很适合用来实现一些基本的图表展示。
Chart.js官网：www.chartjs.org/
最新版本：v2.x
安装：参考官方文档
官方文档对于各种图表的例子都是比较浅显的介绍，对于一些参数缺少具体的例子。这里主要以Line Chart为例对相关参数配置进行分析。
1. 基础样式
这里统计一个学生的每个月月考成绩（英语和数学），通过曲线图进行展示。
代码如下：
<canvas id="myChart" width="400" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
// x-axis数据 月数
var month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// y-axis数据 成绩
var english = [86, 78, 91, 84, 88, 90, 77, 70, 87, 97];
var math = [97, 91, 95, 88, 81, 90, 78, 84, 90, 77];
// 获取canvas作为绘图的上下文
var ctx = document.getElementById('myChart').getContext('2d');
// 生成对应的图表
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: month,
datasets: [{
label: 'English',
data: english
},
{
label: "Math",
data: math,
}]
}
});
</script>
上述代码可以绘制出最简单的图表，如下图所示:
data对象中，有三个属性：
-
type：指定图表类型。 -
datasets：指定数据集合。datasets中的每个对象就是一组数据集合，本例子中就是对应的每条曲线。 -
options: 配置参数。用来配置图表的额外信息，如图表的标题，x轴和y轴的设置等。
2. 修改图表样式
这里修改线条的默认颜色，取消线条下部的颜色填充，增加图表的标题，设置图例的样式，修改tooltip的提示样式。
详细参数配置请参考：Line
代码如下：
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: month,
datasets: [{
label: 'English',
data: english,
// 线条颜色
borderColor: "rgba(68,190,190,1)",
// 填充颜色
fill: true,
// 线条下方的填充颜色
backgroundColor: "rgba(68,190,190,.3)"
},
{
label: "Math",
data: math,
borderColor: "rgba(250,150,30,1)",
// 取消填充后，只有图例中会显示相应背景色
backgroundColor: "rgba(250,150,30,.3)",
// 取消填充
fill: false
}]
},
options: {
// 图表标题
title: {
display: true,
text: "月考成绩曲线图"
},
// 图例设置
legend: {
labels: {
padding: 30,
// 使用圆形样式
usePointStyle: true
},
// 显示位置
position: 'bottom'
},
// tooltip提示样式
tooltips: {
enabled: true,
// 同时显示x轴上的数据
// 这里鼠标移到对应点上会同时显示english和math的成绩
mode: 'index',
// 通过回调修改tooltips的标题
callbacks: {
title: function (item) {
return "第" + item[0].xLabel + "月"
}
}
}
}
});
修改后图表如下图所示：
修改后的tooltip显示效果如下图所示：
这里修改了tooltip的标题，并同时显示该x轴位置的所有数据，english和math。
更多tooltip的配置请参考：Tooltips
目前y轴的值是直接从70开始，这里默认选取了y轴的最小值作为起始值。如果要改为从其他值开始，这里就要对options中的scales属性进行修改。
3. Scales
scales可以对x轴和y轴的对应的属性进行修改，其中ticks属性可以修改对应轴的起始值。
代码如下：
options: {
// 图表标题
title: {
display: true,
text: "月考成绩曲线图"
},
...
scales: {
// x轴
xAxes: [{
// 背景网格
gridLines: {
// 取消x轴的竖线
display: false,
// 设置x轴线颜色
color: "black",
},
// x轴标题
scaleLabel: {
display: true,
labelString: "考试月数",
},
}],
// y轴
yAxes: [{
gridLines: {
color: "black",
// 以点线显示
borderDash: [2, 5],
},
scaleLabel: {
display: true,
labelString: "分数",
},
// 设置起止数据和步长
ticks: {
min: 60,
max: 100,
stepSize: 5
}
}]
}
}
修改后图表如下图所示：
