A docsify plugin to render AntV Infographic diagrams.
The leaderboard is rendered using Infographic
Add Infographic and the plugin to your docsify project:
<script>
window.$docsify = {
infographicConfig: {
width: '100%',
height: '100%'
}
};
</script>
<!-- Load AntV Infographic -->
<script src="https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js"></script>
<!-- Load Plugin -->
<script src="https://unpkg.com/docsify-infographic@latest/dist/docsify-infographic.js"></script>Configure rendering parameters via window.$docsify.infographicConfig:
| Option | Default | Description |
|---|---|---|
| width | '100%' | Infographic width, supports percentage or pixels |
| height | '100%' | Infographic height, supports percentage or pixels |
Use infographic as the code block language identifier in Markdown:
```infographic
infographic list-row-simple-horizontal-arrow
data
lists
- label Step 1
desc Start
- label Step 2
desc Processing
- label Step 3
desc Complete
```You can specify width and height for a single infographic. Supports pixels (px) and percentages (%):
```infographic 100px*100px
infographic list-row-simple-horizontal-arrow
data
title: Small Chart
```
```infographic 50%*80%
infographic chart-column-simple
data
title: Wide Chart
```
```infographic 400px*auto
infographic chart-pie-donut-pill-badge
data
title: Fixed Width Chart
```infographic 100px*100px- Fixed pixel sizeinfographic 50%*80%- Percentage size relative to the parent container- Uses the default value from global configuration if not specified
For more chart types and syntax, please refer to AntV Infographic Documentation.
# Install dependencies
npm install
# Build plugin
npm run build
# Run example
npm run exampleMIT
排行榜就是使用 Infographic 渲染的
在 docsify 中添加 Infographic 和插件：
<script>
window.$docsify = {
infographicConfig: {
width: '100%',
height: '100%'
}
};
</script>
<!-- 加载 AntV Infographic -->
<script src="https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js"></script>
<!-- 加载插件 -->
<script src="https://unpkg.com/docsify-infographic@latest/dist/docsify-infographic.js"></script>通过 window.$docsify.infographicConfig 配置渲染参数：
| 选项 | 默认值 | 说明 |
|---|---|---|
| width | '100%' | 信息图宽度，支持百分比或像素 |
| height | '100%' | 信息图高度，支持百分比或像素 |
在 Markdown 中使用 infographic 作为代码块语言标识：
```infographic
infographic list-row-simple-horizontal-arrow
data
lists
- label 步骤 1
desc 开始
- label 步骤 2
desc 进行中
- label 步骤 3
desc 完成
```可以为单个信息图指定宽度和高度。支持像素（px）和百分比（%）：
```infographic 100px*100px
infographic list-row-simple-horizontal-arrow
data
title: 小尺寸图表
```
```infographic 50%*80%
infographic chart-column-simple
data
title: 宽图表
```
```infographic 400px*auto
infographic chart-pie-donut-pill-badge
data
title: 固定宽度图表
```infographic 100px*100px- 固定像素尺寸infographic 50%*80%- 相对父容器的百分比尺寸- 未指定时使用全局配置的默认值
更多图表类型和语法请参考 AntV Infographic 文档。
# 安装依赖
npm install
# 构建插件
npm run build
# 运行示例
npm run exampleMIT
