瀑布图小组件 (可应用主题)
简介
瀑布图小组件可在混搭中显示响应式瀑布图。该小组件可用于将累积更改以可视化方式呈现为对初始值的增减。
当图表中存在单个数据系列时，每次增减均以颜色标注正或负的变动。
将瀑布图小组件拖至工作区后，其显示如下：
 | • 瀑布图小组件可用于 ThingWorx 9.2.0 及更高版本。 • “瀑布图”小组件可在平台中用作标准小组件，也可用作 web 组件 (可从 SDK 导入)。 • 瀑布图仅支持单个数据源。如果要使用来自多个数据源的数据，那么可将数据合并至单个信息表中并将其应用于图表。 |
数据格式
必须创建一个其中包含表示图表数据结构的字段定义的信息表。信息表必须包含用于设置 X 和 Y 轴值的字段定义。每个信息表行表示 X 轴上的类别及其相应 Y 轴值。下表列出了示例信息表的数据格式：
X 轴 | Y 轴值 | Y 轴值 N | Y Axis | Y Axis | |||||
|---|---|---|---|---|---|---|---|---|---|
字段定义 | x:{name:'x',baseType:'STRING'} | Value1:{name:'Value1',baseType:'NUMBER'} | Value1:{name:'Value2',baseType:'NUMBER'} | {Selectable: True, baseType: 'BOOLEAN"} | {ShowTotal: False, baseType: 'BOOLEAN'} | ||||
作用 | 用于定义图表条形或列的 X 轴值。数据必须使用 STRING 基本类型。每一行在 X 轴上显示为一个类别。为此列定义的名称是应该为 XAaxisField 小组件属性选择的选项。 | 用于定义 Y 轴值和类别的图例标签。 | 用于定义 Y 轴值和每个附加数据系列的图例标签。 |
瀑布图支持不可选条形。这意味着可将鼠标悬停并聚焦在图表中的条形上，但无法对其进行选择。 必须在信息表数据源中创建附加列 Selectable。默认情况下，各个值或条形均处于可交互状态且设置为 True。可通过将值设置为 False 来使条形处于不可选状态。该字段不区分大小写。属性列表中的 NonSelectableData 属性可控制用户是否可通过单击来选择图表上的数据。有关详细信息，请参阅属性表。 |
定义是否将图表中完整条形上值的增减显示为堆积或重叠条形。默认情况下，该值设置为 False。可通过将该值设置为 True 来显示堆积或重叠条形。 必须在信息表数据源中创建附加列 ShowTotal。该字段不区分大小写。属性列表中的 ShowTotal 属性可控制条形是以堆积还是重叠方式显示。有关详细信息，请参阅属性表。 | ||||
基本类型 | STRING | NUMBER | NUMBER | BOOLEAN | BOOLEAN | ||||
行示例 | Game:'Cash In' - 其中 Cash In 是将显示在 X 轴上的类别名称 | Player1:100 - 类别的 Y 轴值 | Player2: 100 - 第二个数据系列的 Y 轴值 | 例如，请参阅下面的多个系列数据图像。 | 例如，请参阅下面的单个系列数据图像。 |
| | • 第一个和最后一个 x 轴值相加得出相应的 y 轴值，并在图表中显示为汇总值。 • 如果 y 轴值在信息表中为空，则会将当前值显示为图表中的常规完整条形。如果 y 值为 "0"，则会在图表中显示一个空白条形。 |
• 单个系列数据：
下图显示了带有 y 轴字段定义的信息表返回单个数据系列的示例：
下图显示的瀑布图小组件包含了在混搭中加载的单个系列示例数据。通过 UseTrendColors 属性设置的趋势颜色会突出显示值的增减情况。在图片中的完整条形上，四月的条形为堆积条形，五月的条形为重叠条形。
• 多个系列数据：
下图显示了带有 y 轴字段定义的信息表返回多个数据系列的示例：
下图显示的瀑布图小组件包含了在混搭中加载的示例数据。
绑定数据源
要将图表绑定到数据源，请执行以下步骤：
1. 在“数据”面板上添加数据服务，使其能够为小组件返回适当数据格式的信息表。
| | 确保服务在运行时由某个事件触发。 |
2. 将数据服务的 All Data 属性绑定到图表的 Data 属性。
3. 选择图表，然后在“属性”面板上，使用 XAxisField 属性选择要用于 X 轴的信息表列。
默认情况下，信息表中的所有列都会自动显示在 Y 轴图表上。要手动选择数据系列：
a. 将 NumberOfSeries 属性设置为一个固定数值。
b. 使用 DataField1..N 属性选择每个数据系列的信息表列。
4. 单击“保存”，然后单击“查看混搭”。
现在，数据显示在图表中。绑定的信息表中的每个附加列都显示为一个数据系列。绑定数据源后，请考虑使用 Label、XAxisLabel 和 YAxisLabel 属性添加标签。
也可以使用其他属性配置小组件。例如：
• 要显示标尺线，请启用 ShowXAxisRuler 和 ShowYAxisRuler 属性。
• 要为值的增减显示趋势颜色，请启用 UseTrendColors 属性。
• 要启用沿竖直或水平轴缩放，请启用 HorizonalZoom 和 VerticalZoom 属性。
有关可用配置选项的详细信息，请参阅下面的属性表格。
 | 要在运行时自动更新图表数据，请创建一个“自动刷新”功能，并将其绑定到返回图表数据的数据服务。有关详细信息，请参阅自动刷新。 |
添加次轴
可使用 ShowSecondYAxis 属性在图表中添加次 Y 轴。下图显示了一个带有次 Y 轴的瀑布图。
下表列出了可用于启用和配置次 Y 轴的属性：
属性名称 | 说明 | 基本类型 | 默认值 | 是否可绑定? (Y/N) | 是否可本地化? (Y/N) |
|---|---|---|---|---|---|
ShowSecondYAxis | 将次 Y 轴添加到图表。 选择此属性时，SecondYAxisFormat、SecondYAxisLabel 和 SecondYAxisLabelAlignment 属性将显示在列表中。 | BOOLEAN | False | Y | N |
SecondYAxisLabel | 指定次 Y 轴的文本标签。 | STRING | 次 Y 轴 | Y | Y |
SecondYAxisLabelAlignment | 对齐次 Y 轴的标签。可将标签放置在“上”、“中”或“下”位置。默认情况下，标签放置在中间。 | STRING | 居中 | N | N |
SecondYAxisFormat | 设置次 Y 轴值的格式。可使用此属性确定数据的显示样式。例如，可以设置小数点后显示的数字位数。 | STRING | 0000.0 | Y | N |
属性表
下表列出了 ThingWorx 9.4 及更高版本中可用的属性：
属性名称 | 说明 | 基本类型 | 默认值 | 可绑定 | 可本地化 |
|---|---|---|---|---|---|
SampleSize | 用于指定：图表中显示的数据点的数量。 | NUMBER | 不适用 | N | N |
ShowZoomButtons | 启用水平或垂直缩放后，在图表工具栏上显示放大和缩小按钮。 | BOOLEAN | False | N | N |
EmptyChartIcon | 用于指定：图表为空白时显示的图标。 | 媒体实体 | not visible | N | N |
EmptyChartLabel | 用于指定：图表为空白时显示的文本。 | STRING | [[ChartStateLabelEmpty]] | N | Y |
ErrorStateIcon | 用于指定：图表为空白时显示的图标。 | 媒体实体 | error | N | N |
ErrorStateLabel | 用于指定：图表为空白时显示的文本。 | STRING | N | Y | |
LoadingIcon | 用于指定：加载图表数据时显示的图标。 | 媒体实体 | chart loading icon | N | N |
NoDataSourceIcon | 用于指定：图表未绑定到数据源时显示的图标。 | 媒体实体 | bind | N | N |
NoDataSourceLabel | 用于指定：图表未绑定到数据源时显示的文本。 | STRING | [[ChartStateLabelNoData]] | N | Y |
下面列出了“瀑布图”小组件的属性。
属性名称 | 说明 | 基本类型 | 默认值 | 是否可绑定? (Y/N) | 是否可本地化? (Y/N) | ||
|---|---|---|---|---|---|---|---|
CustomClass | 用户定义的 CSS 类，应用于小组件顶层 div。 可以输入多个类，以空格作为分隔符。 | STRING | 不适用 | Y | N | ||
Data | 图表的信息表数据源。 | INFOTABLE | 不适用 | Y | N | ||
DataField1 - DataField24 | 将 NumberOfSeries 设置为固定数值时，将列出这些属性。可使用这些属性选择要用于每个数据系列的信息表列。 | 信息表列 | 不适用 | N | N | ||
DataLabel1 - DataLabel24 | 将 NumberOfSeries 设置为固定数值时，将列出这些属性。该属性可用于设置显示在各个数据系列图例区域中的标签文本。 | STRING | 不适用 | Y | N | ||
DataSeriesStyle | 打开状态格式配置对话框。将 NumberOfSeries 设置为“自动”时，将显示此属性。状态定义会应用至图表中的所有系列。可基于数据值设置系列样式以便更加轻松地发现趋势和模式。 | 状态定义 | 不适用 | N | N | ||
DataSeriesStyle1 - DataSereisStyle24 | 这些属性将根据针对 NumberOfSeries 属性设置的数值列出。可使用这些属性将单独的状态定义应用至图表中的每个数据系列。 | 状态定义 | 不适用 | N | N | ||
Disabled | 禁用混搭中的小组件。 小组件会在混搭中显示，但无法单击小组件或将其选中。 | BOOLEAN | False | Y | N | ||
DirectSelectionZoom | 可通过选择图表中的两个数据项进行放大。 此属性可用的选项包括“水平轴”、“垂直轴”、“两者”和“无”。 此属性将在您选择 HorizontalZoom 时显示在属性列表中。 | STRING | 无 | Y | N | ||
DragSelectionZoom | 可通过在要查看的数据范围周围绘制一个选择框来放大图表的特定部分。 此属性可用的选项包括“水平轴”、“垂直轴”、“两者”和“无”。 此属性将在您选择 HorizontalZoom 时显示在属性列表中。 | STRING | 无 | Y | N | ||
ExternalPadding | 设置与轴之间的填充。 填充值是条宽度的百分比。 | NUMBER | 25 | Y | N | ||
HideConnectorLines | 隐藏连接线，连接线用于突出显示数据序列中各个值之间的变动。 | BOOLEAN | False | Y | N | ||
HideLegend | 隐藏图例区域。 选择此属性时，LegendAlignment、LegendFilter、LegendMarkerShapes、LegendMaxWidth 和 LegendPosition 属性不会显示在属性列表中。 | BOOLEAN | False | Y | N | ||
HideNotes | 隐藏注解区域。 选择此属性时，Notes、NotesAlignment 和 NotesPosition 属性不会显示在属性列表中。 | BOOLEAN | False | Y | N | ||
HideXAxis | 隐藏 X 轴。 | BOOLEAN | False | Y | N | ||
HideYAxis | 隐藏 Y 轴。 | BOOLEAN | False | Y | N | ||
HorizontalAxisLabelsRotation | 设置标签在水平轴上的旋转角度。可输入 -180 到 180 之间的任意值。 | NUMBER | 自动大小 | N | N | ||
HorizontalAxisMaxHeight | 设置水平轴的最大高度。 | NUMBER | 85 | Y | N | ||
HorizontalZoom | 用于放大水平轴。 选择此属性时，HorizontalRangeZoom、HorizontalSliderZoom、DirectSelectionZoom 和 DragSelectionZoom 属性将出现在属性列表中。 | BOOLEAN | False | Y | N | ||
HorizontalRangeZoom | 添加用于在水平轴上指定值范围内进行放大的控件。 选择此属性时，下列 HorizontalStartZoomLabel 和 HorizontalEndZoomLabel 属性将显示在属性列表中。 | BOOLEAN | False | Y | N | ||
HorizontalStartZoomLabel | 用于指定范围选择的起始位置的文本标签。 | STRING | 不适用 | Y | Y | ||
HorizontalEndZoomLabel | 用于指定范围选择的结束位置的文本标签。 | STRING | 不适用 | Y | Y | ||
HorizontalSliderZoom | 添加用于显示水平轴上最小值和最大值之间数据的控制滑块。 选择此属性时，HorizontalSliderZoomMaxLabel 和 HorizontalSliderZoomMinLabel 属性将显示在属性列表中。 | BOOLEAN | False | Y | N | ||
HorizontalSliderZoomMaxLabel | 用于指定滑块缩放控件最大值的标签。 | STRING | 不适用 | Y | Y | ||
HorizontalSliderZoomMinLabel | 用于指定滑块缩放控件最小值的标签。 | STRING | 不适用 | Y | Y | ||
InternalPadding | 设置数据系列之间的填充。 填充是条宽度的百分比。 | NUMBER | 25 | Y | N | ||
Label | 显示瀑布图的标签文本。 | STRING | 瀑布图 | Y | Y | ||
LabelType | 将瀑布图的标签类型选为“大页眉”、“页眉”、“子页眉”、“大标题”、“标题”、“标签”、“正文”或“标题”。 | STRING | 子标题 | Y | N | ||
LabelAlignment | 按“左”、“居中”或“右”对齐“瀑布图”小组件的标签。 | STRING | 左 | N | N | ||
LabelPosition | 将标签的位置设置为“上”或“下”。 | STRING | 上 | N | N | ||
LabelReset | 设置显示在缩放控件重置按钮中的标签。 | STRING | 重置 | Y | Y | ||
LegendAlignment | 按“上”、“中”或“下”对齐图例文本。 此属性的可用选项取决于 LegendPosition 属性的设置。 | STRING | 上 | N | N | ||
LegendFilter | 添加图例筛选器，使用户能够在运行时筛选图表。 | BOOLEAN | False | N | N | ||
LegendMarkerShapes | 将图例的标记形状设置为“方形”、“圆形”或“无”。 | STRING | 方形 | N | N | ||
LegendMaxWidth | 设置图例区域的最大宽度。 | NUMBER | 736 | Y | N | ||
LegendPosition | 将图例的位置设置为“上”、“下”、“左”或“右”。 | STRING | 右 | N | N | ||
NonSelectableData | 使用 selectable 信息表字段中的 True 或 False 值来控制用户是否可通过单击选择图表上的数据。字段中的每个值均适用于同一行上的所有数据系列。 | BOOLEAN | False | N | N | ||
Notes | 指定要在图表注解区域中显示的文本。您可以输入字符串，也可以选择一个本地化标记。 | STRING | 不适用 | Y | Y | ||
NotesAlignment | 将注解文本在注解区域内“左”、“右”或“居中”对齐。 | STRING | 左 | N | N | ||
NotesPosition | 将注解区域的位置设置为“上”或“下”。 | STRING | 底部 | N | N | ||
NumberOfReferenceLines | 设置要在图表上显示的参考线的数量。 参考线可用于突出显示相对于特定值的图表数据。最多可添加 24 条线并配置每条线的标签、轴和值。 例如，如果将 1–24 之间的值设置为此属性，则属性列表中将显示相应的属性 ReferenceLine1Label - ReferenceLine24Label 和 ReferenceLine1Value - ReferenceLine24Value。 | NUMBER | 0 | N | N | ||
NumberOfSeries | 用于设置将显示在图表中的数据系列的数量。 设置为“自动”将显示所有数据系列。 | NUMBER | Auto | N | N | ||
NumberOfYLabels | 设置要在 Y 轴上显示的标签数。
| NUMBER | Auto | N | N | ||
Orientation | 指定图表方向。可沿水平或竖直轴显示累积更改。 | STRING | 垂直 | N | N | ||
ResetToDefaultValue | 将此小组件的输入重置为默认值。 | 不适用 | 不适用 | Y | N | ||
RulersInFront | 在数据值前方显示标尺。默认情况下，标尺显示在数据后方。 | BOOLEAN | False | Y | N | ||
SeriesClicked | 单击数据点时会触发事件。 | 不适用 | 不适用 | Y | N | ||
SelectedData | 包含图表中选定数据的信息表。 | INFOTABLE | 不适用 | Y | N | ||
SelectionMode | 用于控制用户可以同时选择多少数据点。 可用选项包括“单一”、“多个”和“默认”。 选取“多个”将允许用户选择多个数据点。 | STRING | Default | Y | N | ||
ShowHideLegend | 添加了用于在运行时显示或隐藏图表图例的显示/隐藏按钮。
| BOOLEAN | False | N | N | ||
ShowTotal | 在 ShowTotal 信息表字段下使用 True 或 False 值可控制是相对于完整条形还是列显示趋势值。当设置为 True 时，条形或列上的加法以堆积形式显示，减法以重叠形式显示，且会采用不同的颜色。 | BOOLEAN | False | N | N | ||
ShowValues | 显示图表中的值标签。 选择此属性时，ValuesPosition 属性将出现在列表中。 | BOOLEAN | False | Y | N | ||
ShowXAxisRuler | 显示 X 轴标尺。 | BOOLEAN | False | Y | N | ||
ShowYAxisRuler | 显示 Y 轴标尺。 | BOOLEAN | False | Y | N | ||
ShowZeroValueRuler | 显示零值标尺。 | BOOLEAN | False | Y | N | ||
ShowZoomButtons | 启用水平或垂直缩放后，在图表工具栏上显示放大和缩小按钮。
| BOOLEAN | False | N | N | ||
SparkView | 显示图表可视化的简化视图。启用此属性可隐藏标签、图例和标尺。 | BOOLEAN | False | Y | N | ||
TabSequence | 按 TAB 键时显示的瀑布图小组件序号。 | NUMBER | 不适用 | N | N | ||
UseTrendColors | 当图表显示来自一个系列的数据时，以不同颜色突出显示趋势。
| BOOLEAN | False | Y | N | ||
ValuesTooltip | 允许用户在选择数据点时显示自定义工具提示。 可显示标题、文本、数据值并新建行。请使用以下语法：在字符串之前添加 #title# 可将其显示为标题，添加 #newline# 可创建新的行，添加 ${<token_name>} 可显示图表标记中可用的数据，添加 ${Data:<infotable_column>} 或 ${DataSourceN:<infotable_column>} 可显示信息表列中的值。添加 ${total} 标记可显示总计，将标记用 #step# 左右括起可显示步骤总数。例如：#title#Tooltip Title#newline#${label},${total}#newline#${data:Column3}#step#${total} in total#step#。 | STRING | WaterfallChartDefaultTooltip | Y | N | ||
ValuesPosition | 将数据值标签相对于图表条形的位置设置为“条形外部”或“重叠条形”。 | STRING | 条形外部 | N | N | ||
VerticalAxisMaxWidth | 设置垂直轴的最大宽度。 | NUMBER | 85 | Y | N | ||
VerticalZoom | 用于放大垂直轴。 选择此属性时，VerticalSliderZoom 属性将出现在属性列表中。 | BOOLEAN | False | Y | N | ||
VerticalSliderZoom | 添加用于显示垂直轴上最小值和最大值之间数据的控制滑块。 选择此属性时，VerticalZoomMaxLabel 和 VerticalZoomMinLabel 属性将显示在属性列表中。 | BOOLEAN | False | Y | N | ||
VerticalZoomMaxLabel | 用于指定滑块缩放控件最大值的文本标签。 | STRING | 不适用 | Y | Y | ||
VerticalZoomMinLabel | 用于指定滑块缩放控件最小值的文本标签。 | STRING | 不适用 | Y | Y | ||
XAxisField | 表示 X 轴数据的信息表字段。 | INFOTABLE | 不适用 | N | N | ||
XAxisLabel | 显示 X 轴的文本标签。 | STRING | X 轴 | Y | Y | ||
XAxisLabelAlignment | 按“左”、“居中”或“右”对齐 X 轴标签。 | STRING | 居中 | N | N | ||
YAxisFormat | 设置 Y 轴值的格式。 | STRING | 0000.0 | Y | N | ||
YAxisLabel | 显示 Y 轴的文本标签。 | STRING | Y 轴 | Y | Y | ||
YAxisLabelAlignment | 按“上”、“中”或“下”对齐 Y 轴标签。 | STRING | 居中 | N | N | ||
YAxisMaximumValues | 设置 Y 轴值的最大范围。 默认情况下，范围会根据小组件数据自动计算。如果图表数据包含更大的值，则此属性的值将会被忽略。 | STRING | 不适用 | Y | N | ||
YAxisMinimumValues | 设置 Y 轴值的最小范围。 默认情况下，范围会根据小组件数据自动计算。如果图表数据包含更小的值，则此属性的值将会被忽略。 | STRING | 不适用 | Y | N |