博客主页 😑

Author:

Eric Shen

©

Wordage:

共计 1944 字

needs:

约 1 分钟

Popular:

6 ℃

Created:

目 录

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

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 %}

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

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

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

共计 0 条评论,点此发表评论
萌ICP备20226257号 赣ICP备2022001242号-1 闽公网安备35020502000606号 本站已运行 253 天 10 小时 17 分 51统计 百度统计 本站由提供CDN加速服务 自豪地使用 Typecho 建站,并搭配 MyDiary 主题 Copyright © 2022 ~ 2022. 公爵书房 All rights reserved.
历史足迹
分类目录
  • 随笔
  • 知识
  • 分享
  • 书籍
  • 专栏
  • 笔记