柱状图

操作步骤

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

1. 在Web可视化编辑页面，单击最左侧的组件图标。
2. 在画布左侧组件下拉列表，选择基础组件，并展开图表列表。
3. 拖拽一个柱状图组件到画布中，单击右侧样式中的配置。
   
   在打开的组件数据配置页面，自动展开了数据源配置面板。
4. 选择数据源类型，完成配置后，单击确定。
   有关数据源的配置说明，请参见本文下方的数据源。
5. 可选： 单击左上角数据表，查看已配置数据源的所有数据信息。
6. 在数据展示配置页面，根据配置项说明（见下表）设置柱状图数据和样式。
   

   配置项	说明
   数据源	显示已配置的数据源名称。 说明 当组件数据源类型为接口数据源和静态数据源时，组件中数据不支持筛选、排序、聚合等功能。
   维度	显示根据数据源的数据类型自动解析到维度或度量模块中的字段。 支持的数据类型： 维度：字符型、时间型字段。 度量：数值型字段。 支持操作如下： 拖拽维度下的一个字段到横轴框中，作为柱状图的X轴数据源。 拖拽度量下的多个字段到纵轴框中，作为柱状图的Y轴数据源。 修改字段的显示名称。 添加字段到筛选器，作为筛选项对该字段数据进行过滤展示。最多支持添加10个筛选器。 说明 只有当组件数据源类型为数据表资源时，才支持该功能。 详细配置指导请参见筛选器配置。
   度量
   横轴	显示添加的维度字段。 支持编辑字段的显示名称。
   纵轴	显示添加的度量字段。 支持编辑字段的显示名称。 支持汇总方式：总和（默认值）、平均值、最大值、最小值、总数。 纵轴中的度量字段前会显示设置的汇总方式。 设置度量字段汇总方式后，支持再次配置过滤筛选条件，展示特定数据。
   属性：颜色	展示在纵轴中已经添加的度量字段。默认为每个度量字段的柱状图自动分配一个颜色，支持修改。 说明 不支持在颜色属性中新增或者删除度量字段。
   图表类型	设置柱状图的类型。 以X轴为参考方向，分为柱状图（各系列的数据并行显示）和堆叠柱状图（各系列的数据依次堆叠）。
   全局样式	设置全局字体。
   标题	设置是否显示标题或图例标志。默认显示，支持配置标题内容、字号、颜色、粗细和位置。
   图例
   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
      }
    ]
  }

• 接口

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

• 数据表资源

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