图表

在线编辑

Draft comment:
This topic only applies to BAW, and is located in the BAW repository. Last updated on 2025-01-20 10:38

使用图表可创建用于显示数据集的饼图、条形图、柱形图和折线图。

数据点是一个“名称/值”对，表示一个业务数据单元或图形上的一个点。例如，在 <"2010", 5657> 对中，"2010" 是数据点的名称，5657 是值。在图形上，一个数据点表示为饼图中的一个扇区，条形图中的一个条形，或者折线图和区域图中的一个点。 ChartDataPoint 是图表控件使用的等效业务数据对象。 ChartDataPoint 对象具有一个字符串名称和小数值参数，用于包含单个业务数据单元。

数据序列是多个数据点的列表。在条形图上，序列中的每个数据点都是一个条形且具有相同的颜色。在折线图上，序列中的每个数据点都是一个点，这些点用折线连接起来。每个数据序列均有一个标签，以便可将其添加到图注中。 ChartDataSeries 是图表控件使用的等效业务数据对象。 ChartDataSeries 对象表示数据序列，它具有字符串标签（适用时显示在图注中）且包含数据列表。

图由必须以相同方式显示的多个数据序列组成。如果单个条形图有四个数据序列，那么这四个数据序列将显示为四组条形。饼图一次只能显示一个数据序列。 ChartDataPlot 是图表控件使用的等效业务数据对象。 ChartDataPlot 对象只有一个参数 - series（ChartDataSeries 的列表）- 表示一个图。

一个图表由一个或多个图组成。大多数图表具有单个图。例如，饼图是只有一个图（即饼图）的图表。但是，一个图表也可具有多个图，如在垂直条形图之上显示的折线图。 ChartData 是图表控件使用的等效业务数据对象。 ChartData 对象绑定到图表控件，并且有一个参数 - plots（ChartDataPlot 的列表）。

提示: 当图表上显示多个数据序列时，堆积图表数据很有用，因为这样可以更轻松地查看聚集总计。例如，堆积数据可将数组条形转化为单独的列，或将面积图中的区域放置在彼此之上。可通过图表控件配置选项启用堆积。

表 1. 图表业务对象绑定
绑定	描述
`data (ChartData)`	包含多个显示在图表中的 ChartDataPlot 对象（重叠）

表 2. 图表配置属性
实例配置标签	描述	定义配置选项	缺省值
Title	标题显示在图表上方。	`title (String)`	（空）
宽度	图表的宽度（以像素为单位）。	`width (Decimal)`	（空）
高度	图表的高度（以像素为单位）。图表标题的高度不计入此值。	`height (Decimal)`	（空）
主题	应用于图表的样式。	`theme (ChartThemeSelection)`	`Default`
定制主题	在主题设置为定制时应用于图表的定制样式。	`customTheme (String)`	（空）
图例	图注在图表中的显示位置	`legendPosition (ChartLegendPositionSelection)`	`None`
堆积条形图	以堆积方式而不是并排方式显示条形和柱形	`stackBarAndColumnCharts (Boolean)`	`False` (未选择)
堆积折线图	以堆积方式而不是重叠方式显示折线图	`stackLineCharts (Boolean)`	`False` (未选择)
堆积面积图	以堆积方式而不是重叠方式显示面积图	`stackAreaCharts (Boolean)`	`False` (未选择)
强制分类数据	在折线图和面积图中，将数字值显示为均匀分布在 X 轴或 Y 轴的类别标签。例如，如果数字数据 [1979, 5; 1980, 15] 表示特定年份销售的窗口小部件数，那么为便于显示，您可以启用此选项以使每年在轴上均匀分布。	`forceCategoricalData (Boolean)`	`False` (未选择)
显示选项	显示的图的类型和配置。	`displayOptions (ChartDisplayOptions)`	（空列表）
本地化服务	用于检索用于此 Coach 视图的本地化字符串的服务。	`localizationService (dashboards Localized Messages)`	`Dashboards Localized Messages Loader`
单击时	用户在图表中单击的段。	`lastClickedSegment (ChartClickEvent)`	（空列表）
图表刷新	刷新图表。通常，先更新此图表所绑定到的变量，然后再刷新图表以显示更新后的数据。刷新图表后，此选项重置为已取消选择。	`triggerChartReset (Boolean)`	`False` (未选择)

此视图不使用可视性属性。

提示：对于添加到 ChartDataPlot 对象的每一个 ChartDataPlot ，都必须在 Display options 配置选项中添加相应的行，以便正确显示给定的 ChartDataPlots 。

如果在单个图表上呈现多个图，那么必须针对每个图启用显示水平轴和显示垂直轴选项。要防止重叠，请启用水平翻转和垂直翻转选项。

以下样本代码表示用于构建 ChartData 对象的 JSON 对象：

  tw.local.myChartData = { //the ChartData object
       plots: [
           { //a ChartDataPlot object
               series: [
                   { //a ChartDataSeries object
                       label: "Size (oz)",
                       data: [
                           { name: "Small", value: 6 }, //a ChartDataPoint object
                           { name: "Medium", value: 8 }, //another ChartDataPoint object
                           { name: "Large", value: 12 } //another ChartDataPoint object
                   ]
                   },
                   { //another ChartDataSeries object
                       label: "Sugar (g)",
                       data: [
                           { name: "Small", value: 12 }, //a ChartDataPoint object
                           { name: "Medium", value: 16 }, //another ChartDataPoint object
                           { name: "Large", value: 24 } //another ChartDataPoint object
                       ]
                   }
               ]
           },
           { //another ChartDataPlot object
               series: [
                   { //a ChartDataSeries object
                       label: "Satisfaction",
                       data: [
                           { name: "Small", value: 65 }, //a ChartDataPoint object
                           { name: "Medium", value: 80 }, //another ChartDataPoint object
                           { name: "Large", value: 82 } //another ChartDataPoint object
                       ]
                   }
               ]
           }
       ]
   };

样本代码中的前两个数据序列能够以不同于第三个数据序列的方式显示，这是因为它们位于不同的 ChartDataPlot 对象中。