feffery-infographic

🦋 轻松构建新一代声明式信息图可视化

简体中文 | English

适用于Python全栈应用开发框架Plotly Dash的组件库，基于AntV Infographic，提供丰富的信息图渲染功能。

目录

1 安装

2 API

3 基础使用

4 信息图语法参考

5 全部可用信息图示例

6 贡献者

7 进阶使用

8 更多应用开发教程

1 安装

``bash
pip install feffery-infographic -U
`

2 API

$3

| 属性名 | 类型 | 默认值 | 说明 |
| :---------------------- | :------------------- | :----- | :----------------------------------------------------------------------- |
| id | string | - | 组件唯一 ID |
| key | string | - | 更新当前组件的 key 值，可用于强制触发组件重绘 |
| style | dict | - | 当前组件的 CSS 样式对象 |
| className | string | - | 当前组件的 CSS 类名 |
| syntax | string | - | 必填，用于定义信息图内容的语法字符串 |
| width | number \| string | - | 信息图容器宽度，支持数值或字符串（如 '100%'） |
| height | number \| string | - | 信息图容器高度，支持数值或字符串（如 '500px'） |
| padding | number \| list | - | 信息图容器内边距，支持数值或数组格式（如 [top, right, bottom, left]） |
| editable | boolean | False| 是否开启可编辑模式 |
| exportTrigger | dict | - | 触发图片导出或下载操作的配置对象，每次更新都会触发操作并在执行后重置为空 |
| exportEvent | dict | - | 监听最近一次图片导出事件的数据对象 |
| debugWindowInstanceName | string | - | 调试专用，设置后会将当前组件实例挂载到 window 对象下的指定变量名 |

exportTrigger 配置详解：

- type: _string_，导出图片的格式，可选值有 'png'、'svg'，默认为 'png'。
- dpr: _number_，导出 'png' 格式图片时的像素比，默认为 1。
- download: _boolean_，是否自动触发浏览器下载，默认为 True。
- fileName: _string_，下载文件的名称（不含后缀），默认为 'infographic_export'。

exportEvent 结构详解：

- timestamp: _number_，事件触发的时间戳。
- type: _string_，导出的图片格式，可能值为 'png' 或 'svg'。
- data: _string_，导出的图片 dataURL 数据。

3 基础使用

`python
import dash
from dash import html
import feffery_infographic as fi

app = dash.Dash(__name__)

app.layout = html.Div(
[
fi.Infographic(
# 定义信息图语法
syntax="""
infographic list-row-simple-horizontal-arrow
data
items
- label 步骤 1
desc 开始
- label 步骤 2
desc 进行中
- label 步骤 3
desc 完成
""",
)
],
style={'padding': 50},
)

if __name__ == '__main__':
app.run(debug=True)
`

4 信息图语法参考

👉 https://infographic.antv.vision/learn/infographic-syntax

5 全部可用信息图示例

👉 https://infographic.antv.vision/gallery

6 贡献者

7 进阶使用

| 场景 | 功能描述 | 源码 |
| :------: | :-----------------------------------------------: | :-------------------------------------------------------: |
| 流式渲染 | 基于最常见的SSE服务演示信息图语法的流式更新渲染 | stream_render_example |
| 可编辑 | 信息图中的文字等主要元素可进一步在线手动编辑 | editable_example |
| 下载图片 | 调用组件内置的图片下载功能，支持svg、png`格式 | download_example |

8 更多应用开发教程

> 微信公众号「玩转 Dash」，欢迎扫码关注 👇

> 「玩转 Dash」知识星球，海量教程案例模板资源，专业的答疑咨询服务，欢迎扫码加入 👇