Spaces:
Sleeping
Sleeping
Upload modules/chart_engine/README.md with huggingface_hub
Browse files
modules/chart_engine/README.md
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
# ECharts SVG Rendering Framework
|
| 2 |
+
|
| 3 |
+
该项目是一个灵活的图表渲染框架,可以将ECharts和D3.js生成的图表转换为SVG格式,支持多种图表类型和渲染方式。
|
| 4 |
+
|
| 5 |
+
## 功能特点
|
| 6 |
+
|
| 7 |
+
- 支持多种渲染引擎:
|
| 8 |
+
- ECharts JavaScript API
|
| 9 |
+
- Python生成的ECharts配置
|
| 10 |
+
- D3.js图表
|
| 11 |
+
- 提供统一的SVG输出格式
|
| 12 |
+
- 支持递归扫描的模板系统,可以轻松添加新的图表类型
|
| 13 |
+
- 本地托管JavaScript库,减少外部依赖
|
| 14 |
+
- 高度可配置的渲染选项
|
| 15 |
+
- 完善的错误处理和日志记录
|
| 16 |
+
|
| 17 |
+
## 项目结构
|
| 18 |
+
|
| 19 |
+
```
|
| 20 |
+
framework/
|
| 21 |
+
├── make_svg.py # 主程序入口点
|
| 22 |
+
├── template/ # 图表模板目录
|
| 23 |
+
│ ├── d3-js/ # D3.js模板
|
| 24 |
+
│ ├── echarts-js/ # ECharts JavaScript模板
|
| 25 |
+
│ ├── echarts_py/ # Python生成的ECharts模板
|
| 26 |
+
│ └── template_registry.py # 模板注册和管理
|
| 27 |
+
├── utils/ # 工具函数
|
| 28 |
+
│ ├── file_utils.py # 文件操作函数
|
| 29 |
+
│ ├── html_to_svg.py # HTML到SVG的转换
|
| 30 |
+
│ └── load_charts.py # 图表加载和渲染
|
| 31 |
+
├── scripts/ # 辅助脚本
|
| 32 |
+
├── static/ # 静态资源
|
| 33 |
+
│ └── lib/ # 本地JavaScript库
|
| 34 |
+
└── data/ # 示例数据
|
| 35 |
+
```
|
| 36 |
+
|
| 37 |
+
## 使用方法
|
| 38 |
+
|
| 39 |
+
### 基本用法
|
| 40 |
+
|
| 41 |
+
1. 准备JSON格式的输入数据
|
| 42 |
+
2. 运行主程序生成SVG图表:
|
| 43 |
+
|
| 44 |
+
```bash
|
| 45 |
+
python modules/chart_engine/chart_engine.py --input test/input.json --name donut_chart_01 --output tmp.svg
|
| 46 |
+
python modules/chart_engine/chart_engine.py --input test/testset/data/55.json --name donut_chart_01 --output tmp.svg
|
| 47 |
+
```
|
| 48 |
+
|
| 49 |
+
参数说明:
|
| 50 |
+
- `--input`: 输入JSON文件路径
|
| 51 |
+
- `--name`: 图表类型名称
|
| 52 |
+
- `--output`: 输出SVG文件路径
|
| 53 |
+
- `--html`: 输出HTML文件路径(可选),用于调试和修改图表代码
|
| 54 |
+
|
| 55 |
+
### HTML调试模式
|
| 56 |
+
|
| 57 |
+
使用`--html`参数可以同时导出HTML格式的图表:
|
| 58 |
+
|
| 59 |
+
```bash
|
| 60 |
+
python modules/chart_engine/chart_engine.py --input test/input.json --name donut_chart_01 --html debug.html
|
| 61 |
+
```
|
| 62 |
+
|
| 63 |
+
HTML模式的优势:
|
| 64 |
+
- 便于在浏览器中调试图表代码
|
| 65 |
+
- 可以直接修改和测试图表样式和行为
|
| 66 |
+
- 在开发新模板或解决复杂渲染问题时特别有用
|
| 67 |
+
|
| 68 |
+
### 添加新模板
|
| 69 |
+
|
| 70 |
+
如需了解如何创建新的图表模板,请参考文档 `docs/how_to_write_a_template.md`
|
| 71 |
+
|
| 72 |
+
## 依赖项
|
| 73 |
+
|
| 74 |
+
- Python 3.8+
|
| 75 |
+
- Node.js和npm(用于HTML到SVG的转换)
|
| 76 |
+
- Puppeteer(用于使用浏览器渲染SVG)
|
| 77 |
+
|
| 78 |
+
## 开发指南
|
| 79 |
+
|
| 80 |
+
|
| 81 |
+
### 添加新的渲染引擎
|
| 82 |
+
|
| 83 |
+
1. 在`utils/load_charts.py`中添加新的加载函数
|
| 84 |
+
2. 更新`render_chart_to_svg`函数以支持新的引擎
|