所属产品: Mingcedar Studio DESIGNER

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

插入图表，配置位置、数据和外观，再导出至 Mingcedar 验证。折线图、柱状图、仪表盘和 JSON 图表须分别按其字段配置。

首次发布 2026-10-25T12:48:42.571389245Z 最近更新 2026-10-25T12:48:42.571388493Z

插入图表，配置位置、数据和外观，再导出至 Mingcedar 验证。折线图、柱状图、仪表盘和 JSON 图表须分别按其字段配置。

<h3 id="chart-templates-item-1">1. 插入图表模板</h3>

<p>从 Templates → Chart 插入图表，打开 Template Edit 配置。图表随页面导出，由 Mingcedar 读取数据并渲染。</p>

<ul>

<li>Line Chart：用于连续数据趋势，适合多条 Tag 曲线在同一坐标系中展示。</li>

<li>Bar Chart：用于当前值或分类值对比，适合多个 Tag 形成柱状对照。</li>

<li>Gauge：用于单个 Tag 的量程展示，适合压力、温度、液位、转速等单点读数。</li>

<li>JSON Chart：用于由 JSON Tag 提供的结构化数据，适合脚本、接口或变量组装出的曲线或分类图。</li>

<li>Template 区域显示 Instance、Template、Group，用来确认当前编辑对象的类型；正式配置主要在 Position and Size 与 Chart 区域完成。</li>

</ul>

</article>

<h3 id="chart-templates-item-2">2. 先配置位置和尺寸</h3>

<p>Position and Size 决定运行页中的位置和区域。检查是否遮挡、压缩或错位。</p>

<ul>

<li>X、Y：图表左上角在页面中的坐标，通常和周围标题、按钮、边框一起对齐。</li>

<li>Width、Height：图表导出的显示宽高；折线图和柱状图需要给坐标轴、图例和标签留出空间。</li>

<li>多个图表并排时，应统一高度或基线，避免运行端看起来不齐。</li>

<li>尺寸调整后再检查标题、图例、坐标轴刻度和 Tooltip 是否被压住。</li>

</ul>

</article>

<h3 id="chart-templates-item-3">3. 折线图 Line Chart 配置方法</h3>

<p>折线图使用 Series 表格绑定多条曲线。每一行代表一条曲线，运行时按 Tag 读取数值，并用 Name、Color、Unit、Precision 控制显示。</p>

<ul>

<li>Chart Name：图表标题文本；Appearance 中勾选 Title 后会显示。</li>

<li>Name：系列名称，显示在图例或 Tooltip 中，建议使用现场人员能识别的短名称。</li>

<li>Tag：曲线读取的数值 Tag 名称，例如 PLC_LINE01.PUMP01.SPEED；使用页面地址变量时填 =selectedSpeedTag。</li>

<li>Color：该系列的线条颜色；多条曲线应使用区分度高的颜色。</li>

<li>Unit：单位文本，留空时不显示单位；应与 Tag 的实际单位一致。</li>

<li>Precision：小数位数，示例中为 1，表示运行端按 1 位小数显示。</li>

<li>Add / Remove：增加或删除系列行；删除前确认该曲线不是运行画面必须展示的关键点位。</li>

<li>Appearance：Title、Legend、Grid 分别控制标题、图例和网格线。</li>

</ul>

</article>

<h3 id="chart-templates-item-4">4. 柱状图 Bar Chart 配置方法</h3>

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

<ul>

<li>Chart Name：柱状图标题，建议写清楚对比对象，例如设备、产线、班组或区域。</li>

<li>Name：柱子的分类名称或系列名称，会影响横轴标签、图例和 Tooltip。</li>

<li>Tag：柱子数值来源；同一张图中的 Tag 应保持可比较的单位与统计范围。</li>

<li>Color：柱子颜色；同类对象可使用同一色系，告警或重点对象可用强调色。</li>

<li>Unit：数值单位；多个柱子单位不一致时，不建议放在同一张柱状图中比较。</li>

<li>Precision：显示精度；产量、次数等整数类指标通常设为 0，温度、压力等模拟量按项目要求设置。</li>

<li>Advanced JSON：需要批量配置或改为直接 JSON 时再启用，普通场景优先使用表格配置。</li>

</ul>

</article>

