折线图组件支持展示多条数据变动趋势(多条折/曲线),方便您对数据的变动进行比较。该组件可绑定静态数据、接口数据源或数据表资源使用。本文介绍折线图组件的配置和使用方法。

前提条件

参考以下操作完成Web应用创建。
  1. 项目管理
  2. 创建Web应用

操作步骤

本文主要介绍组件样式的个性配置。有关组件样式的通用配置,请参见样式配置

  1. 在Web可视化编辑页面,单击最左侧的组件图标组件
  2. 在画布左侧组件下拉列表,选择基础组件,并展开图表列表。
  3. 拖拽一个折线图组件到画布中,单击右侧样式中的配置
    新折线图
    在打开的组件数据配置页面,自动展开了数据源配置面板。
  4. 选择数据源类型,完成配置后,单击确定
    有关数据源的配置说明,请参见本文下方的数据源数据源配置
  5. 可选: 单击左上角数据表,查看已配置数据源的所有数据信息。
  6. 数据展示配置页面,根据配置项说明(见下表)设置折线图数据和样式。
    样式配置
    配置项 说明
    数据源 显示已配置的数据源名称。
    说明 当组件数据源类型为接口数据源和静态数据源时,组件中数据不支持筛选、排序、聚合等功能。
    维度 显示根据数据源的数据类型自动解析到维度或度量模块中的字段。

    支持的数据类型:

    • 维度:布尔型、字符型、时间型字段。
    • 度量:数值型字段。

    支持操作:

    • 拖拽维度下的一个字段到横轴框中,作为折线图的X轴数据源。
    • 拖拽度量下的多个字段到纵轴框中,作为折线图的Y轴数据源。
    • 修改字段的显示名称。
    • 添加字段到筛选器,作为筛选项对该字段数据进行过滤展示。最多支持添加10个筛选器。
      说明 只有当组件数据源类型为数据表资源时,才支持该功能。 详细配置指导请参见筛选器配置
    度量
    横轴 显示添加的维度字段。
    • 仅支持添加一个维度字段。
    • 支持编辑字段的显示名称。
    纵轴 显示添加的度量字段。
    • 支持添加多个度量字段。
    • 支持编辑字段的显示名称。
    • 支持汇总方式:总和(默认值)、平均值、最大值、最小值、总数。

      纵轴中的度量字段前会显示设置的汇总方式。

      设置度量字段汇总方式后,支持再次配置过滤筛选条件,展示特定数据。

    属性:颜色 展示在纵轴中已经添加的度量字段。默认为每个度量字段的折线图自动分配一个颜色,支持修改。
    说明 不支持在颜色属性中新增或者删除度量字段。
    全局样式 设置全局样式效果:字体、是否显示数据点、是否使用平滑曲线。
    标题 设置是否显示标题或图例标志。默认显示,支持配置标题内容、字号、颜色、粗细和位置。
    图例
    X轴 设置是否显示X/Y轴刻度值,默认显示,均支持配置字号、颜色、粗细。
    • X轴:支持配置轴颜色、时间格式、刻度间隔、是否末位显示。
    • Y轴:支持配置最大、最小值和刻度数量。
      说明 Y轴刻度数量从最小值所在刻度算起,例如最小值为0,最大值为500,间隔为50,刻度数量为11。
    Y轴
    标签 设置是否显示Y轴数据点的具体数值 。默认不显示。

    设置显示标签后,可支持配置标签内容、字号、颜色和位置。

    横向网格线 设置折线图背景是否显示网格线 。 默认显示,支持配置网络线粗细、颜色和线样式。
    背景 设置折线图是否显示背景颜色。默认显示,支持配置背景色。
    边框 设置折线图是否显示边框。默认显示,支持设置粗细颜色样式
  7. 可选: 在Web可视化编辑页面,选中目标组件的交互页签,配置事件和交互动作。详细配置指导请参见交互配置
  8. 单击页面右上方的预览,查看或调试组件的展示数据。

数据源

  • 静态数据

    自定义的静态数据需要符合以下格式:

    说明
    • 自定义的静态数据中至少有一个维度和度量字段的数据类型,以保证数据可以设置为二维数据格式,即横(X)轴和纵(Y)轴必须都有可添加的字段(值)。
    • 每行的数据个数必须相同。如果没有数据,需使用双引号占位。
    {
      "data": [
        {
          "month": "Jan",
          "sales": 300,
          "cost": 150
        },
        {
          "month": "Feb",
          "sales": 300,
          "cost": 150
        },
        {
          "month": "Mar",
          "sales": 300,
          "cost": 150
        }
      ]
    }
  • 接口

    支持的接口来源为数据分析服务自定义接口服务开发工作台

  • 数据表资源

    支持的数据表类型为平台系统表设备数据表设备快照表设备事件表