柱狀圖小器具 (主題化)
觀看下列視訊，瞭解如何將小器具新增至混搭，以及如何配置基本小器具內容。欲在新標籤中開啟視訊，請按一下播放器中的標題。
簡介
「柱狀圖」小器具會在混搭中顯示一個柱狀圖。
「柱狀圖」的設計目的是為了比較單位數量，其中 Y 軸表示數量。資料系列可進行分組及堆疊。
 | 「柱狀圖」小器具可作為平台中的標準小器具使用，也可作為可從 SDK 匯入的 web 元件使用。 |
資料格式
您必須使用表示圖表資料結構的欄位定義建立資料負載。資料負載必須包含 X 與 Y 軸值的欄位定義。您可以針對資料系列值新增具有欄位定義的其他欄，來新增多個資料系列。每個資料負載列都表示 X 軸上的類別及其對應的 Y 軸值。下表列出資料負載的資料格式：
X 軸 | Y 軸值 | Y 軸值 N | |
|---|---|---|---|
欄位定義 | x:{name:'x',baseType:'STRING'} | value1:{name:'value1',baseType:'NUMBER'} | value1:{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 軸的柱形圖。
主要軸用來量測定量資料，次要軸用來量測百分比值。每個 Y 軸都有一個最大值內容軸。
| | 次要 Y 軸內容僅在 ThingWorx 9.1 及更新版本中提供。 |
若將 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 軸新增至圖表。 | 布林值 | False | Y | N |
SecondYAxisLabel | 可指定次要 Y 軸的文字標籤。 | STRING | 次要 Y 軸 | Y | Y |
SecondYAxisLabelAlignment | 可對齊次要 Y 軸的標籤。您可將標籤的方位設定在「靠上對齊」、「向中對齊」或「靠下對齊」。依預設，標籤會向中對齊。 | STRING | 中 | 否 | N |
SecondYAxisFormat | 可設定次要 Y 軸值的格式。您可使用此內容來決定資料外觀的顯示方式。例如，您可設定小數點後顯示的位數。 | STRING | 0000.0 | Y | N |
SecondYAxisMaxValue | 可設定次要 Y 軸值的最大範圍。依預設，會自動計算範圍並顯示所有資料。 | NUMBER | N/A | Y | N |
SecondYAxisMinValue | 可設定次要 Y 軸值的最大範圍。依預設，範圍將根據小器具資料自動計算。 | NUMBER | N/A | Y | N |
UseSecondYAxis1..n | 可顯示次要 Y 軸上資料序列 n 的值。當您 NumberOfSeries 從 Auto 變更為固定數值時，可使用此內容。 | 布林值 | False | N | N |
YAxisRulerAlignment | 可指定要作為量尺線參照使用的 Y 軸。您可以將量尺線與主要或次要軸上的資料值標記對齊。 | STRING | 主要 Y 軸 | Y | N |
SecondYAxisSeriesDisplay | 可控制次要 Y 軸的資料序列在圖表中的堆疊方式。您可以堆疊並合併值、堆疊為總值的百分比，或為值分組。依預設，會對資料序列進行分組。 | STRING | 分組 | Y | N |
小器具內容
下表列出的內容適用於 ThingWorx 9.4 或更新版本：
屬性名稱 | 描述 | 基礎類型 | 預設值 | 可繫結 | 可當地語系化 |
|---|---|---|---|---|---|
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 |
下表列出了 ThingWorx 9.3.5 及更新版本中可用的內容：
屬性名稱 | 描述 | 基礎類型 | 預設值 | 可繫結 | 可當地語系化 |
|---|---|---|---|---|---|
ShowZoomButtons | 啟用水平或垂直縮放時，在圖表工具列上顯示放大與縮小按鈕。 | 布林值 | False | N | N |
下表列出了 ThingWorx 9.3.2 及更新版本中可用的內容：
屬性名稱 | 描述 | 基礎類型 | 可繫結 | 可當地語系化 | ||
|---|---|---|---|---|---|---|
NumberOfYLabels | 設定要在 Y 軸上顯示的標籤數。
| NUMBER | N | Y |
下表列出了 ThingWorx 9.2 及更新版本中可用的圖表內容：
屬性名稱 | 描述 | 基礎類型 | 可繫結 | 可當地語系化 |
|---|---|---|---|---|
NumberOfReferenceLines | 指定要在圖表上顯示的參照線數目。最多可新增 24 條參照線。會針對每條參照線新增附加內容。 | NUMBER | Y | N |
ReferecneLineNLabel | 設定參照線的文字標籤。 | STRING | Y | Y |
ReferecneLineNValue | 設定參照線的值。您可以根據軸類型指定數值或日期值。 | NUMBER 或 DATETIME | Y | N |
ReferenceLineNAxis | 指定要用於參照線的軸。此內容只有在圖表包含兩個具有連續資料 (如數值或日期) 的軸時才可用。 | STRING | N | N |
「柱狀圖」小器具的內容如下所列。
屬性名稱 | 描述 | 基礎類型 | 預設值 | 可繫結? (Y/N) | 可當地語系化? (Y/N) | ||
|---|---|---|---|---|---|---|---|
ChartType | 將圖表類型設定為「柱狀圖」或「柱形圖」。 | STRING | 柱狀圖 | N | N | ||
CustomClass | 要套用至小器具頂部分區之使用者定義的 CSS 類別。 可輸入多個類別，之間以空格分隔。 | STRING | n/a | Y | N | ||
Data | 圖表的資料負載資料來源。 | INFOTABLE | n/a | Y | N | ||
DataField1 - DataField24 | 只有在您將 NumberOfSereis 設定為固定數值時，才會列出這些內容。您可使用這些內容來選取要用於每個資料序列的資料負載欄。 | 資料負載欄 | n/a | N | N | ||
DataLabel1 - DataLabel24 | 只有在您將 NumberOfSereis 設定為特定數值時，才會列出這些內容。您可以使用內容來為圖例中的每個資料系列指定自訂標籤。如需詳細資訊，請參閱自訂圖表圖例。
| STRING | n/a | N | Y | ||
DataSeriesStyle | 開啟狀態格式組態對話方塊。當將 NumberOfSeries 設定為 Auto 時，會顯示此內容。狀態定義會套用至圖表中的所有序列。
| 狀態定義 | n/a | N | N | ||
DataSeriesStyle1 - DataSereisStyle24 | 這些內容會根據您為 NumberOfSereis 內容設定的編號列出。您可以使用這些內容將單獨的狀態定義套用到圖表中的每個資料序列。 | 狀態定義 | n/a | N | |||
Disabled | 在混搭中禁用此小器具。 小器具會顯示在混搭中，但您無法按一下或選取該小器具。 | 布林值 | False | Y | N | ||
DirectSelectionZoom | 可讓您在圖表中選取兩個資料項目來放大。 針對此內容，您可以使用的選項包括「水平軸」、「垂直軸」、「兩者」以及「無」。 當您選取 HorizontalZoom 時，此內容會顯示在內容清單中。 | STRING | 無 | Y | N | ||
DragSelectionZoom | 可讓您在要檢視的資料範圍周圍繪製選取方塊，來放大圖表的特定部份。 針對此內容，您可以使用的選項包括「水平軸」、「垂直軸」、「兩者」以及「無」。 當您選取 HorizontalZoom 時，此內容會顯示在內容清單中。 | STRING | 無 | Y | N | ||
ExternalPadding | 設定距離軸的填補。 填補是柱狀寬度的百分比。 | NUMBER | 25 | Y | N | ||
GroupPadding | 設定資料系列群組之間的填補。 填補是柱狀寬度的百分比。 | NUMBER | 25 | Y | N | ||
HideLegend | 隱藏圖例區域。 當您選取此內容時，LegendAlignment、LegendFilter、LegendMarkerShapes、LegendMaxWidth 與 LegendPosition 內容不會顯示在內容清單中。 | 布林值 | False | Y | N | ||
HideNotes | 隱藏註記區域。 當您選取此內容時，Notes、NotesAlignment 與 NotesPosition 內容不會顯示在內容清單中。 | 布林值 | False | Y | N | ||
HideValues | 隱藏圖表中的所有值標籤。 | 布林值 | False | Y | N | ||
HideXAxis | 隱藏 X 軸。 | 布林值 | False | Y | N | ||
HideYAxis | 隱藏 Y 軸。 | 布林值 | False | Y | N | ||
HorizontalAxisMaxHeight | 設定水平軸的最大高度。 | NUMBER | 85 | Y | N | ||
HorizontalAxisLabelsRotation | 設定水平軸上標籤的旋轉角度。您可以輸入介於 -180 至 180 之間的值。 | NUMBER | 自動調整 | N | N | ||
HorizontalZoom | 可讓您在水平軸進行放大。 當您選取此內容時，HorizontalIntervalControl、HorizontalRangeZoom、HorizontalSliderZoom、DirectSelectionZoom 與 DragSelectionZoom 內容會顯示在內容清單中。 | 布林值 | False | Y | N | ||
HorizontalIntervalControl | 新增可讓您根據特定間隔在水平軸進行放大的控制項。 可用選項為「無」 (預設選取項) 與「下拉清單」。 當您選取「下拉清單」時，HorizontalIntervalControlLabel 與 HorizontalIntervalData 內容會顯示在內容清單中。 | STRING | 無 | N | N | ||
HorizontalIntervalControlLabel | 指定水平軸間隔縮放控制項的文字標籤。 | STRING | n/a | Y | Y | ||
HorizontalIntervalData | 間隔縮放控制選項的資料來源。 當您從水平間隔下拉清單選取項目時，圖表會根據所選持續時間值與開始/結束錨點放大。 | INFOTABLE | n/a | Y | N | ||
HorizontalIntervalAnchorPoint | 可讓您選取資料集內間隔範圍的錨點位置。 選取「開始」將間隔置於資料集的開始位置，或選取「結束」將間隔置於資料集的結束位置。 例如，如果您在 12 個月的資料集中指定了三個月的間隔，則您可選取「開始」以顯示資料集的前三個月，或選取「結束」以顯示資料集的最後三個月。 當您選取 ShowHorizontalAnchorPointControl 內容時，此內容會顯示出來。 | STRING | 開始 | Y | N | ||
HorizontalIntervalAnchorPointLabel | 指定水平軸間隔錨點的標籤。 當您選取 ShowHorizontalAnchorPointControl 內容時，此內容會顯示出來。 | STRING | n/a | Y | Y | ||
HorizontalRangeZoom | 新增可讓您指定在水平軸放大之值範圍的控制項。 當您選取此內容時，下列 HorizontalStartZoomLabel 與 HorizontalEndZoomLabel 內容會顯示在內容清單中。 | 布林值 | False | Y | N | ||
HorizontalStartZoomLabel | 指定範圍選取開始位置的文字標籤。 | STRING | n/a | Y | Y | ||
HorizontalEndZoomLabel | 指定範圍選取結束位置的文字標籤。 | STRING | n/a | Y | Y | ||
HorizontalSliderZoom | 新增可讓您顯示水平軸上最小值與最大值之間資料的滑桿控制項。 當您選取此內容時，HorizontalSliderZoomMaxLabel 與 HorizontalSliderZoomMinLabel 內容會顯示在內容清單中。 | 布林值 | 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 | ||
MultipleDataSources | 針對圖表系列使用多個資料來源。這可讓您視覺化來自圖表中多個來源的資料。 | 布林值 | False | N | N | ||
Notes | 指定要在圖表註記區域顯示的文字。您可以輸入字串或選取當地語系化權杖。 | STRING | n/a | Y | Y | ||
NotesAlignment | 在註記區域內將註記文字向「左」、「右」或「置中」對齊。 | STRING | 左 | N | N | ||
NotesPosition | 將註記區域的方位設定在「上」或「下」。 | STRING | 下 | N | N | ||
NumberOfSeries | 設定要顯示在圖表中的資料系列數目。 「自動」設定會顯示所有資料系列。 | NUMBER | 自動 | N | N | ||
ResetToDefaultValue | 將此小器具的輸入重設為預設值。 | n/a | n/a | Y | N | ||
ReverseXAxis | 以反序顯示 X 軸值。 | 布林值 | False | N | N | ||
ReverseYAxis | 以反序顯示 Y 軸值。 | 布林值 | False | N | N | ||
RulersInFront | 在資料值前方顯示量尺。依預設，量尺顯示在資料之後。 | 布林值 | False | Y | N | ||
SeriesClicked | 當您按一下資料點時會觸發事件。 | n/a | n/a | Y | N | ||
SeriesDisplay | 用於控制多個資料系列在圖表中的顯示方式。您可以使用「堆疊」或「分組」，對來自每個系列的資料值進行堆疊或分組。選取「100% 堆疊」可使用總值的百分比形式顯示資料系列。 | STRING | 分組 | Y | N | ||
ShowHorizontalAnchorPointControl | 新增用於調整水平軸錨點值的控制項。 當您選取此內容時，HorizontalIntervalAnchorPoint 與 HorizontalIntervalAnchorPointLabel 內容會顯示在內容清單中。 | 布林值 | False | Y | N | ||
ShowHideLegend | 新增了顯示/隱藏按鈕，可讓您在執行時間顯示或隱藏圖表圖例。
| 布林值 | False | N | N | ||
ShowXAxisRuler | 顯示 X 軸量尺。 | 布林值 | False | Y | N | ||
ShowYAxisRuler | 顯示 Y 軸量尺。 | 布林值 | False | Y | N | ||
ShowZeroValueRuler | 顯示零值量尺。 | 布林值 | False | Y | N | ||
SparkView | 顯示圖表視覺化的簡化視圖。啟用此內容可隱藏標籤、圖例與量尺。 | 布林值 | False | Y | N | ||
TabSequence | 按下 TAB 時，柱狀圖小器具的序號。 | NUMBER | n/a | N | N | ||
ValuesPosition | 將資料值標籤相對於圖表條的對齊方位設定為「在柱狀圖之外」或「與柱狀圖重疊」。 | STRING | 在柱狀圖之外 | N | N | ||
VerticalAxisMaxWidth | 設定垂直軸的最大寬度。 | NUMBER | 85 | Y | N | ||
VerticalZoom | 可讓您在垂直軸進行放大。 當您選取此內容時，VerticalSliderZoom 內容會顯示在內容清單中。 | 布林值 | False | Y | N | ||
VerticalSliderZoom | 新增可讓您顯示垂直軸上最小值與最大值之間資料的滑桿控制項。 當您選取此內容時，VerticalZoomMaxLabel 與 VerticalZoomMinLabel 內容會顯示在內容清單中。 | 布林值 | False | Y | N | ||
VerticalZoomMaxLabel | 指定滑桿縮放控制項最大值的文字標籤。 | STRING | n/a | Y | Y | ||
VerticalZoomMinLabel | 指定滑桿縮放控制項最小值的文字標籤。 | STRING | n/a | Y | Y | ||
XAxisField | 表示 X 軸柱內容的資料負載欄位。 當您選取 MultipleDataSources 內容時，多個 XAxisField 資料負載來源會顯示在內容清單中。 | 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 |