Chart.js是一款流行的javascript图表库,基于HTML5 Canvas开发,具有简单、灵活、兼容主流浏览器等特性。

本文主要是对新版Chart.js(v2.0+)在项目应用中的一些小总结,请特别注意目前国内翻译的Chart.js中文版本相对比较旧,大家在使用过程中请注意,在此推荐查看Chart.js官网。

官方版本

中文版本(仅供参考)

下面主要记录Chart.js在实际项目应用场景中的一些设置,主要以问答方式体现如下:

1、 如何设置线条大小、颜色?

1
2
3
4
5
6
7
8
9
10
data: {
labels: labels,
datasets: [{
label:'',
data,
borderWidth: 2, // 线条宽度
borderColor:'rgba(255,255,255,.6)', // 线条颜色
backgroundColor:'rgba(255,255,255,.2)', // 线条到坐标区域背景色
}]
}

2、 如何隐藏线条的Tag(标签)?

在Chart配置参数options中设置legend的dispay的值为false

1
2
3
4
5
options: {
legend: {
display: false // 隐藏线条的说明(Tag)
}
}

3、 如何隐藏对应坐标线以及设置对应坐标线为虚线?

在Chart配置参数options中对坐标进行相关设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
options: {
scales: {
xAxes: [{
gridLines:{
display: false, // 隐藏x坐标网格
drawBorder: false, // 不渲染坐标线
}
}],
yAxes: [{
gridLines:{
display: true,
drawBorder: false,
drawOnChartArea: true,
drawTicks: false,
borderDash: [7, 5], // 网络虚线间的空隙
color: 'rgba(255,255,255,.4)', // 网络线颜色
zeroLineBorderDash: [7,5], // 坐标轴上的网络虚线间的空隙
zeroLineColor: 'rgba(255,255,255,.4)' // 线条颜色
}
}]
}
}

4、 如何隐藏y坐标的对应值?

1
2
3
4
5
6
7
8
9
10
11
12
options: {
responsive: false,
legend: {display: false},
scales: {
yAxes: [{
ticks: {
display: false, // 隐藏对应坐标的值
min: 0,
},
}]
}
}

5、 如何设置y坐标的最小值?

默认不设置坐标轴最小值则坐标轴动态显示,可为正数、负数或对等的正负坐标轴,当设置最小值后则按最小值显示对应坐标轴

1
2
3
4
5
6
7
8
9
10
11
options: {
responsive: false,
legend: {display: false},
scales: {
yAxes: [{
ticks: {
min: 100, // 设置Y坐标轴最小值为100
},
}]
}
}

以下为完整的实例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
Chart.defaults.global.defaultFontColor = '#fff';
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label:'',
data,
pointColor : "#fff",
pointStrokeColor : "#fff",
pointBackgroundColor: '#fff',
borderWidth: 2,
borderColor:'rgba(255,255,255,.6)',
backgroundColor:'rgba(255,255,255,.2)',
}]
},
options: {
responsive: false,
legend: {display: false},
scales: {
xAxes: [{
gridLines:{
display: false,
drawBorder: false,
}
}],
yAxes: [{
ticks: {
display: false,
min: 0,
},
gridLines:{
display: true,
drawBorder: false,
drawOnChartArea: true,
drawTicks: false,
borderDash: [7, 5],
color: 'rgba(255,255,255,.4)',
zeroLineBorderDash: [7,5],
zeroLineColor: 'rgba(255,255,255,.4)'
}
}]
}
}
});