<h3 id="chart-templates-item-5">5. 仪表盘 Gauge 配置方法</h3>

<p>Gauge 绑定单个 Tag，配置量程、精度和颜色，适用于温度、压力、液位、转速或百分比等关键值。</p>

<ul>

<li>Chart Name：仪表盘标题；运行页中可用于标明指标名称。</li>

<li>Tag：仪表盘读取的单个数值点位，数据类型应为数值。</li>

<li>Min、Max：仪表盘量程上下限，应按工艺允许范围或现场展示范围填写，不能只按当前值临时估算。</li>

<li>Unit：单位文本，例如 ℃、MPa、%、rpm；单位应和现场点位定义一致。</li>

<li>Precision：读数小数位数，常见配置为 0、1 或 2。</li>

<li>Color：仪表盘主色，点击 Color 按钮可选择颜色；需要表达异常时应与项目色彩规则保持一致。</li>

<li>Appearance：Title 控制标题，Legend 和 Grid 对仪表盘通常不作为主要展示项。</li>

</ul>

</article>

<h3 id="chart-templates-item-6">6. JSON Chart 标准字段配置方法</h3>

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

<ul>

<li>JSON Tag：存储 JSON 数据的 Tag 名称，例如 PLC_LINE01.REPORT01.CHART_DATA。动态名称可填 =selectedJsonTag；表达式返回名称，不直接返回 JSON 对象或数组。</li>

<li>Time Field (X)：横轴时间字段，常用 ts；时间值建议使用稳定格式，例如 2026-07-06T10:48:54+08:00。</li>

<li>Series Name Field：系列名称字段，常用 series；多条线或多组数据用它区分。</li>

<li>Value Field (Y)：纵轴数值字段，常用 value；字段值必须能转换为数值。</li>

<li>Appearance：Title、Legend、Grid 控制标题、图例和网格线，建议调试阶段先全部打开，交付前再按画面需要取舍。</li>

<li>JSON 数据结构调整后，必须同步修改字段映射，否则运行端会出现空图、坐标轴缺失或 Tooltip 无数据。</li>

</ul>

<span class="line"><span> "series": "Line01 Flow",</span></span>

<span class="line"><span> "value": 18,</span></span>

<span class="line"><span> "color": "#2563EB"</span></span>

<span class="line"><span> "series": "Line01 Flow",</span></span>

<span class="line"><span> "value": 44,</span></span>

<span class="line"><span> "color": "#2563EB"</span></span>

<span class="line"><span>JSON Tag: PLC_LINE01.REPORT01.CHART_DATA</span></span>

<span class="line"><span>Time Field (X): ts</span></span>

<span class="line"><span>Series Name Field: series</span></span>

<span class="line"><span>Value Field (Y): value</span></span></code></pre></div>

</article>

<h3 id="chart-templates-item-7">7. Advanced JSON 直接编辑</h3>

<p>Edit JSON directly 显示 Data Source JSON、Field Mapping JSON 和 Appearance JSON。用于批量维护、复制配置或扩展参数；普通配置使用标准字段。</p>

<ul>

<li>Data Source JSON：定义数据来源、刷新周期、Tag 列表或 JSON Tag，例如 kind、refreshMs、tags、tagName、shape。</li>

<li>Field Mapping JSON：定义字段映射，例如 time、category、series、value，对应运行数据里的真实字段名。</li>

<li>Appearance JSON：定义显示开关，例如 titleVisible、legendVisible、gridVisible。</li>

<li>直接编辑时必须保持合法 JSON，属性名和字符串都要使用英文双引号，不能使用中文引号。</li>

<li>保存前建议先复制当前 JSON 作为回退版本；保存后到 Mingcedar 中检查是否能正常渲染。</li>

</ul>

<span class="line"><span> "version": 1,</span></span>

<span class="line"><span> "kind": "variable-json",</span></span>

<span class="line"><span> "refreshMs": 1000,</span></span>

<span class="line"><span> "tagName": "PLC_LINE01.REPORT01.CHART_DATA",</span></span>

<span class="line"><span> "shape": "rows"</span></span>

<span class="line"><span> "category": "category",</span></span>

<span class="line"><span> "series": "series",</span></span>

<span class="line"><span> "value": "value"</span></span>

<span class="line"><span> "titleVisible": true,</span></span>

