该文基本 (全部) 来自于 chatjs 中文文档

由于使用 pjax,导致页面需要二次刷新才会显示图表,故引入了自动刷新的 JS,但这样会导致回退上一个标签页面失败以及该页面 pjax 失效
已关闭此页面的 pjax

背景

今天在谷歌上逛博客时,突然发现 shen-yu 大佬根据 chatjs 写了一个 Hexo 插件,出于兴趣,打算使用并记录该插件的效果。
shen-yu 大佬 shen-yu
chatjs 中文文档 chatjs
由于插件的安装和图表的使用上面两个链接已介绍得足够详细,本人只做一些图表的演示,并充当一个函数,实现代码的复用 (手动狗头)。


图表

折线图

效果

示例用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{% chart 90% 300 %}  //其中 chart 是标签名,endchart 是结束标签,不需要更改,可以通过设置 options 里面的 
aspectRatio 属性来调整图表的宽高比例,默认 width 为 100%,height 为 300px。
{
type: 'line',
data: { // 折线图数据
labels: ['8.4', '8.5', '8.6', '8.7', '8.8', '8.9', '8.10'], // 横坐标
datasets: [{ // 纵坐标变量名称
label: 'My First dataset',
lineTension: 0,
borderColor: 'rgb(255, 99, 132)', // 线条颜色
data: [0, 10, 5, 2, 20, 30, 45] // 纵坐标
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js 折线图' // 图表名称
}
}
}
{% endchart %}

相关属性

名称类型描述
backgroundColorColor/Color[]线条背景色
borderColorColor/Color[]线条颜色
borderWidthNumber/Number[]线的宽度 (以像素为单位)
borderDashNumber[]破折号的长度和间距。 参考 MDN
borderDashOffsetNumber偏移量 参考 MDN
borderCapStyleString线帽样式 参考 MDN
borderJoinStyleString线连接风格 参考 MDN
cubicInterpolationModeString离散的点之间的连接方式
fillBoolean/String折线区域的填充方式
labelString在图例和工具提示中显示的数据集的标签。
lineTensionNumber贝塞尔曲线张力。设置为 0 绘制直线。如果使用单调立方插值,则忽略此选项。
pointBackgroundColorColor/Color[]点的填充色
pointBorderColorColor/Color[]点的边框色
pointBorderWidthNumber/Number[]点边框宽度 (以像素为单位)
pointRadiusNumber/Number[]点的半径。如果设置为 0,则不显示。
pointStyleString/String[]/Image/Image[]数据点的样式
pointHitRadiusNumber/Number[]对鼠标事件作出响应的非显示点的像素大小。
pointHoverBackgroundColorColor/Color[]鼠标悬浮时点背景颜色。
pointHoverBorderColorColor/Color[]鼠标悬浮时点的边框色
pointHoverBorderWidthNumber/Number[]鼠标悬浮时点的边框宽度
pointHoverRadiusNumber/Number[]鼠标悬浮时点的半径大小
showLineBoolean如果设置 false,则不会为此数据集绘制线条。
spanGapsBoolean如果为 true,则会在没有或为空数据的点之间绘制线条。如果为 false,则带有 NaN 数据的点会产生一个中断
steppedLineBoolean/String是否显示为阶梯线
xAxisIDString绘制此数据集的 x 轴的 ID。如果未指定,则默认为第一个找到的 x 轴的 ID。
yAxisIDString绘制该数据集的 y 轴的 ID。如果未指定,则默认为第一个找到的 y 轴的 ID。

柱状图

效果・垂直柱状图

示例用法・垂直柱状图

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":"My First Dataset",
"data":[65,59,80,81,56,55,40],
"fill":false,
"backgroundColor":["rgba(255, 99, 132, 0.2)","rgba(255, 159, 64, 0.2)","rgba(255, 205, 86, 0.2)","rgba(75, 192, 192, 0.2)","rgba(54, 162, 235, 0.2)","rgba(153, 102, 255, 0.2)","rgba(201, 203, 207, 0.2)"],
"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
22
23
24
25
{% chart 90% 300 %}
{
"type":"horizontalBar", // 水平柱状图
"data":{
"labels":["January","February","March","April","May","June","July"],
"datasets":[{
"label":"My First Dataset",
"data":[65,59,80,81,56,55,40],
"fill":false,
"backgroundColor":["rgba(255, 99, 132, 0.2)","rgba(255, 159, 64, 0.2)","rgba(255, 205, 86, 0.2)","rgba(75, 192, 192, 0.2)","rgba(54, 162, 235, 0.2)","rgba(153, 102, 255, 0.2)","rgba(201, 203, 207, 0.2)"],
"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":{
"xAxes":[{
"ticks":{
"beginAtZero":true
}
}]
}
}
}
{% endchart %}

相关属性

名称类型描述
labelString在图例和工具提示中显示的数据集标签
xAxisIDString绘制此数据集的 x 轴的 ID。如果未指定,则默认为第一个找到的 x 轴的 ID 。
yAxisIDString绘制该数据集的 y 轴的 ID。如果未指定,则默认为第一个找到的 y 轴的 ID。
backgroundColorColor/Color[]柱状 / 条形图填充色。
borderColorColor/Color[]边框色
borderWidthNumber/Number[]边框宽度 (以像素为单位)
borderSkippedString不绘制边框
hoverBackgroundColorColor/Color[]悬浮时的填充色
hoverBorderColorColor/Color[]悬浮时的边框色
hoverBorderWidthNumber/Number[]悬浮时边框宽度

雷达图

效果

示例用法

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
{% chart 90% 300 %}
{
"type":"radar",
"data":{
"labels":["Eating","Drinking","Sleeping","Designing","Coding","Cycling","Running"],
"datasets":[
{
"label":"My 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":"My 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 %}

相关属性

名称类型描述
labelString图例和工具提示中的数据集的标签名
backgroundColorColor/Color[]填充色
borderColorColor/Color[]线的颜色
borderWidthNumber/Number[]线宽度 (以像素为单位)
borderDashNumber[]破折号的长度和间距 参考 MDN
borderDashOffsetNumber偏移量 参考 MDN
borderCapStyleString线冒样式 参考 MDN
borderJoinStyleStringLine joint 样式 参考 MDN
fillBoolean/String区域填充色
lineTensionNumber贝塞尔曲线张力。0 为直线。
pointBackgroundColorColor/Color[]数据点填充色
pointBorderColorColor/Color[]数据点边框色
pointBorderWidthNumber/Number[]数据点边框宽度 (以像素为单位)
pointRadiusNumber/Number[]数据点半径。0 为不显示点
pointStyleString/String[]/Image/Image[]数据点样式
pointHitRadiusNumber/Number[]对鼠标事件作出响应的非显示点的像素大小。
pointHoverBackgroundColorColor/Color[]鼠标悬浮时,数据点背景颜色
pointHoverBorderColorColor/Color[]鼠标悬浮时,数据点边框色
pointHoverBorderWidthNumber/Number[]鼠标悬浮时数据点的边框宽度
pointHoverRadiusNumber/Number[]鼠标悬停时,数据点的半径大小

环状 / 饼状图

效果・环状图

示例用法・环状图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% chart 90% 300 %}
{
"type":"doughnut",
"data":{
"labels":["Red","Blue","Yellow"],
"datasets":[
{
"label":"My 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
{% chart 90% 300 %}
{
"type":"pie",
"data":{
"labels":["Red","Blue","Yellow"],
"datasets":[
{
"label":"My First Dataset",
"data":[300,50,100],
"backgroundColor":["rgb(255, 99, 132)","rgb(54, 162, 235)","rgb(255, 205, 86)"]
}
]
}
}
{% endchart %}

相关属性

名称类型描述
labelString图例和提示中显示的标签名
backgroundColorColor[]数据集中每个数据区域的填充色
borderColorColor[]边框色
borderWidthNumber[]边框宽度
hoverBackgroundColorColor[]鼠标悬浮时的填充色
hoverBorderColorColor[]鼠标悬浮时边框色
hoverBorderWidthNumber[]鼠标悬浮时边框宽度
名称类型默认值描述
cutoutPercentageNumber50 - for doughnut, 0 - for pie 从中间切出的图表的百分比。
rotationNumber-0.5 * Math.PI起始角度
circumferenceNumber2 * Math.PI允许图形覆盖
animation.animateRotateBooleantrue如果为 true,则图表将使用旋转动画进行动画。该属性在 options.animation 对象中。
animation.animateScaleBooleanfalse如果为 true,则将动画从中心向外缩放图表。

极地图

效果

示例用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% chart 90% 300 %}
{
"type":"polarArea",
"data":{
"labels":["Red","Green","Yellow","Grey","Blue"],
"datasets":[
{
"label":"My First Dataset",
"data":[11,16,7,3,14],
"backgroundColor":["rgb(255, 99, 132)","rgb(75, 192, 192)","rgb(255, 205, 86)","rgb(201, 203, 207)","rgb(54, 162, 235)"]
}
]
}
}
{% endchart %}

相关属性

名称类型描述
labelString在图例和工具提示中要显示数据集的标签
backgroundColorColor[]填充色
borderColorColor[]边框色
borderWidthNumber[]边框宽度
hoverBackgroundColorColor[]鼠标悬浮时背景色
hoverBorderColorColor[]鼠标悬浮时边框色
hoverBorderWidthNumber[]鼠标悬浮时边框宽度

气泡图

效果

示例用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% chart 90% 300 %}
{
"type":"bubble",
"data":{
"datasets":[
{
"label":"First Dataset",
"data":[
{"x":20,"y":30,"r":15},{"x":40,"y":10,"r":10},{"x":24,"y":20,"r":10},{"x":28,"y":16,"r":15},{"x":36,"y":12,"r":10}
],
"backgroundColor":"rgb(255, 99, 132)"
}
]
}
}
{% endchart %}

相关属性

名称类型可脚本化可索引默认值
backgroundColorColorYesYes'rgba(0,0,0,0.1)'
borderColorColorYesYes'rgba(0,0,0,0.1)'
borderWidthNumberYesYes3
dataObject[]--required
hoverBackgroundColorColorYesYesundefined
hoverBorderColorColorYesYesundefined
hoverBorderWidthNumberYesYes1
hoverRadiusNumberYesYes4
hitRadiusNumberYesYes1
labelString--undefined
pointStyleStringYesYescircle
radiusNumberYesYes3

每个气泡的风格可以通过以下属性进行控制:

名称描述
backgroundColor七宝背景色
borderColor气泡边框色
borderWidth气泡边框宽度 (以像素为单位)
pointStyle气泡形状样式
radius气泡半径(以像素为单位)

散点图

效果

示例用法

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:'scatter',
data:{
labels:['January','February','March','April','May','June','July'],
datasets:[
{
label:'My 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:'My 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 %}

相关属性

名称类型描述
borderColorColor/Color[]点颜色
borderWidthNumber/Number[]线的宽度 (以像素为单位)
borderDashNumber[]破折号的长度和间距。 参考 MDN
borderDashOffsetNumber偏移量 参考 MDN
borderCapStyleString线帽样式 参考 MDN
borderJoinStyleString线连接风格 参考 MDN
cubicInterpolationModeString离散的点之间的连接方式
fillBoolean/String折线区域的填充方式
labelString在图例和工具提示中显示的数据集的标签。
lineTensionNumber贝塞尔曲线张力。设置为 0 绘制直线。如果使用单调立方插值,则忽略此选项。
pointBackgroundColorColor/Color[]点的填充色
pointBorderColorColor/Color[]点的边框色
pointBorderWidthNumber/Number[]点边框宽度 (以像素为单位)
pointRadiusNumber/Number[]点的半径。如果设置为 0,则不显示。
pointStyleString/String[]/Image/Image[]数据点的样式
pointHitRadiusNumber/Number[]对鼠标事件作出响应的非显示点的像素大小。
pointHoverBackgroundColorColor/Color[]鼠标悬浮时点背景颜色。
pointHoverBorderColorColor/Color[]鼠标悬浮时点的边框色
pointHoverBorderWidthNumber/Number[]鼠标悬浮时点的边框宽度
pointHoverRadiusNumber/Number[]鼠标悬浮时点的半径大小
showLineBoolean如果设置 false,则不会为此数据集绘制线条。
spanGapsBoolean如果为 true,则会在没有或为空数据的点之间绘制线条。如果为 false,则带有 NaN 数据的点会产生一个中断
steppedLineBoolean/String是否显示为阶梯线
xAxisIDString绘制此数据集的 x 轴的 ID。如果未指定,则默认为第一个找到的 x 轴的 ID。
yAxisIDString绘制该数据集的 y 轴的 ID。如果未指定,则默认为第一个找到的 y 轴的 ID。

区域图

效果

示例用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{% chart 90% 300 %}
{
"type":"line",
"data":{
"datasets":[
{
"label":"Area Dataset",
"data":[10,40],
"fill":1, // 填充--->区域图
"borderColor":"rgb(54, 162, 235)",
"backgroundColor":"rgba(255, 99, 132, 0.2)",
"fill":"origin"
},
]
}
}
{% endchart %}

相关属性

模式类型
绝对数据集索引 1Number1, 2, 3, ...
相对数据集索引 1String'-1', '-2', '+1', ...
边界 2String'start', 'end', 'origin'
禁用 3Booleanfalse

混合图表

效果

示例用法

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
{% 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, 0.2)"
},
{
"label":"Line Dataset",
"data":[10,20,30,40],
"type":"line",
"fill":false,
"borderColor":"rgb(54, 162, 235)",
},
{
"label":"Line Dataset2",
"data":[0,30,10,40],
"type":"line",
"fill":false,
"borderColor":"rgb(255, 0, 0)",
}
]
},
"options":{
"scales":{
"yAxes":[
{
"ticks":{
"beginAtZero":true
}
}
]
}
}
}
{% endchart %}

相关属性

注意运用的 Chart 各自的属性即可。


申明

文章基本转自
shen-yu 大佬 shen-yu
chatjs 中文文档 chatjs,并非原创,本人只是进行了总结和排版。