ChartPage

低代码页面设计器的图表区块：柱状 / 折线 / 饼（环）三种占位呈现，数据由 PageBlock 配置驱动。

最后更新 2026-10-16 23:12:31

说明

与 TablePage / ListPage 同属可插拔的叶子区块，注册在 PageComponents 表下、键为 "chart"（改类名不影响已发布页面 JSON）。组件按 Block.Settings 的三个键渲染纯 SVG / CSS 占位图，不接真实图表库：type（bar / line / pie，缺省 bar）决定形态，series（逗号分隔数值）为数据，labels（逗号分隔文本）为各段标签、留空回退「一月 ~ 六月」。类型名与标签等可见文本均经 LocalService 本地化（柱状图 / 折线图 / 饼图、数据系列、各月份名等）。Design 为真且无数据时给出「图表区块 · 在右侧属性里设置数据系列」引导并显示坐标刻度区间，运行态无数据显示空态。样式集中在框架 web.css 的 .pg-chart 段。

常见能力：

柱状 / 折线 / 饼（环）三形态，由 Settings 的 type 切换
series（数值）、labels（标签）键值驱动，纯 SVG/CSS 占位无需图表库
类型名与标签等文本全部本地化
设计态无数据给引导 + 坐标刻度，运行态显示空态
经 PageComponents 注册表按键 chart 引用，与已发布页面 JSON 解耦

用法

@* 柱状图：type 可切 bar / line / pie *@
@{ var chart = new PageBlock
{
    Component = "chart",
    Title = "销售概览",
    Settings =
    {
        ["type"] = "bar",
        ["series"] = "42,68,55,80,63,74",
        ["labels"] = "一月,二月,三月,四月,五月,六月",
    },
}; }

<ChartPage Block="chart" Design="false" />

API 参数

参数	类型	默认值	说明
`Block`	`PageBlock`	`PageBlock`	区块数据：类型 Settings["type"]（bar/line/pie）、系列 Settings["series"]（逗号数值）、标签 Settings["labels"]（逗号文本）。
`Design`	`bool`	`false`	是否设计态。

所有组件均继承 BaseComponent，除上表参数外还支持 Class、Style、Disabled、Visible。