vuepress-theme-plume/docs/notes/theme/guide/图表/chart.md

title, author, createTime, icon, permalink

title	author	createTime	icon	permalink
chart.js	pengzhanbo	2024/03/16 19:33:49	solar:chart-bold	/guide/chart/chartjs/

概述

主题支持在 文章中 嵌入由 chart.js 图表。

该功能由 vuepress-plugin-md-enhance 提供支持。

配置

主题默认不启用该功能。

你需要在你的项目中安装 chart.js 库。

::: code-tabs @tab pnpm

pnpm add chart.js

@tab npm

npm install chart.js

@tab yarn

yarn add chart.js

:::

然后在 .vuepress/config.ts 配置文件中，启用该功能：

::: code-tabs @tab .vuepress/config.ts

export default defineUserConfig({
  theme: plumeTheme({
    plugins: {
      markdownEnhance: {
        chart: true,
      },
    }
  })
})

:::

语法

::: chart 标题
```json
{
  // 此处为图表配置
}
```
:::

图标配置请查看 Chart.js文档 。

示例

块状图

输入：

输出：

气泡图

输入：

输出：

折线图

输入：

输出：

玫瑰图

输入：

输出：

雷达图

输入：

输出：

散点图

输入：

输出：