Markvis入门实战：3个案例教你用Markdown绘制专业级柱状图、折线图和饼图

Markvis入门实战：3个案例教你用Markdown绘制专业级柱状图、折线图和饼图

【免费下载链接】markvis make visualization in markdown. 📊📈 项目地址: https://gitcode.com/gh_mirrors/ma/markvis

Markvis是一款能让你直接在Markdown中创建可视化图表的工具，无需复杂的代码编写，只需简单的配置就能生成专业级的柱状图、折线图和饼图。本文将通过3个实战案例，带你快速掌握如何使用Markvis让你的Markdown文档数据可视化更生动！

📋 准备工作：快速安装Markvis

要开始使用Markvis，首先需要准备好开发环境。按照以下步骤操作，5分钟内即可完成安装：

1. 克隆项目代码
   打开终端，执行以下命令获取Markvis源码：

   git clone https://gitcode.com/gh_mirrors/ma/markvis
   

2. 安装依赖
   进入项目目录并安装必要的依赖包：

   cd markvis && npm install
   

3. 启动示例
   运行示例文件查看效果：

   open examples/basic.html
   

完成后，你将看到Markvis的基础图表展示，包含了本文即将详细讲解的三种图表类型。

📊 案例一：用Markvis创建直观的柱状图

柱状图是对比数据最常用的图表类型，Markvis让创建过程变得异常简单。

基础语法

在Markdown中插入以下格式的代码块：

```vis
layout: bar
data: [
  { key: 0, value: 5 },
  { key: 1, value: 4 },
  { key: 2, value: 7 },
  { key: 3, value: 2 },
  { key: 4, value: 4 },
  { key: 5, value: 8 },
  { key: 6, value: 3 },
  { key: 7, value: 6 }
]

### 效果展示
[![Markvis柱状图和折线图示例](https://raw.gitcode.com/gh_mirrors/ma/markvis/raw/f17e3eab29eeeb130c5a2e992625682e877d8691/docs/preview.png?utm_source=gitcode_repo_files)](https://link.gitcode.com/i/2f022569bd43dc69c28152329f7f23b1)

### 参数说明
- `layout: bar`：指定图表类型为柱状图
- `data`：包含`key`（横轴标签）和`value`（数值）的数组
- 支持自定义颜色、宽度等样式（详见[src/render.js](https://link.gitcode.com/i/cd7e63792393e1339c3e7bd745f6876b)）

## 📈 案例二：用Markvis绘制趋势明显的折线图

折线图非常适合展示数据随时间的变化趋势，Markvis同样提供了简洁的实现方式。

### 基础语法
只需修改`layout`参数为`line`：

layout: line
data: [
  { key: 0, value: 45 },
  { key: 1, value: 100 },
  { key: 2, value: 70 },
  { key: 3, value: 20 },
  { key: 4, value: 30 },
  { key: 5, value: 80 },
  { key: 6, value: 10 },
  { key: 7, value: 60 }
]

### 应用场景
- 销售数据月度变化趋势
- 用户活跃度周报表
- 项目进度跟踪

查看完整示例代码可参考[examples/basic.html](https://link.gitcode.com/i/0accecdd97a86e70ae6fc96c7b5f6378)，其中包含了多种图表的实现方式。

## 🍰 案例三：用Markvis制作比例清晰的饼图

饼图能直观展示各部分占总体的比例关系，是数据报告中的常用图表。

### 基础语法
设置`layout: pie`即可创建饼图：

layout: pie
data: [
  { key: 0, value: 5 },
  { key: 1, value: 4 },
  { key: 2, value: 7 },
  { key: 3, value: 2 },
  { key: 4, value: 4 },
  { key: 5, value: 8 },
  { key: 6, value: 3 },
  { key: 7, value: 6 }
]

### 注意事项
- 数据值总和会自动计算为100%
- 饼图标签会自动生成并优化位置
- 支持通过CSS自定义颜色方案（定义在[src/index.js](https://link.gitcode.com/i/5232daf39fccfc1fd19c8a2da9f9a6c1)中）

## 💡 Markvis高级技巧

1. **组合图表展示**  
   可以在同一文档中组合多种图表类型，实现数据多角度展示。参考[examples/basic.html](https://link.gitcode.com/i/0accecdd97a86e70ae6fc96c7b5f6378)中的多图表布局。

2. **自定义样式**  
   通过修改`src/render.js`中的默认样式，可以定制符合自己需求的图表外观，包括颜色、字体、边框等。

3. **动态数据加载**  
   Markvis支持从外部JSON文件加载数据，适合展示实时更新的统计信息。

## 📚 学习资源

- **官方文档**：[docs/](https://link.gitcode.com/i/4c323fe0e3740d57fe8a4ac4621e6e7b)目录下包含完整的使用说明
- **示例代码**：[examples/](https://link.gitcode.com/i/2cbbc0e41b0c0cd507091aa37c86d7ae)目录提供多种图表实现案例
- **源码解析**：核心渲染逻辑在[src/render.js](https://link.gitcode.com/i/cd7e63792393e1339c3e7bd745f6876b)中

通过这三个实战案例，你已经掌握了Markvis的基本使用方法。无论是技术文档、数据分析报告还是项目总结，Markvis都能帮助你用最简单的方式创建专业的数据可视化图表，让你的Markdown文档更加生动和有说服力！

【免费下载链接】markvis make visualization in markdown. 📊📈 项目地址: https://gitcode.com/gh_mirrors/ma/markvis