在 Hexo 中插入 Chart 动态图表

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

Hexo 中的 Chartjs

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

npm install hexo-tag-chart --save

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

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

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

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

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

{% 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~

打赏