柱状图_图表组件_组件_Web可视化开发

概述

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

支持绑定静态数据、接口数据源或数据表资源。
相同的X轴和Y轴，支持同时展示多条柱状图。

样式配置

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

数据表：已配置数据源后，用于预览数据表，该数据表展示维度和度量下所有字段的数据。
数据展示：用于数据源配置和柱状图数据及展示效果配置。


功能类型	说明
数据源	完成柱状图数据源配置后，此处显示柱状图的数据源类型。说明未配置组件数据源时，此处显示数据源配置，单击此按钮可开始组件数据源配置。详细内容请参见数据源。当组件数据源类型为接口数据源和静态数据源时，组件中数据不支持筛选、排序、聚合等功能。
维度	柱状图组件数据源配置完成后，会根据数据类型自动解析相关字段至维度或度量模块中。维度和度量支持的数据类型：维度：字符型、时间型字段。度量：数值型字段。支持操作如下：拖拽维度下的一个字段到横轴框中，作为柱状图的X轴数据源。拖拽度量下的多个字段到纵轴框中，作为柱状图的Y轴数据源。修改字段的显示名称。添加字段到筛选器，作为筛选项对该字段数据进行过滤展示。最多支持添加10个筛选器。
度量
横轴	显示添加的维度字段。仅支持添加一个维度字段。支持编辑字段的显示名称。
纵轴	显示添加的度量字段。支持添加多个度量字段。支持编辑字段的显示名称。支持如下汇总类型：求和、平均、中位数、最大值、最小值。
属性：筛选器	只有当组件数据源类型为数据表资源时，才支持该功能。筛选器作用：支持通过筛选器对数据进行过滤，展示特定数据。支持将筛选项在前端显示为查询项，方便在运行态随时对数据进行搜索或过滤。使用方法：在维度或度量栏下，单击字段的三角入口，选择筛选器。设置字段的过滤筛选条件，并单击确认。表格默认展示该字段的全部数据，支持字符型、数值型、时间型的筛选条件设置。下文以字符型筛选设置为例：单击字段筛选下的输入框，输入关键字搜索并选择筛选值，支持多选。如果您还需要在运行态时，随时对字段进行过滤查询，可勾选展示为查询项，组件上方会出现该字段的查询框。右侧属性栏显示已配置筛选字段名称。说明将字段设置为筛选器时，如果没有设置任何过滤，且未勾选展示为查询项，该字段不会显示在右侧的筛选器中。
属性：颜色	颜色：展示在纵轴中已经添加的度量字段。默认为每个度量字段的柱状图自动分配一个颜色，可修改字段的柱状图颜色。说明不支持在颜色属性中新增或者删除度量字段。
样式：图表类型	设置柱状图的类型。以X轴为参考方向，分为柱状图和堆叠柱状图。柱状图：以并行显示数据柱的方式展示数据，即柱状图中，各系列的数据并行显示。堆叠柱状图：以堆叠数据柱的方式展示数据，即堆叠柱状图中，各系列的数据不是并行显示，而是依次堆叠。
样式：全局样式	设置字体类型。可选：微软雅黑、苹方、宋体、黑体。
样式：标题	勾选后，显示柱状图标题、图例标志。可设置显示效果。标题内容：设置标题的内容字号：设置字号值颜色：设置字体颜色粗细：可选加粗（默认值）、标准位置：设置标题和图例位置标题：可选居左（默认值）、居中、居右图例：可选上/下（左、中、右）、左/右（上、中、下），默认值为上中
样式：图例
样式：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）数据，如下图所示：

在Web可视化编辑界面的组件栏，拖拽一个柱状图组件到画布中，并单击右侧样式栏的配置。

在数据源配置中，选择静态数据，自定义静态数据，并单击确定。

{
  "data": [
    {
      "month": "Jan",
      "sales": 300,
      "cost": 150
    },
    {
      "month": "Feb",
      "sales": 100,
      "cost": 50
    },
    {
      "month": "Mar",
      "sales": 200,
      "cost": 100
    }
  ]
}

在数据展示页面，分别拖拽自动解析的维度和度量字段到横轴和纵轴栏中，进行如图所示配置。

说明更多样式配置请参见样式配置。