图表 widget

VizChat 内置四种图表 widget，覆盖最常见的数据可视化需求：柱状图（Bar Chart）、折线图（Line Chart）、饼图（Pie Chart）、函数作图（Math Coordinate）。它们使用统一的 item 数据模型和配色系统，可通过 Agent 对话或手动配置生成。

如何创建

图表 widget 支持三种创建方式：

1. AI 对话：在聊天中说"把这些销售数据做成柱状图"，Agent 会自动选择合适的图表类型并填充数据。
2. 手动拖拽：从 widget 面板拖拽到画布，再填入 items。
3. 斜杠命令：在画布内输入 /bar-chart、/line-chart、/pie-chart 等命令。

关键配置

所有图表 widget 共享一套 items + config 模型：

• items：数据项数组（每项包含 id / label / value，可选 color）
• config.appearance.colorScheme：统一配色方案（来自 ColorSchemeSchema）
• config.display.showTitle / titlePosition：标题显示与位置
• config.display.showValueLabels：数值标签
• config.display.enableAnimation：动画开关

柱状图额外支持 orientation: 'vertical' | 'horizontal'；折线图有 y 轴范围与平滑曲线选项；饼图支持圆环模式与标签策略；函数作图走坐标系+函数表达式路径。

常见用例

• 销售数据柱状图：季度营收、地区销量对比
• 趋势折线图：DAU 曲线、股价走势、实验指标
• 占比饼图：流量来源、预算分配、市场份额
• 函数作图：教学场景下的 y = f(x) 可视化、几何构造

引用与导出

• Widget 支持导出为 PNG / SVG（见 导出）
• 作为 storyboard 步骤的主角，可被 导出视频 带入演示
• 在 AI 对话中可被 @mention 引用进行二次追问

Next step

• 表格 widget — 将源表格转为图表前的中间态
• 用户 Widget — 当内置图表类型不够时的 Agent 动态生成方案
• 画布概念 — 理解 widget 在画布中的位置与关系