charts

# 通用数据图表 从数据事实出发选择图形和版式，生成可直接打开的 HTML、SVG 或用户指定格式。视觉设计服务于比较、变化和关系，不套用固定品牌模板。 ## 输入 - 必需：结构化数据，或能够可靠转换为表格的数据文本。 - 可选：核心问题、受众、使用场景、画布尺寸、语言、品牌色和输出格式。 - 数据来源不明时标记为“用户提供”，不得虚构来源、单位或统计口径。 数据缺少单位、时间范围或关键字段且会影响结论时，只集中询问一次。可以安全推断的展示细节使用保守默认值。 ## 工作流 ### 1. 审核数据 1. 检查字段类型、单位、时间范围、空值、重复项和异常值。 2. 区分原始记录、汇总值、比例、累计值和预测值。 3. 验证分母、总计与百分比；无法核实的值不自动修正。 4. 用一句话写出图表需要回答的问题，再选择图形。 ### 2. 选择图形 按数据关系选择常见且可解释的编码： | 数据关系 | 优先图形 | | --- | --- | | 类别比较 | 横向或纵向条形图 | | 连续时间变化 | 折线图；需要总量时可用面积图 | | 构成变化 | 堆叠条形图或堆叠面积图 | | 单次构成 | 排序条形图；类别很少时可用环形图 | | 两变量关系 | 散点图 | | 数值分布 | 直方图、箱线图或点图 | | 前后变化 | 哑铃图或坡度图 | | 正负贡献 | 瀑布图或发散条形图 | | 层级份额 | 矩形树图 | | 流向关系 | 桑基图 | | 地理分布 | 地图，仅在用户明确需要且边界数据可靠时使用 | 禁止使用与数据结构不匹配的图形。柱形长度从零基线开始；面积和气泡按面积而非半径表达数值；双轴图只有在单位和关系清楚时使用。 ### 3. 组织信息 - 标题说明结论或问题，不只写图形名称。 - 副标题交代时间、范围、单位和必要口径。 - 标签优先显示读者完成判断所需的值，避免每个点都堆文字。 - 来源和注释放在图表附近，不隐藏重要限制。 - 多图页面先安排总览，再放支持结论；每张图承担不同问题。 ### 4. 设计视觉 - 使用中性背景、清晰文字和有限色板。 - 颜色承担分类、顺序或强调中的一种明确职责。 - 默认只设置一个强调色；类别色数量过多时改用分组、排序或分面。 - 正文和关键标记满足可读对比度，不能只靠颜色区分类别。 - 保证移动端不横向溢出，标签不重叠，长文本允许换行。 - 动画只用于解释变化，支持 `prefers-reduced-motion`。 ### 5. 实现 默认生成单文件 HTML： - 简单图形优先使用原生 HTML、CSS 和 SVG。 - 复杂交互可使用项目已安装的图表库；没有依赖时，可按用户联网要求选择成熟库并明确 CDN 依赖。 - 数据集中放在一个清晰的常量或 JSON 区域，不散落在绘制逻辑中。 - 提供响应式容器、语义标题、文本摘要和必要的 `aria-label`。 - 不加载与成品无关的字体、脚本、图片或追踪代码。 用户明确要求报告时，可在同一个 HTML 中加入摘要、关键指标、图表、方法说明和来源。不要把普通单图擅自扩展成仪表盘。 ### 6. 验收 交付前检查： - 图形编码与原始数值一致，没有断轴或误导比例； - 标题、单位、图例、来源和时间范围完整； - 空值、异常值和预测值有可见说明； - 桌面与移动尺寸下均无裁切、遮挡和溢出； - 键盘、屏幕阅读器和减少动画设置具备合理降级； - 控制台无错误，离线要求与实际外部依赖一致。 可使用浏览器截图检查布局。涉及 Canvas 时同时检查画布像素不是空白；交互图至少验证悬停、键盘焦点和窗口缩放。 ## 最终回复 提供输出文件链接，并简述选择的图形、它回答的问题、数据口径和外部依赖。若数据不足以支撑用户要求的结论，应明确指出，不通过视觉效果掩盖缺口。