vuepress-plugin-chart 插件，用于在 VuePress 的 Markdown 中使用 JavaScript 图表库 Chart.js。
# 安装
yarn add vuepress-plugin-chart
# or
npm install vuepress-plugin-chart
然后在 .vuepress/config.js 中引入这个插件：
module.exports = {
plugins: [
[
'vuepress-plugin-chart'
]
]
}
# 使用
代码块的 token info 需要为 chart，比如：
代码
```chart
{
"type": "doughnut",
"data": {
"datasets": [{
"data": [10, 20, 30],
"backgroundColor": [
"rgba(255, 99, 132)",
"rgba(255, 206, 86)",
"rgba(54, 162, 235)"
]
}],
"labels": ["Red", "Yellow", "Blue"]
}
}
```
警告
key 值一定要加引号，否则会报错。
如果希望通过 callback 传入一个函数，需要将函数写成字符串。下面这个例子通过 callback 修改了 Y 轴的刻度值：
代码
```chart
{
"type": "bar",
"data": {
"labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
"datasets": [{
"label": "Salary",
"data": [12, 19, 3, 5, 2, 3],
"backgroundColor": [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)"
]
}]
},
"options": {
"scales": {
"y": {
"ticks": {
"beginAtZero": true,
"callback": "function(value){ return '￥' + value + 'k'; }"
}
}
}
}
}
```
更详细的用法可以参考 Chart.js 文档。