136 lines
2.0 KiB
Markdown
136 lines
2.0 KiB
Markdown
---
|
|
title: chart.js
|
|
author: pengzhanbo
|
|
createTime: 2024/03/16 19:33:49
|
|
icon: solar:chart-bold
|
|
permalink: /guide/chart/chartjs/
|
|
---
|
|
|
|
## 概述
|
|
|
|
主题支持在 文章中 嵌入由 [chart.js](https://www.chartjs.org/docs/latest/) 图表。
|
|
|
|
该功能由 [vuepress-plugin-md-enhance](https://plugin-md-enhance.vuejs.press/) 提供支持。
|
|
|
|
## 配置
|
|
|
|
主题默认不启用该功能。
|
|
|
|
你需要在你的项目中安装 [chart.js](https://www.chartjs.org/docs/latest/) 库。
|
|
|
|
::: code-tabs
|
|
@tab pnpm
|
|
|
|
```sh
|
|
pnpm add chart.js
|
|
```
|
|
|
|
@tab npm
|
|
|
|
```sh
|
|
npm install chart.js
|
|
```
|
|
|
|
@tab yarn
|
|
|
|
```sh
|
|
yarn add chart.js
|
|
```
|
|
|
|
:::
|
|
|
|
然后在 `.vuepress/config.ts` 配置文件中，启用该功能：
|
|
|
|
::: code-tabs
|
|
@tab .vuepress/config.ts
|
|
|
|
```ts
|
|
export default defineUserConfig({
|
|
theme: plumeTheme({
|
|
plugins: {
|
|
markdownEnhance: {
|
|
chart: true,
|
|
},
|
|
}
|
|
})
|
|
})
|
|
```
|
|
|
|
:::
|
|
|
|
## 语法
|
|
|
|
````md
|
|
::: chart 标题
|
|
```json
|
|
{
|
|
// 此处为图表配置
|
|
}
|
|
```
|
|
:::
|
|
````
|
|
|
|
图标配置请查看 [Chart.js文档](https://www.chartjs.org/docs/latest/) 。
|
|
|
|
## 示例
|
|
|
|
### 块状图
|
|
|
|
**输入：**
|
|
|
|
<!-- @include: ../../snippet/chart-1.snippet.md -->
|
|
|
|
**输出：**
|
|
|
|
<!-- @include: ../../snippet/chart-1.snippet.md{2-41} -->
|
|
|
|
### 气泡图
|
|
|
|
**输入：**
|
|
|
|
<!-- @include: ../../snippet/chart-2.snippet.md -->
|
|
|
|
**输出：**
|
|
|
|
<!-- @include: ../../snippet/chart-2.snippet.md{2-20} -->
|
|
|
|
### 折线图
|
|
|
|
**输入：**
|
|
|
|
<!-- @include: ../../snippet/chart-3.snippet.md -->
|
|
|
|
**输出：**
|
|
|
|
<!-- @include: ../../snippet/chart-3.snippet.md{2-20} -->
|
|
|
|
### 玫瑰图
|
|
|
|
**输入：**
|
|
|
|
<!-- @include: ../../snippet/chart-4.snippet.md -->
|
|
|
|
**输出：**
|
|
|
|
<!-- @include: ../../snippet/chart-4.snippet.md{2-24} -->
|
|
|
|
### 雷达图
|
|
|
|
**输入：**
|
|
|
|
<!-- @include: ../../snippet/chart-5.snippet.md -->
|
|
|
|
**输出：**
|
|
|
|
<!-- @include: ../../snippet/chart-5.snippet.md{2-42} -->
|
|
|
|
### 散点图
|
|
|
|
**输入：**
|
|
|
|
<!-- @include: ../../snippet/chart-6.snippet.md -->
|
|
|
|
**输出：**
|
|
|
|
<!-- @include: ../../snippet/chart-6.snippet.md{2-30} -->
|