hexo-tag-chart在Hexo 站點中插入 Chartjs 動態圖表

Chartjs 是一款簡單優雅的數據可視化工具，對比其他圖表庫，如 echarts 、 highcharts 、 c3 、 flot 、 amchart 等，它的畫面效果、動態效果都更精緻，它的 文檔首頁 就透出一股小清新，基於 HTML5 Canvas，它擁有更好的性能且響應式，基本滿足了一般數據展示的需要，包括折線圖，條形圖，餅圖，散點圖，雷達圖，極地圖，甜甜圈圖等。

安裝

$ npm install hexo-tag-chart --save

用法

{% chart [width] [height] %}\\ 這裡填寫 Chartjs 配置{% endchart %}

Name	Type	Default	Description
width	decimal	100%	圖表寬度 (%)
height	number	300	圖表高度 (px)

其中 chart 是標籤名，endchart 是結束標籤，不需要更改，90% 是圖表容器的相對寬度，默認是 100%，300 是圖表容器的高度，默認是按正常比例縮放的，你可以通過設置 options 裡面的 aspectRatio 屬性來調整寬高比例，另外還有許多屬性可以自定義，你可以查看 官方文檔。在標籤之間的部分，都是需要自己填充的圖表數據和屬性。

例子

{% chart 80% 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-theme-ayer 、點擊預覽