4.4 折线图配置示例

本部分将使用折线图作为【仪表盘】图表模块的一个示例讲解，数据源选择的是从表达式计算获取。

4.4.1 创建一个图表卡片

在【仪表盘】模块中，在卡片设置标签页下，点击<创建卡片>的按钮,选择图表类型的卡片进行创建。

4.4.2 定义数据的键值对

折线图所需要的数据结果是一个包含k-v的键值对对象数组，并且数据中的key和value需要与我们卡片配置的数据源的[数据的字段列表]中定义的标识符一致,例如在[数据的字段列表]中定义了以下两个字段:

标识符	名称
key	日期
value	值

4.4.3 在表达式计算中填充数据

根据上述4.4.2我们设计的key和value，所以我们在表达式计算中设置的数据为:

${
    [
        {'key':'Mon','value':150},
        {'key':'Tue','value':230},
        {'key':'Wed','value':224},
        {'key':'Thu','value':218},
        {'key':'Fri','value':135},
        {'key':'Sat','value':147},
        {'key':'Sun','value':260}
    ]
}

4.4.4 图表配置

在数据源配置成功后，我们需要对图表样式和横轴和纵轴进行设置。

1. 在[卡片配置] - [图表]的标签下，点击<创建图表>按钮
2. 在[数据设置]中配置横轴和纵轴，点击保存

4.4.5 查看图表

通过上述配置后，就能得到一个基本的折线图卡片了。