条形图小组件 (可应用主题)
有关如何将小组件添加到混搭以及配置基本小组件属性的信息，请观看以下视频。要在新选项卡中打开视频，请单击播放器上的标题。
简介
“条形图”小组件用于在混搭中示条形图。
条形图旨在比较单位数量，其中 Y 轴表示数量。可对数据系列进行分组和堆积。
 | “条形图”小组件可在平台中用作标准小组件，也可用作 web 组件 (可从 SDK 导入)。 |
数据格式
必须创建一个其中包含表示图表数据结构的字段定义的信息表。信息表必须包含用于设置 X 和 Y 轴值的字段定义。您可以添加多个数据系列，方法是添加用于设置数据系列值的字段定义来添加其他列。每个信息表行表示 X 轴上的类别及其相应 Y 轴值。下表列出了信息表的数据格式：
X 轴 | Y 轴值 | Y 轴值 N | |
|---|---|---|---|
字段定义 | x:{name:'x',baseType:'STRING'} | value1:{name:'value1',baseType:'NUMBER'} | value2:{name:'value2',baseType:'NUMBER'} |
作用 | 用于定义图表条形或列的 X 轴值。数据必须使用 STRING 基本类型。每一行在 X 轴上显示为一个类别。为此列定义的名称是应该为 XAaxisField 小组件属性选择的选项。 | 用于定义 Y 轴值和类别的图例标签。 | 用于定义 Y 轴值和每个附加数据系列的图例标签。 |
基本类型 | STRING | NUMBER | NUMBER |
行示例 | x: 'Apple' - 其中 Apple 是将显示在 X 轴上的类别名称 | value1: 10 - 类别的 Y 轴值 | value2: 30 - 第二个数据系列的 Y 轴值 |
下图显示了 y 轴上具有四个字段定义的信息表所返回数据的示例：
对于间隔缩放控制选项，必须创建包含两个字段的信息表：标签和持续时间。这两个字段中的数据基本类型应为 STRING。下图显示了数据服务返回的数据格式：
可在 duration 字段中使用的值及其表示的范围如下所示：
• Y - 年
• M - 月
• W - 周
• d - 天
• h - 小时
• m - 分钟
• s - 秒
• ms - 毫秒
| | 字符区分大小写。例如，"M" 表示月份，"m" 表示分钟。 |
绑定数据源
要将图表绑定到数据源，请执行以下步骤：
1. 在“数据”面板上添加数据服务，使其能够为小组件返回适当数据格式的信息表。
| | 确保服务在运行时由某个事件触发。 |
2. 将数据服务的 All Data 属性绑定到图表的 Data 属性。
3. 选择图表，然后在“属性”面板上，使用 XAxisField 属性选择要用于 X 轴的信息表列。
默认情况下，信息表中的所有列都会自动显示在 Y 轴图表上。要手动选择数据系列：
a. 将 NumberOfSeries 属性设置为一个固定数值。
b. 使用 DataField1..N 属性选择每个数据系列的信息表列。
4. 单击“保存”，然后单击“查看混搭”。
现在，数据显示在图表中。绑定的信息表中的每个附加列都显示为一个数据系列。绑定数据源后，请考虑使用 Label、XAxisLabel 和 YAxisLabel 属性添加标签。
也可以使用其他属性配置小组件。例如：
• 要显示标尺线，请启用 ShowXAxisRuler 和 ShowYAxisRuler 属性。可使用 YAxisRulerAlignment 属性指定将用作标尺线参考的轴。可将线与主轴或次轴上的标记对齐。默认情况下，这些线与主轴标记对齐。
• 要启用沿竖直或水平轴缩放，请启用 HorizonalZoom 和 VerticalZoom 属性。
有关可用配置选项的详细信息，请参阅下面的属性表格。
 | 要在运行时自动更新图表数据，请创建一个“自动刷新”功能，并将其绑定到返回图表数据的数据服务。有关详细信息，请参阅自动刷新。 |
