Chart.js 上手实践

2018-02-12 10:47:45来源:https://juejin.im/post/5a7bbf0c6fb9a0634417d138作者:稀土掘金人点击

分享

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
}
}]
}
}

修改后图表如下图所示:





4. 参考

code.tutsplus.com/tutorials/g…


tobiasahlin.com/blog/chartj…



最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台