mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-23 10:58:13 +08:00
69 lines
1.2 KiB
Markdown
69 lines
1.2 KiB
Markdown
# Chart.js
|
|
|
|
The theme supports embedding [chart.js] charts within articles.
|
|
|
|
## Configuration
|
|
|
|
Enable the feature in `.vuepress/config.ts`:
|
|
|
|
```ts title=".vuepress/config.ts"
|
|
export default defineUserConfig({
|
|
theme: plumeTheme({
|
|
markdown: {
|
|
chartjs: true,
|
|
},
|
|
})
|
|
})
|
|
```
|
|
|
|
You also need to install the `chart.js` library:
|
|
|
|
```sh
|
|
npm install chart.js
|
|
```
|
|
|
|
## Syntax
|
|
|
|
Use the `chartjs` container with a JSON code block:
|
|
|
|
````md
|
|
::: chartjs Title
|
|
```json
|
|
{
|
|
"type": "bar",
|
|
"data": {
|
|
"labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
|
|
"datasets": [{
|
|
"label": "# of Votes",
|
|
"data": [12, 19, 3, 5, 2, 3],
|
|
"backgroundColor": [
|
|
"rgba(255, 99, 132, 0.2)",
|
|
"rgba(54, 162, 235, 0.2)",
|
|
"rgba(255, 206, 86, 0.2)",
|
|
"rgba(75, 192, 192, 0.2)",
|
|
"rgba(153, 102, 255, 0.2)",
|
|
"rgba(255, 159, 64, 0.2)"
|
|
],
|
|
"borderColor": [
|
|
"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)"
|
|
],
|
|
"borderWidth": 1
|
|
}]
|
|
},
|
|
"options": {
|
|
"scales": {
|
|
"y": {
|
|
"beginAtZero": true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
```
|
|
:::
|
|
````
|