在 Hexo 中插入 Chart 动态图表

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

Hexo 中的 Chartjs

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

1
npm install hexo-tag-chart --save

之后在文章内使用 chart 的 tag 就可以了

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

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

我们来看一个样例,你可以把鼠标移上去看看动态效果。

上面这个样例可以通过以下代码来实现:

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: 'My 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 %}

示例

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

柱状/条形图

环形&饼图

雷达图

气泡图

离散图

混合图

如果你想了解更多,官方文档 是不二之选。如果你英语不好,那么可以看看 中文文档,所有的例子和属性都能在里面找到,祝你玩得开心。如果你觉得这个插件不错,可以去 github仓库 给我点个star~

打赏
  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!
  • Copyrights © 2015-2021 Eric Shen
  • 访问人数: | 浏览次数:

请我喝杯咖啡吧~

支付宝
微信