chart.js
Overview
The theme supports embedding chart.js charts within articles.
This feature is powered by @vuepress/plugin-markdown-chart.
Configuration
This feature is disabled by default in the theme.
You need to install the chart.js library in your project.
pnpm
pnpm add chart.jsyarn
yarn add chart.jsnpm
npm install chart.jsThen, enable the feature in the .vuepress/config.ts configuration file:
export default defineUserConfig({
theme: plumeTheme({
markdown: {
chartjs: true,
},
})
})Syntax
::: chartjs Title
```json
{
// Chart configuration goes here
}
```
:::Refer to the chart.js documentation for chart configuration details.
Examples
Note
Examples are forked from @vuepress/plugin-markdown-chart, licensed under MIT.
Bar Chart
Input:
::: chartjs 块状图案例
```json
{
"type": "bar",
"data": {
"labels": ["红色", "蓝色", "黄色", "绿色", "紫色", "橙色"],
"datasets": [
{
"label": "投票数",
"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
}
}
}
}
```
:::Output:
块状图案例
Bubble Chart
Input:
::: chartjs 气泡图案例
```json
{
"type": "bubble",
"data": {
"datasets": [
{
"label": "第一个数据集",
"data": [
{ "x": 20, "y": 30, "r": 15 },
{ "x": 40, "y": 10, "r": 10 }
],
"backgroundColor": "rgb(255, 99, 132)"
}
]
}
}
```
:::Output:
气泡图案例
Line Chart
Input:
::: chartjs 折线图案例
```json
{
"type": "line",
"data": {
"labels": ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
"datasets": [
{
"label": "我的第一个数据集",
"data": [65, 59, 80, 81, 56, 55, 40],
"fill": false,
"borderColor": "rgb(75, 192, 192)",
"tension": 0.1
}
]
}
}
```
:::Output:
折线图案例
Polar Area Chart
Input:
::: chartjs 玫瑰图案例
```json
{
"type": "polarArea",
"data": {
"labels": ["红色", "绿色", "黄色", "灰色", "蓝色"],
"datasets": [
{
"label": "我的第一个数据集",
"data": [11, 16, 7, 3, 14],
"backgroundColor": [
"rgb(255, 99, 132)",
"rgb(75, 192, 192)",
"rgb(255, 205, 86)",
"rgb(201, 203, 207)",
"rgb(54, 162, 235)"
]
}
]
}
}
```
:::Output:
玫瑰图案例
Radar Chart
Input:
::: chartjs 雷达图案例
```json
{
"type": "radar",
"data": {
"labels": ["吃饭", "喝水", "睡觉", "设计", "编程", "骑车", "跑步"],
"datasets": [
{
"label": "我的第一个数据集",
"data": [65, 59, 90, 81, 56, 55, 40],
"fill": true,
"backgroundColor": "rgba(255, 99, 132, 0.2)",
"borderColor": "rgb(255, 99, 132)",
"pointBackgroundColor": "rgb(255, 99, 132)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgb(255, 99, 132)"
},
{
"label": "我的第二个数据集",
"data": [28, 48, 40, 19, 96, 27, 100],
"fill": true,
"backgroundColor": "rgba(54, 162, 235, 0.2)",
"borderColor": "rgb(54, 162, 235)",
"pointBackgroundColor": "rgb(54, 162, 235)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgb(54, 162, 235)"
}
]
},
"options": {
"elements": {
"line": {
"borderWidth": 3
}
}
}
}
```
:::Output:
雷达图案例
Scatter Chart
Input:
::: chartjs 散点图案例
```json
{
"type": "scatter",
"data": {
"datasets": [
{
"label": "散点数据集",
"data": [
{ "x": -10, "y": 0 },
{ "x": 0, "y": 10 },
{ "x": 10, "y": 5 },
{ "x": 0.5, "y": 5.5 }
],
"backgroundColor": "rgb(255, 99, 132)"
}
]
},
"options": {
"scales": {
"x": {
"type": "linear",
"position": "bottom"
}
}
}
}
```
:::Output:
散点图案例
