图表模板：折线图、柱状图、仪表盘与 JSON 图表

2. 先配置位置和尺寸

所有图表都先确认 Position and Size。这里决定图表导出后在运行页面中的实际位置和占用区域，配置不准确会造成遮挡、压缩或与其他画面对象错位。

• X、Y：图表左上角在页面中的坐标，通常和周围标题、按钮、边框一起对齐。
• Width、Height：图表导出的显示宽高；折线图和柱状图需要给坐标轴、图例和标签留出空间。
• 多个图表并排时，应统一高度或基线，避免运行端看起来不齐。
• 尺寸调整后再检查标题、图例、坐标轴刻度和 Tooltip 是否被压住。

4. 柱状图 Bar Chart 配置方法

柱状图也使用 Tags 表格配置，每一行通常代表一个分类柱或一个当前值。它更适合对比当前状态，不适合承载很长的时间趋势。

• Chart Name：柱状图标题，建议写清楚对比对象，例如设备、产线、班组或区域。
• Name：柱子的分类名称或系列名称，会影响横轴标签、图例和 Tooltip。
• Tag：柱子数值来源；同一张图中的 Tag 应保持可比较的单位和口径。
• Color：柱子颜色；同类对象可使用同一色系，告警或重点对象可用强调色。
• Unit：数值单位；多个柱子单位不一致时，不建议放在同一张柱状图中比较。
• Precision：显示精度；产量、次数等整数类指标通常设为 0，温度、压力等模拟量按项目要求设置。
• Advanced JSON：需要批量配置或改为直接 JSON 时再启用，普通场景优先使用表格配置。

6. JSON Chart 标准字段配置方法

JSON Chart 用 JSON Tag 提供数据，再用字段映射告诉图表哪个字段做横轴、哪个字段做系列、哪个字段做数值。字段名必须和运行时 JSON 中的字段完全一致，包括大小写。

• JSON Tag：保存图表数据的 JSON 点位或变量，例如 A2.ChartData。
• Time Field (X)：横轴时间字段，常用 ts；时间值建议使用稳定格式，例如 2026-07-06T10:48:54+08:00。
• Series Name Field：系列名称字段，常用 series；多条线或多组数据用它区分。
• Value Field (Y)：纵轴数值字段，常用 value；字段值必须能转换为数值。
• Appearance：Title、Legend、Grid 控制标题、图例和网格线，建议调试阶段先全部打开，交付前再按画面需要取舍。
• JSON 数据结构调整后，必须同步修改字段映射，否则运行端会出现空图、坐标轴缺失或 Tooltip 无数据。

{
  "rows": [
    {
      "ts": "2026-07-06T10:48:54+08:00",
      "series": "A2 JSON",
      "value": 18,
      "color": "#2563EB"
    },
    {
      "ts": "2026-07-06T10:49:54+08:00",
      "series": "A2 JSON",
      "value": 44,
      "color": "#2563EB"
    }
  ]
}

JSON Tag: A2.ChartData
Time Field (X): ts
Series Name Field: series
Value Field (Y): value

7. Advanced JSON 直接编辑

勾选 Edit JSON directly 后，界面会切换为三段 JSON：Data Source JSON、Field Mapping JSON、Appearance JSON。它适合批量维护、复制配置或填写标准字段无法覆盖的扩展参数；普通配置优先使用表格字段。

• Data Source JSON：定义数据来源、刷新周期、Tag 列表或 JSON Tag，例如 kind、refreshMs、tags、tagName、shape。
• Field Mapping JSON：定义字段映射，例如 time、category、series、value，对应运行数据里的真实字段名。
• Appearance JSON：定义显示开关，例如 titleVisible、legendVisible、gridVisible。
• 直接编辑时必须保持合法 JSON，属性名和字符串都要使用英文双引号，不能使用中文引号。
• 保存前建议先复制当前 JSON 作为回退版本；保存后到 HQControl 中检查是否能正常渲染。

{
  "version": 1,
  "kind": "variable-json",
  "refreshMs": 1000,
  "tagName": "ChartData",
  "shape": "rows"
}

{
  "time": "ts",
  "category": "category",
  "series": "series",
  "value": "value"
}

{
  "titleVisible": true,
  "legendVisible": true,
  "gridVisible": true
}

8. 导出前检查清单

图表配置完成后，应在导出画面包并由 HQControl 加载后检查真实运行效果。PPT 中能保存配置，不代表运行端数据源、字段和权限都已经可用。

• 图表不为空：确认 Tag 或 JSON Tag 在运行端能读取到数据，且数据类型正确。
• 字段能匹配：JSON Chart 的 Time Field、Series Name Field、Value Field 与实际 JSON 字段完全一致。
• 数值显示正确：单位、精度、量程、颜色与项目约定一致。
• 布局不遮挡：标题、图例、坐标轴、Tooltip 和周围按钮、文本没有重叠。
• 刷新符合预期：实时曲线、柱状图和 JSON 图表按项目要求刷新；异常值或断点显示方式可接受。
• 交付可追溯：记录图表使用的 Tag、JSON Tag、字段映射和高级 JSON，便于现场维护。