chart.js
概述
主题支持在文章中嵌入 chart.js 图表。
该功能由 @vuepress/plugin-markdown-chart 提供支持。
配置
主题默认不启用该功能。
你需要在你的项目中安装 chart.js 库。
npm
npm install chart.jspnpm
pnpm add chart.jsyarn
yarn add chart.js然后在 .vuepress/config.ts 配置文件中，启用该功能：
export default defineUserConfig({
theme: plumeTheme({
markdown: {
chartjs: true,
},
})
})语法
::: chartjs 标题
```json
{
// 此处为图表配置
}
```
:::图表配置请查看 chart.js 文档。
示例
注
示例 Fork 自 @vuepress/plugin-markdown-chart, 遵循 MIT 许可证。
块状图
输入：
::: 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
}
}
}
}
```
:::输出：
块状图案例
气泡图
输入：
::: 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)"
}
]
}
}
```
:::输出：
气泡图案例
折线图
输入：
::: 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
}
]
}
}
```
:::输出：
折线图案例
玫瑰图
输入：
::: 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)"
]
}
]
}
}
```
:::输出：
玫瑰图案例
雷达图
输入：
::: 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
}
}
}
}
```
:::输出：
雷达图案例
散点图
输入：
::: 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"
}
}
}
}
```
:::输出：
散点图案例