<span class="line"><span> "legendVisible": true,</span></span>

<span class="line"><span> "gridVisible": true</span></span>

</article>

<h3 id="chart-templates-item-8">8. 导出前检查清单</h3>

<p>导出并在 Mingcedar 中验证数据源、字段和权限；PPT 保存成功不代表运行可用。</p>

<ul>

<li>图表不为空：确认 Tag 或 JSON Tag 在运行端能读取到数据，且数据类型正确。</li>

<li>字段能匹配：JSON Chart 的 Time Field、Series Name Field、Value Field 与实际 JSON 字段完全一致。</li>

<li>数值显示正确：单位、精度、量程、颜色与项目约定一致。</li>

<li>布局不遮挡：标题、图例、坐标轴、Tooltip 和周围按钮、文本没有重叠。</li>

<li>刷新符合预期：实时曲线、柱状图和 JSON 图表按项目要求刷新；异常值或断点显示方式可接受。</li>

<li>交付可追溯：记录图表使用的 Tag、JSON Tag、字段映射和高级 JSON，便于现场维护。</li>

</ul>

</article>

<h3 id="chart-templates-item-9">实时折线图：刷新周期、可见窗口与点数上限</h3>

<p>在 Line Chart 的标准编辑器中同时配置 Refresh (ms)、Window (ms)、Max points。默认分别为 1000 ms、600000 ms（10 分钟）、3600 点；这三个字段共同控制运行时采样与显示保留范围，不等同于服务器历史归档查询。</p>

<ul>

<li>Refresh (ms) 与 Window (ms) 都须为至少 250 的整数；Max points 为 1–10000 的整数。</li>

<li>示例：每秒更新、保留最近10分钟可填 1000 / 600000 / 600；实际点数仍受窗口、数据可用性与点数限制共同影响。</li>

<li>最多 64 个系列；Gauge 的 Max 必须大于 Min，Precision 须为非负整数。</li>

<li>Advanced JSON 支持 refreshMs、windowMs、maxPoints；标准/高级切换会同步配置，保存时仍执行验证。JSON 配置每段上限 262144 个字符、嵌套深度 32；字段路径使用安全的点分标识符。</li>

</ul>

</article>

</div>

<strong>图示 1: 图表模板入口</strong>

<p>在 Templates 面板的 Chart 分组中选择图表类型，再进入 Template Edit 配置实例参数。</p>

</figcaption>

</figure>

<strong>图示 2: 折线图标准配置</strong>

<p>每一行 Series 对应一条曲线：Name 控制显示名称，Tag 提供数值，Color、Unit、Precision 控制呈现。</p>

</figcaption>

</figure>

<strong>图示 3: 折线图 Advanced JSON</strong>

<p>直接编辑模式将数据来源、字段映射和外观拆成三段 JSON，适合复制配置或维护扩展参数。</p>

</figcaption>

</figure>

<strong>图示 4: 柱状图标准配置</strong>

<p>柱状图按 Tags 表格绑定分类值或当前值，同一张图中的单位与统计范围应保持一致。</p>

</figcaption>

</figure>

<strong>图示 5: 柱状图 Advanced JSON</strong>

<p>高级 JSON 可定义实时 Tag 集合、分类字段、系列字段和数值字段，保存前应确认 JSON 合法。</p>

</figcaption>

</figure>

<strong>图示 6: 仪表盘量程配置</strong>

<p>Gauge 绑定单个 Tag，Min 和 Max 决定量程，Unit、Precision 和 Color 决定读数展示。</p>

</figcaption>

</figure>

<strong>图示 7: JSON 图表字段映射</strong>

<p>JSON Tag 指向结构化数据，Time Field、Series Name Field、Value Field 必须和 JSON 字段名一致。</p>

</figcaption>

</figure>

<strong>图示 8: JSON 图表 Advanced JSON</strong>

<p>高级配置中的 tagName 指向存储 JSON 的 Tag；动态名称表达式返回 Tag 名称，结构化数据由该 Tag 提供。</p>

</figcaption>

</figure>

<strong>图示 9: 运行端图表效果</strong>

<p>导出后在 Mingcedar 中检查折线、柱状、JSON 曲线和仪表盘是否按配置渲染。</p>

</figcaption>

</figure>

</div>