本文介绍了条形图组件的配置和使用方法。

概述

条形图组件是图表类组件中的一种,主要用来做数据可视化,与柱状图相同,常用于展示数据或对数据的变动进行比较。

  • 支持绑定静态数据、接口数据源或数据表资源。
  • 相同的X轴和Y轴,支持同时展示多条的条形图。
条形图组件
说明 条形图与柱状图的区别是,X轴和Y轴数据相反。

样式配置

在组件的配置页面包含数据表数据展示两个页签:

  • 数据表:已配置数据源后,用于预览数据表,该数据表展示维度和度量下所有字段的数据。
  • 数据展示:用于数据源配置和条形图数据及展示效果配置。
功能类型 说明
数据源 完成条形图数据源配置后,此处显示条形图的数据源类型。
说明
  • 未配置组件数据源时,此处显示数据源配置,单击此按钮可开始组件数据源配置。详细内容请参见数据源
  • 当组件数据源类型为接口数据源和静态数据源时,组件中数据不支持筛选、排序、聚合等功能。
维度 条形图组件数据源配置完成后,会根据数据类型自动解析相关字段至维度或度量模块中。

维度和度量支持的数据类型:

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

支持操作如下:

  • 拖拽维度下的一个字段到纵轴框中,作为条形图的Y轴数据源。
  • 拖拽度量下的多个字段到横轴框中,作为条形图的X轴数据源。
  • 修改字段的显示名称。
  • 添加字段到筛选器,作为筛选项对该字段数据进行过滤展示。最多支持添加10个筛选器。
度量
纵轴 显示添加的维度字段。
  • 仅支持添加一个维度字段。
  • 支持编辑字段的显示名称。
横轴 显示添加的度量字段。
  • 支持添加多个度量字段。
  • 支持编辑字段的显示名称。
  • 支持如下汇总类型:求和、平均、中位数、最大值、最小值。
属性:筛选器 只有当条形图数据源类型为数据表资源时,才支持该功能。

筛选器作用:

  • 支持通过筛选器对数据进行过滤,展示特定数据。
  • 支持将筛选项在前端显示为查询项,方便在运行态随时对数据进行搜索或过滤。

使用方法:

  1. 在维度或度量栏下,单击字段的三角入口,选择筛选器选择筛选器
  2. 设置字段的过滤筛选条件,并单击确认

    表格默认展示该字段的全部数据,支持字符型、数值型、时间型的筛选条件设置。下文以字符型筛选设置为例:

    单击字段筛选下的输入框,输入关键字搜索并选择筛选值,支持多选。

    设置筛选器

    如果您还需要在运行态时,随时对字段进行过滤查询,可勾选展示为查询项,组件上方会出现该字段的查询框。

    显示项

    右侧属性栏显示已配置筛选字段名称。

    筛选字段
    说明 将字段设置为筛选器时,如果没有设置任何过滤,且未勾选展示为查询项,该字段不会显示在右侧的筛选器中。
属性:颜色 颜色: 展示在轴横中已经添加的度量字段。默认为每个度量字段的条形图自动分配一个颜色,可修改字段的条形图颜色。
说明 不支持在颜色属性中新增或者删除度量字段。
样式:图表类型 设置图表类型。

以Y轴为参考方向,分为条形图堆叠条形图

  • 条形图:以并行显示数据柱的方式展示数据,即条形图中,各系列的数据并行显示。
  • 堆叠条形图:以堆叠数据柱的方式展示数据,即堆叠条形图中,各系列的数据不是并行显示,而是依次堆叠。
样式:全局样式 设置字体类型。 可选:微软雅黑、苹方、宋体、黑体。
样式:标题 勾选后,显示柱状图标题、图例标志。 可设置显示效果。
  • 标题内容:设置标题的内容
  • 字号:设置字号值
  • 颜色:设置字体颜色
  • 粗细:可选加粗(默认值)、标准
  • 位置:设置标题和图例位置
    • 标题:可选居左(默认值)、居中、居右
    • 图例:可选上/下(左、中、右)、左/右(上、中、下),默认值为上中
样式:图例
样式:X轴 勾选后,显示X、Y轴刻度值。 可设置显示效果。

字号、颜色、粗细:设置方法与标题的一致。

  • 轴颜色:设置X轴颜色
  • 最小值:支持设置Y轴的起始值
  • 最大值:支持设置Y轴的最大值
  • 刻度数量:支持设置Y轴最小值与最大值之间的刻度数量
说明 Y轴刻度数量从最小值所在刻度算起,例如最小值为0,最大值为500,间隔为50,刻度数量为11。
样式:Y轴
样式:标签 标签:勾选后显示Y轴数据点的具体数值 。
  • 标签内容:可选择展示的内容为全部数据或最大值与最小值
  • 字号
  • 颜色
  • 位置:可选居外(默认值)、居内
样式:纵向网格线 勾选后,条形图背景显示网格线 。
  • 粗细
  • 颜色
  • 线样式
样式:背景 设置条形图的背景颜色和边框显示效果。
  • 背景色
  • 边框:勾选后,需设置粗细颜色样式

数据源

  • 静态数据源

    选择静态数据源时,自定义的数据需要符合以下格式:

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

    选择接口数据源时,支持的接口来源为数据分析服务自定义接口服务开发工作台。有关接口数据源的配置详情,请参见接口

  • 数据表资源

    有关数据表资源的配置详情,请参见数据表资源

动作

在Web可视化编辑页面,选中条形组件的交互页签,可进行事件和动作的交互配置。

组件支持交互动作配置的详细内容请参见交互配置

组件支持以下事件:

  • 鼠标移入:鼠标移入条形图矩形范围,触发动作。
  • 鼠标移出:鼠标从条形图矩形范围移出,触发动作。

案例

参考柱状图案例,配置静态数据源,以堆叠条形图形式展示某公司1月至3月某物品的销售单价(cost)和销售量(sales)数据,如下图所示:

堆叠条形图
  1. 在Web可视化编辑界面的组件栏,拖拽一个条形图组件到画布中,并单击右侧样式栏的配置添加条形图组件
  2. 在数据源配置中,选择静态数据,自定义静态数据,并单击确定
    {
      "data": [
        {
          "month": "Jan",
          "sales": 300,
          "cost": 150
        },
        {
          "month": "Feb",
          "sales": 100,
          "cost": 50
        },
        {
          "month": "Mar",
          "sales": 200,
          "cost": 100
        }
      ]
    }
  3. 数据展示页面,分别拖拽自动解析的维度和度量字段到纵轴和横轴栏中,进行如图所示配置。数据展示
    说明 更多样式配置请参见样式配置