plugin-chart

Gungnir
2020-03-26
3 min

npm github license

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 文档

# 开源协议

MIT