全部产品

柱状图

柱状图组件以柱状形式展示多条数据变动趋势,方便您分析比较数据的变动情况。本文介绍柱状图组件的详细配置方法。

步骤一:添加组件

  1. 创建移动应用。具体操作,请参见创建移动应用

  2. 在移动应用编辑器中,单击最左侧的组件图标组件

  3. (可选)添加分栏组件,进行应用页面布局设置。具体操作,请参见横向分栏和纵向分栏

  4. 在画布左侧组件列表上方,在搜索框中输入柱状图,找到该组件,然后将组件拖拽到中间画布。

    有关添加组件的更多信息,请参见添加组件

    柱状图

步骤二:配置数据源

  1. 在移动应用编辑器右侧样式中,单击展示数据后的配置数据源

  2. 数据源配置页面,选择数据源类型,完成配置。

    可选数据源类型有接口静态数据应用推送

  3. 单击确定,完成配置。

    数据展示页签左侧数据源显示已配置的数据源名称,维度度量显示从数据源中自动解析的属性字段。

    说明

    数据源属性字段匹配规则:

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

    • 度量:数值型字段。

  4. (可选)单击左上角数据表,查看已配置数据源的所有数据信息。

步骤三:配置数据展示

数据展示页签,设置柱状图展示数据和样式,如图所示。

柱状图数据配置
  1. 根据实际需求,分别拖拽一个维度字段和多个度量字段到横轴纵轴

    说明

    系统默认颜色请在数据展示页面右侧属性页签或样式页签下进行修改。

  2. (可选)在横轴和纵轴框,单击字段三角入口,设置显示名。

  3. 数据展示页签右侧,单击样式,设置组件展示样式。

    配置项

    说明

    全局样式

    设置全局字体。

    图例

    设置是否显示图例标志,及可显示的效果。

    X轴

    设置是否显示X或Y轴刻度值,及可显示的效果。

    说明

    轴刻度数量从最小值所在刻度算起,例如最小值为0,最大值为500,间隔为50,刻度数量为11。

    Y轴

    横向网格线

    设置是否显示组件背景网格线、背景颜色和边框 ,及可显示的效果。

    背景

    边框

  4. 单击完成配置,返回移动应用编辑器,查看已配置的组件数据。

  5. 调整组件在页面中的布局位置。具体操作,请参见通用样式

步骤四:配置交互动作

  1. 在移动应用编辑器右侧交互中,单击新增交互,设置事件动作

    支持单击双击事件。例如,单击组件,执行动作刷新组件,指定刷新某组件展示的内容。

    具体操作,请参见交互配置

  2. 预览和调试组件展示的数据和效果。具体操作,请参见预览与调试