文章来源:
作者: Shen-Yu
链接: https://shen-yu.gitee.io/2020/chartjs/
来源:
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

Chartjs 简介

Chartjs 是一款简单优雅的数据可视化工具,对比其他图表库如 EChartsHighchartsC3FlotamCharts 等,它的画面效果、动态效果都更精致,它的 文档首页 就透出一股小清新,基于 HTML5 Canvas,它拥有更好的性能且响应式,基本满足了一般数据展示的需要,包括折线图,条形图,饼图,散点图,雷达图,极地图,甜甜圈图等。

Hexo 中的 Chartjs

为了方便在 Hexo 中使用这么漂亮的图表库,我自己写了一个 Hexo 的 Chartjs 插件。插件的安装和使用非常的简单,只需要进入博客目录,然后打开命令行,用 npm 安装一下:

1
npm install hexo-tag-chart --save

之后在文章内使用 charttag 就可以了

1
2
3
{% chart 90% 300 %}
\\TODO option goes here
{% endchart %}

其中 chart 是标签名,endchart 是结束标签,不需要更改,90% 是图表容器的相对宽度,默认是 100%300 是图表容器的高度,默认是按正常比例缩放的,你可以通过设置 options 里面的 aspectRatio 属性来调整宽高比例,另外还有许多属性可以自定义,你可以查看 官方文档。在标签之间的部分,需要自己填充的图表数据和属性。

图表示例

现在你已经基本学会了在 Hexo 中插入 Chart 图表了,下面再展示一些基本的图表,更多炫酷的图表可以自己去尝试一下。

柱状图、条形图

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
{% chart 90% 300 %}
{
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
backgroundColor: ['rgba(255, 99, 132, 0.5)', 'rgba(255, 159, 64, 0.5)', 'rgba(255, 205, 86, 0.5)', 'rgba(75, 192, 192, 0.5)', 'rgba(54, 162, 235, 0.5)', 'rgba(153, 102, 255, 0.5)', 'rgba(201, 203, 207, 0.5)'],
borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)', 'rgb(201, 203, 207)'],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
}
{% endchart %}

显示效果如下所示:

折线图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% chart 90% 300 %}
{
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Line Chart'
}
}
}
{% endchart %}

显示效果如下所示:

环形图、饼状图

1
2
3
4
5
6
7
8
9
10
11
12
13
{% chart 90% 300 %}
{
type: 'pie',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: 'First Dataset',
data: [300, 50, 100],
backgroundColor: ['rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)']
}]
}
}
{% endchart %}

显示效果如下所示:

雷达图

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
{% chart 90% 300 %}
{
type: 'radar',
data: {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
datasets: [{
label: 'First Dataset',
data: [65, 59, 90, 81, 56, 55, 40],
fill: true,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(255, 99, 132)'
}, {
label: 'Second Dataset',
data: [28, 48, 40, 19, 96, 27, 100],
fill: true,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgb(54, 162, 235)',
pointBackgroundColor: 'rgb(54, 162, 235)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(54, 162, 235)'
}]
},
options: {
elements: {
line: {
tension: 0,
borderWidth: 3
}
}
}
}
{% endchart %}

显示效果如下所示:

气泡图

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
{% chart 90% 300 %}
{
type: 'bubble',
data: {
datasets: [{
label: 'First Dataset',
data: [{
x: 20,
y: 30,
r: 6
}, {
x: 25,
y: 20,
r: 8
}, {
x: 32,
y: 6,
r: 7
}, {
x: 35,
y: 26,
r: 9
}, {
x: 40,
y: 10,
r: 5
}],
backgroundColor: 'rgb(255, 99, 132)'
}]
}
}
{% endchart %}

显示效果如下所示:

散点图

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
{% chart 90% 300 %}
{
type: 'scatter',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'First dataset',
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgb(255, 99, 132)',
data: [{
x: 12,
y: 45,
}, {
x: 12,
y: 13,
}, {
x: 56,
y: 3,
}, {
x: 5,
y: 87,
}, {
x: 43,
y: 76,
}, {
x: 34,
y: 8,
}, {
x: 9,
y: 53,
}]
}, {
label: 'Second dataset',
borderColor: 'rgb(54, 162, 235)',
backgroundColor: 'rgb(54, 162, 235)',
data: [{
x: 56,
y: 12,
}, {
x: 7,
y: 12,
}, {
x: 87,
y: 24,
}, {
x: 34,
y: 45,
}, {
x: 65,
y: 27,
}, {
x: 8,
y: 37,
}, {
x: 24,
y: 89,
}]
}],
options: {
title: {
display: true,
text: 'Chart.js Scatter Chart'
},
}
}
}
{% endchart %}

显示效果如下所示:

混合图

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
{% chart 90% 300 %}
{
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April'],
datasets: [{
label: 'Bar Dataset',
data: [10, 20, 30, 40],
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132)'
}, {
label: 'Line Dataset',
data: [20, 30, 40, 50],
type: 'line',
fill: false,
borderColor: 'rgb(54, 162, 235)'
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
}
{% endchart %}

显示效果如下所示:

结语

如果你想了解更多,官方文档 是不二之选。如果你英语不好,那么可以看看 中文文档,所有的例子和属性都能在里面找到,祝你玩得开心。