Mashup Builder > 小器具 > 標準小器具 > 瀑布式圖表小器具 (主題化)
瀑布式圖表小器具 (主題化)
簡介
「瀑布式圖表」小器具會在混搭中顯示回應式瀑布式圖表。將值加到初始值或從初始值中減去該值時,此小器具可讓您視覺化累積變更。
當您的圖表中有單一資料序列時,每次增加或減少都可以透過顏色來反白正或負變更。
當您將「瀑布式圖表」小器具拖曳至工作區時,它會如下顯示:
* 
「瀑布式圖表」小器具可用於 ThingWorx 9.2.0 版及更新版本。
「瀑布式圖表」小器具可作為平台中的標準小器具使用,也可作為您可從 SDL 匯入的 web 元件使用。
「瀑布式圖表」僅支援單一資料來源。如果您要使用來自多個來源的資料,可以將資料合併到單一資料負載中,並在圖表中使用它。
資料格式
您必須使用表示圖表資料結構的欄位定義建立資料負載。資料負載必須包含 X 與 Y 軸值的欄位定義。每個資料負載列都表示 X 軸上的類別及其對應的 Y 軸值。下表列出資料格式作為範例資料負載:
X 軸
Y 軸值
Y 軸值 N
Y 軸
Y 軸
欄位定義
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
布林值
布林值
列範例
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. 按一下「儲存」,然後按一下「檢視混搭」
現在,資料即會顯示在圖表中。已繫結資料負載中的每個額外欄都會顯示為資料序列。繫結資料來源之後,請考慮使用 LabelXAxisLabelYAxisLabel 內容新增標籤。
您也可以使用其他內容配置小器具。例如:
欲顯示量尺線,請啟用 ShowXAxisRulerShowYAxisRuler 內容。
欲顯示值增加或減少的趨勢顏色,請啟用 UseTrendColors 內容。
欲啟用沿垂直或水平軸縮放,請啟用 HorizonalZoomVerticalZoom 內容。
欲將狀態格式套用至圖表,請使用 DataSeriesStyle 內容。如需詳細資訊,請參閱範例:將狀態格式套用至圖表
如需有關可用組態選項的詳細資訊,請參閱下表的內容。
* 
欲在執行時間自動更新圖表資料,請建立「自動重新整理」函數,並將其繫結至會傳回圖表資料的資料服務。如需詳細資訊,請參閱自動重新整理
新增次要軸
您可以使用 ShowSecondYAxis 內容在圖表中新增次要 Y 軸。下圖顯示了具有次要 Y 軸的瀑布式圖表。
下表列出了可用來啟用及配置次要 Y 軸的內容:
屬性名稱
描述
基礎類型
預設值
可繫結? (Y/N)
可當地語系化? (Y/N)
ShowSecondYAxis
可將次要 Y 軸新增至圖表。
當您選取此內容時,SecondYAxisFormatSecondYAxisLabelSecondYAxisLabelAlignment 內容會顯示在清單中。
布林值
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/a
N
N
ShowZoomButtons
啟用水平或垂直縮放時,在圖表工具列上顯示放大與縮小按鈕。
布林值
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 類別。
可輸入多個類別,之間以空格分隔。
STRING
n/a
Y
N
Data
圖表的資料負載資料來源。
INFOTABLE
n/a
Y
N
DataField1 - DataField24
只有在您將 NumberOfSeries 設定為固定數值時,才會列出這些內容。您可使用這些內容來選取要用於每個資料序列的資料負載欄。
資料負載欄
n/a
N
N
DataLabel1 - DataLabel24
只有在您將 NumberOfSeries 設定為固定數值時,才會列出這些內容。此內容可設定針對各資料序列顯示在圖例區中的標籤文字。
STRING
n/a
Y
N
DataSeriesStyle
開啟狀態格式組態對話方塊。當將 NumberOfSeries 設定為 Auto 時,會顯示此內容。狀態定義會套用至圖表中的所有序列。您可根據資料值來設定序列樣式,以便更輕鬆地繪製趨勢或模式圖。
狀態定義
n/a
N
N
DataSeriesStyle1 - DataSereisStyle24
這些內容會根據您為 NumberOfSeries 內容設定的編號列出。您可以使用這些內容將單獨的狀態定義套用到圖表中的每個資料序列。
狀態定義
n/a
N
N
Disabled
在混搭中禁用此小器具。
小器具會顯示在混搭中,但您無法按一下或選取該小器具。
布林值
False
Y
N
DirectSelectionZoom
可讓您在圖表中選取兩個資料項目來放大。
針對此內容,您可以使用的選項包括「水平軸」「垂直軸」「兩者」以及「無」
當您選取 HorizontalZoom 時,此內容會顯示在內容清單中。
STRING
Y
N
DragSelectionZoom
可讓您在要檢視的資料範圍周圍繪製選取方塊,來放大圖表的特定部份。
針對此內容,您可以使用的選項包括「水平軸」「垂直軸」「兩者」以及「無」
當您選取 HorizontalZoom 時,此內容會顯示在內容清單中。
STRING
Y
N
ExternalPadding
設定距離軸的填補。
填補值是柱狀寬度的百分比。
NUMBER
25
Y
N
HideConnectorLines
隱藏用來反白資料序列中每個值之間變更的連接器線。
布林值
False
Y
N
HideLegend
隱藏圖例區域。
當您選取此內容時,LegendAlignmentLegendFilterLegendMarkerShapesLegendMaxWidthLegendPosition 內容不會顯示在內容清單中。
布林值
False
Y
N
HideNotes
隱藏註記區域。
當您選取此內容時,NotesNotesAlignmentNotesPosition 內容不會顯示在內容清單中。
布林值
False
Y
N
HideXAxis
隱藏 X 軸。
布林值
False
Y
N
HideYAxis
隱藏 Y 軸。
布林值
False
Y
N
HorizontalAxisLabelsRotation
設定水平軸上標籤的旋轉角度。您可以輸入介於 -180 至 180 之間的值。
NUMBER
自動調整
N
N
HorizontalAxisMaxHeight
設定水平軸的最大高度。
NUMBER
85
Y
N
HorizontalZoom
可讓您在水平軸進行放大。
當您選取此內容時,HorizontalRangeZoomHorizontalSliderZoomDirectSelectionZoomDragSelectionZoom 內容會顯示在內容清單中。
布林值
False
Y
N
HorizontalRangeZoom
新增可讓您指定在水平軸放大之值範圍的控制項。
當您選取此內容時,下列 HorizontalStartZoomLabelHorizontalEndZoomLabel 內容會顯示在內容清單中。
布林值
False
Y
N
HorizontalStartZoomLabel
指定範圍選取開始位置的文字標籤。
STRING
n/a
Y
Y
HorizontalEndZoomLabel
指定範圍選取結束位置的文字標籤。
STRING
n/a
Y
Y
HorizontalSliderZoom
新增可讓您顯示水平軸上最小值與最大值之間資料的滑桿控制項。
當您選取此內容時,HorizontalSliderZoomMaxLabelHorizontalSliderZoomMinLabel 內容會顯示在內容清單中。
布林值
False
Y
N
HorizontalSliderZoomMaxLabel
指定滑桿縮放控制項最大值的標籤。
STRING
n/a
Y
Y
HorizontalSliderZoomMinLabel
指定滑桿縮放控制項最小值的標籤。
STRING
n/a
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
新增可允許使用者在圖表執行時間進行篩選的圖例篩選器。
布林值
False
N
N
LegendMarkerShapes
將圖例的標記形狀設定為「正方形」「圓形」「無」
STRING
正方形
N
N
LegendMaxWidth
設定圖例區域的最大寬度。
NUMBER
736
Y
N
LegendPosition
將圖例的方位設定在「上」「下」「左」「右」
STRING
N
N
NonSelectableData
使用 selectable 資料負載欄位中的 True 或 False 值控制使用者是否可以按一下來選取圖表中的資料。欄位內的每個值都會套用至同一列上的所有資料序列。
布林值
False
N
N
Notes
指定要在圖表註記區域顯示的文字。您可以輸入字串或選取當地語系化權杖。
STRING
n/a
Y
Y
NotesAlignment
在註記區域內將註記文字向「左」「右」「置中」對齊。
STRING
N
N
NotesPosition
將註記區域的方位設定在「上」「下」
STRING
N
N
NumberOfReferenceLines
設定要在圖表上顯示的參照線數目。
參照線可用來反白相對於特定值的圖表資料。您最多可新增 24 條線,並設定每條線的標籤、軸與值。
例如,當您將介於 1 到 24 之間的值設定為此內容時,對應的內容 ReferenceLine1Label - ReferenceLine24LabelReferenceLine1Value - ReferenceLine24Value 會顯示在內容清單中。
NUMBER
0
N
N
NumberOfSeries
設定要顯示在圖表中的資料系列數目。
「自動」設定會顯示所有資料系列。
NUMBER
自動
N
N
NumberOfYLabels
設定要在 Y 軸上顯示的標籤數。
* 
此內容在 ThingWorx 9.3.2 或更新版本中可用。
NUMBER
自動
N
N
Orientation
指定圖表的定向。您可以沿水平或垂直軸顯示累積變更。
STRING
垂直
N
N
ResetToDefaultValue
將此小器具的輸入重設為預設值。
n/a
n/a
Y
N
RulersInFront
在資料值前方顯示量尺。依預設,量尺顯示在資料之後。
布林值
False
Y
N
SeriesClicked
當您按一下資料點時會觸發事件。
n/a
n/a
Y
N
SelectedData
在圖表中包含所選資料的資料負載。
INFOTABLE
n/a
Y
N
SelectionMode
控制使用者可以同時選取多少資料點。
選項有「單一」「多個」「預設」
選擇「多個」可讓使用者選取一個以上的資料點。
STRING
預設
Y
N
ShowHideLegend
新增了顯示/隱藏按鈕,可讓您在執行時間顯示或隱藏圖表圖例。
* 
此內容適用於 ThingWorx 9.3.0 版及更新版本。
布林值
False
N
N
ShowTotal
使用 ShowTotal 資料負載欄位下的 Ture 或 False 值來控制趨勢值是否相對於完整的柱或欄顯示。當設定為 True 時,會使用不同的顏色堆疊加的部份,並使減的部份與柱或欄重疊。
布林值
False
N
N
ShowValues
顯示圖表中的值標籤
當您選取此內容時,ValuesPosition 內容會顯示在清單中。
布林值
False
Y
N
ShowXAxisRuler
顯示 X 軸量尺。
布林值
False
Y
N
ShowYAxisRuler
顯示 Y 軸量尺。
布林值
False
Y
N
ShowZeroValueRuler
顯示零值量尺。
布林值
False
Y
N
ShowZoomButtons
啟用水平或垂直縮放時,在圖表工具列上顯示放大與縮小按鈕。
* 
此內容在 ThingWorx 9.3.5 或更新版本中可用。
布林值
False
N
N
SparkView
顯示圖表視覺化的簡化視圖。啟用此內容可隱藏標籤、圖例與量尺。
布林值
False
Y
N
TabSequence
按下 TAB 時,「瀑布式圖表」小器具的序號。
NUMBER
n/a
N
N
UseTrendColors
當圖表顯示來自一個序列的資料時,會使用不同顏色反白趨勢。
* 
值中的增加或正趨勢會以綠色樣式主題顯示。減少或負趨勢會以紅色樣式主題顯示。
布林值
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 內容會顯示在內容清單中。
布林值
False
Y
N
VerticalSliderZoom
新增可讓您顯示垂直軸上最小值與最大值之間資料的滑桿控制項。
當您選取此內容時,VerticalZoomMaxLabelVerticalZoomMinLabel 內容會顯示在內容清單中。
布林值
False
Y
N
VerticalZoomMaxLabel
指定滑桿縮放控制項最大值的文字標籤。
STRING
n/a
Y
Y
VerticalZoomMinLabel
指定滑桿縮放控制項最小值的文字標籤。
STRING
n/a
Y
Y
XAxisField
表示 X 軸資料的資料負載欄位。
INFOTABLE
n/a
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
n/a
Y
N
YAxisMinimumValues
設定 Y 軸值的最小範圍。
依預設,範圍將根據小器具資料自動計算。若圖表資料包含更小值,將會略過此內容的值。
STRING
n/a
Y
N
這是否有幫助?