添加次轴
可使用 SecondYAxis 属性在 X 轴上添加一个次轴，来表示同一类别的两个不同测量。次轴可显示来自一个或多个数据系列的数据。例如，可以在柱形图的次轴上绘制数据系列来显示百分比值。下图显示了一个具有次轴的柱形图。
主轴用于测量定量数据，次轴用于测量百分比值。每个 Y 轴都有一个最大值属性轴。
将 NumberofSeries 设置为固定数值时，系统会为每个数据系列显示 DataFieldN 和 UseSecondAxisSeriesN 属性。默认情况下，所有数据系列都显示在主 Y 轴上。要在次 Y 轴上显示数据系列，请针对要显示在次轴上的所有数据系列启用 UseSecondAxisSeriesN 属性。
要将次 Y 轴添加到图表中，请绑定一个信息表，且该信息表需包含两个或多个具有数据值的列。
1. 选择图表，然后打开“属性”面板。
2. 选择 SecondYAxis 属性旁的复选框。将列出次轴的其他属性。
3. 要手动配置次轴数据，请执行以下步骤：
a. 将 NumberOfSeries 属性设置为一个特定值。
b. 使用 DataField..N 属性选择要用于图表中每个数据系列的信息表列。
| | 默认情况下，所有数据都显示在主轴上。 |
c. 请针对要显示在次轴上的每个数据系列启用 UseSecondAxisSeriesN 属性。
4. 单击“保存”，然后单击“查看混搭”。
此时，次轴配置完成，且已显示信息表数据。添加次轴后，可使用 SecondYAxisLabel 属性设置标签。可使用 SecondYAxisMinValue 和 SecondYAxisMaxValue 属性设置次轴上的数值范围。
下表列出了可用于启用和配置次 Y 轴的属性：
属性名称 | 说明 | 基本类型 | 默认值 | 是否可绑定? (Y/N) | 是否可本地化? (Y/N) |
|---|---|---|---|---|---|
SecondYAxis | 将次 Y 轴添加到图表。 | BOOLEAN | False | Y | N |
SecondYAxisLabel | 指定次 Y 轴的文本标签。 | STRING | 次 Y 轴 | Y | Y |
SecondYAxisLabelAlignment | 对齐次 Y 轴的标签。可将标签放置在“上”、“中”或“下”位置。默认情况下，标签放置在中间。 | STRING | 居中 | 否 | N |
SecondYAxisFormat | 设置次 Y 轴值的格式。可使用此属性确定数据的显示样式。例如，可以设置小数点后显示的数字位数。 | STRING | 0000.0 | Y | N |
SecondYAxisMaxValue | 设置次 Y 轴值的最大范围。默认情况下，系统会自动计算该范围并显示所有数据。 | NUMBER | 不适用 | Y | N |
SecondYAxisMinValue | 设置次 Y 轴值的最大范围。默认情况下，范围会根据小组件数据自动计算。 | NUMBER | 不适用 | Y | N |
UseSecondYAxis1..n | 显示次 Y 轴上数据系列 n 的值。将 NumberOfSeries 从 Auto 更改为固定数值后，此属性可用。 | BOOLEAN | False | N | N |
YAxisRulerAlignment | 指定将用作标尺线参考的 Y 轴。可将标尺线与主 Y 轴或次 Y 轴的数据值标记对齐。 | STRING | 主 Y 轴 | Y | N |
SecondYAxisSeriesDisplay | 控制数据系列在图表次 Y 轴上的堆积方式。可以将值进行堆积和组合、以总值的百分比形式堆积或分组。默认情况下，会对数据系列进行分组。 | STRING | 分组 | Y | N |
小组件属性
下面列出了“条形图”小组件的属性。
属性名称 | 说明 | 基本类型 | 默认值 | 是否可绑定? (Y/N) | 是否可本地化? (Y/N) | ||
|---|---|---|---|---|---|---|---|
ChartType | 将图表的类型设置为“条形图”或“柱形图”。 | STRING | 条形图 | N | N | ||
CustomClass | 用户定义的 CSS 类，应用于小组件顶层 div。 可以输入多个类，以空格作为分隔符。 | STRING | 不适用 | Y | N | ||
Data | 图表的信息表数据源。 | INFOTABLE | 不适用 | Y | N | ||
DataField1 - DataField24 | 将 NumberOfSereis 设置为固定数值时，将列出这些属性。可使用这些属性选择要用于每个数据系列的信息表列。 | 信息表列 | 不适用 | N | N | ||
DataLabel1 - DataLabel24 | 将 NumberOfSereis 设置为特定数值时，将列出这些属性。可使用属性为图例中的每个数据系列指定自定义标签。有关详细信息，请参阅自定义图表图例。 | STRING | 不适用 | N | Y | ||
DataSeriesStyle | 打开状态格式配置对话框。将 NumberOfSeries 设置为“自动”时，将显示此属性。状态定义会应用至图表中的所有系列。
| 状态定义 | 不适用 | N | N | ||
DataSeriesStyle1 - DataSeriesStyle24 | 这些属性将根据针对 NumberOfSereis 属性设置的数值列出。可使用这些属性将单独的状态定义应用至图表中的每个数据系列。 | 状态定义 | 不适用 | N | |||
Disabled | 禁用混搭中的小组件。 小组件会在混搭中显示，但无法单击小组件或将其选中。 | BOOLEAN | False | Y | N | ||
DirectSelectionZoom | 可通过选择图表中的两个数据项进行放大。 此属性可用的选项包括“水平轴”、“垂直轴”、“两者”和“无”。 此属性将在您选择 HorizontalZoom 时显示在属性列表中。 | STRING | 无 | Y | N | ||
DragSelectionZoom | 可通过在要查看的数据范围周围绘制一个选择框来放大图表的特定部分。 此属性可用的选项包括“水平轴”、“垂直轴”、“两者”和“无”。 此属性将在您选择 HorizontalZoom 时显示在属性列表中。 | STRING | 无 | Y | 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 | ||
ExternalPadding | 设置与轴之间的填充。 填充是条宽度的百分比。 | NUMBER | 25 | Y | N | ||
GroupPadding | 设置数据系列的各个组之间的填充。 填充是条宽度的百分比。 | NUMBER | 25 | Y | N | ||
HideLegend | 隐藏图例区域。 选择此属性时，LegendAlignment、LegendFilter、LegendMarkerShapes、LegendMaxWidth 和 LegendPosition 属性不会显示在属性列表中。 | BOOLEAN | False | Y | N | ||
HideDataTooltips | 隐藏悬停或选择图表中的数据点时显示的工具提示。 | BOOLEAN | False | N | N | ||
HideNotes | 隐藏注解区域。 选择此属性时，Notes、NotesAlignment 和 NotesPosition 属性不会显示在属性列表中。 | BOOLEAN | False | Y | N | ||
HideValues | 隐藏图表中的所有值标签。 | BOOLEAN | False | Y | N | ||
HideXAxis | 隐藏 X 轴。 | BOOLEAN | False | Y | N | ||
HideYAxis | 隐藏 Y 轴。 | BOOLEAN | False | Y | N | ||
HorizontalAxisMaxHeight | 设置水平轴的最大高度。 | NUMBER | 85 | Y | N | ||
HorizontalAxisLabelsRotation | 设置标签在水平轴上的旋转角度。可输入 -180 到 180 之间的任意值。 | NUMBER | 自动大小 | N | N | ||
HorizontalZoom | 用于放大水平轴。 选择此属性时，HorizontalIntervalControl、HorizontalRangeZoom、HorizontalSliderZoom、DirectSelectionZoom 和 DragSelectionZoom 属性将显示在属性列表中。 | BOOLEAN | False | Y | N | ||
HorizontalIntervalControl | 添加允许根据特定间隔放大水平轴的控件。 可用选项为“无”(默认选择) 和“下拉列表”。 选择“下拉列表”后，HorizontalIntervalControlLabel 和 HorizontalIntervalData 属性将出现在属性列表中。 | STRING | 无 | N | N | ||
HorizontalIntervalControlLabel | 指定水平轴间隔缩放控件的文本标签。 | STRING | 不适用 | Y | Y | ||
HorizontalIntervalData | 间隔缩放控件选项的数据源。 从水平间隔下拉列表中选择一个条目时，图表将根据选定的持续时间值和开始/结束定位点进行缩放。 | INFOTABLE | 不适用 | Y | N | ||
HorizontalIntervalAnchorPoint | 用于选择数据集内间隔范围的定位点。 选择“开始”可在数据集的起始处放置间隔，或者选择“结束”可在结束处放置间隔。 例如，如果在 12 个月的数据集中指定 3 个月的间隔，则可以选择“开始”来显示最初 3 个月，或选择“结束”来显示数据集的最后 3 个月。 此属性将在您选择 ShowHorizontalAnchorPointControl 属性时显示。 | STRING | 开始 | Y | N | ||
HorizontalIntervalAnchorPointLabel | 指定水平轴间隔定位点的标签。 此属性将在您选择 ShowHorizontalAnchorPointControl 属性时显示。 | STRING | 不适用 | Y | Y | ||
HorizontalRangeZoom | 添加用于在水平轴上指定值范围内进行放大的控件。 选择此属性时，下列 HorizontalStartZoomLabel 和 HorizontalEndZoomLabel 属性将显示在属性列表中。 | BOOLEAN | False | Y | N | ||
HorizontalRangeZoomDateFormat | 使用范围选择缩放时，在日期选择框中设置日期格式。所支持格式均基于 Moment.js JavaScript 库，且区分大小写。 | STRING | 不适用 | N | N | ||
HorizontalRangeZoomDateWidth | 启用缩放后，设置水平轴上日期选择框的宽度。 | NUMBER | 332px | N | 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 | ||
MultipleDataSources | 对图表系列使用多个数据源。这样您就可以在图表中可视化来自多个源的数据。 | BOOLEAN | False | N | N | ||
Notes | 用于指定：图表的注解区域中显示的文本。可以输入字符串，也可以选择本地化标记。 | STRING | 不适用 | Y | Y | ||
NotesAlignment | 将注解文本在注解区域内“左”、“右”或“居中”对齐。 | STRING | 左 | N | N | ||
NumberOfReferenceLines | 指定要在图表上显示的参考线的数量。最多可以添加 24 条参考线。将添加每条参考线的附加属性。 | NUMBER | Y | N | N | ||
ReferecneLineNLabel | 用于设置：参考线的文本标签。 | STRING | Y | Y | N | ||
ReferecneLineNValue | 设置参考线的值。您可以根据轴类型指定数值或日期值。 | 数字或日期时间 | Y | N | N | ||
ReferenceLineNAxis | 指定要用于参考线的轴。仅当图表包含两个具有连续数据 (如数值或日期) 的轴时，此属性才可用。 | STRING | N | N | N | ||
ReverseYAxis | 逆序显示 Y 轴值。 | BOOLEAN | False | N | N | ||
RulersInFront | 在数据值前方显示标尺。默认情况下，标尺显示在数据后方。 | BOOLEAN | False | Y | N | ||
SeriesClicked | 单击数据点时会触发事件。 | 不适用 | 不适用 | Y | N | ||
SeriesDisplay | 用于控制多个数据系列在图表上的显示方式。使用“堆积”或“分组”将以堆积或分组形式显示每个系列中的数据值。选择“百分比堆积”，将以总值的百分比形式显示数据系列。 | STRING | 分组 | Y | N | ||
ShowHorizontalAnchorPointControl | 添加用于调整水平轴定位值的控件 选择此属性时，HorizontalIntervalAnchorPoint 和 HorizontalIntervalAnchorPointLabel 属性将显示在属性列表中。 | BOOLEAN | False | Y | N | ||
ShowHideLegend | 添加了用于在运行时显示或隐藏图表图例的显示/隐藏按钮。 | BOOLEAN | False | N | 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 | ||
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 轴条形内容的信息表字段。 选择 MultipleDataSources 属性时，将有多个 XAxisField 信息表源显示在属性列表中。 | 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 | ||
YAxisValuesFormat | 用于设置：Y 轴值标签的格式。 将 HideValues 设置为 False 时，此属性可用。 | STRING | Y | N |