简体中文 | English

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

目录

1 安装 2 API 3 基础使用 4 信息图语法参考 5 全部可用信息图示例 6 贡献者 7 进阶使用 8 更多应用开发教程

1 安装

pip install feffery-infographic -U

2 API

Infographic 信息图渲染组件

| 属性名 | 类型 | 默认值 | 说明 | | :---------------------- | :------------------- | :----- | :----------------------------------------------------------------------- | | 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 基础使用

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」知识星球，海量教程案例模板资源，专业的答疑咨询服务，欢迎扫码加入 👇