mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-25 11:28:13 +08:00
472 lines
8.5 KiB
Markdown
472 lines
8.5 KiB
Markdown
---
|
|
url: /guide/chart/chartjs/index.md
|
|
---
|
|
[chart.js]: https://www.chartjs.org/docs/latest/
|
|
|
|
## 概述
|
|
|
|
主题支持在 文章中 嵌入由 [chart.js] 图表。
|
|
|
|
该功能由 [@vuepress/plugin-markdown-chart](https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/) 提供支持。
|
|
|
|
## 配置
|
|
|
|
主题默认不启用该功能。
|
|
|
|
你需要在你的项目中安装 [chart.js] 库。
|
|
|
|
::: npm-to
|
|
|
|
```sh
|
|
npm install chart.js
|
|
```
|
|
|
|
:::
|
|
|
|
然后在 `.vuepress/config.ts` 配置文件中，启用该功能：
|
|
|
|
```ts title=".vuepress/config.ts"
|
|
export default defineUserConfig({
|
|
theme: plumeTheme({
|
|
markdown: {
|
|
chartjs: true, // [!code ++]
|
|
},
|
|
})
|
|
})
|
|
```
|
|
|
|
## 语法
|
|
|
|
````md
|
|
::: chartjs 标题
|
|
```json
|
|
{
|
|
// 此处为图表配置
|
|
}
|
|
```
|
|
:::
|
|
````
|
|
|
|
图表配置请查看 [chart.js] 文档。
|
|
|
|
## 示例
|
|
|
|
::: note
|
|
示例 Fork 自 [@vuepress/plugin-markdown-chart](https://ecosystem.vuejs.press/plugins/markdown/markdown-chart/chartjs.html),
|
|
遵循 [MIT](https://github.com/vuepress/ecosystem/blob/main/LICENSE) 许可证。
|
|
:::
|
|
|
|
### 块状图
|
|
|
|
**输入：**
|
|
|
|
````md
|
|
::: 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": "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
|
|
}
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
:::
|
|
|
|
### 气泡图
|
|
|
|
**输入：**
|
|
|
|
````md
|
|
::: 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": "bubble",
|
|
"data": {
|
|
"datasets": [
|
|
{
|
|
"label": "第一个数据集",
|
|
"data": [
|
|
{ "x": 20, "y": 30, "r": 15 },
|
|
{ "x": 40, "y": 10, "r": 10 }
|
|
],
|
|
"backgroundColor": "rgb(255, 99, 132)"
|
|
}
|
|
]
|
|
}
|
|
}
|
|
```
|
|
|
|
:::
|
|
|
|
### 折线图
|
|
|
|
**输入：**
|
|
|
|
````md
|
|
::: 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": "line",
|
|
"data": {
|
|
"labels": ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
|
|
"datasets": [
|
|
{
|
|
"label": "我的第一个数据集",
|
|
"data": [65, 59, 80, 81, 56, 55, 40],
|
|
"fill": false,
|
|
"borderColor": "rgb(75, 192, 192)",
|
|
"tension": 0.1
|
|
}
|
|
]
|
|
}
|
|
}
|
|
```
|
|
|
|
:::
|
|
|
|
### 玫瑰图
|
|
|
|
**输入：**
|
|
|
|
````md
|
|
::: 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": "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)"
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
```
|
|
|
|
:::
|
|
|
|
### 雷达图
|
|
|
|
**输入：**
|
|
|
|
````md
|
|
::: 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": "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
|
|
}
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
:::
|
|
|
|
### 散点图
|
|
|
|
**输入：**
|
|
|
|
````md
|
|
::: 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"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
```
|
|
:::
|
|
````
|
|
|
|
**输出：**
|
|
|
|
::: 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"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
:::
|