排程圖小器具 (主題化)
簡介
「排程圖」小器具會在混搭中顯示排程圖。
 | 「排程圖」小器具可作為平台中的標準小器具使用，也可作為可從 SDK 匯入的 web 元件使用。 |
資料格式
「排程圖」資料應包含具有兩個欄位定義的資料負載：
• 資源 - 定義要顯示在資源軸上的資源。
• 資料 - 定義包含要針對每個資源顯示之資料的嵌套資料負載。
資源 | 資料資料負載 | |
|---|---|---|
欄位定義 | Resource:{name:'Resource',baseType:'STRING'} | Data:{name:'Data',baseType:'INFOTABLE'} |
使用 | 定義圖表條或欄的 X 軸值。資料必須為字串。每一列都會顯示為 X 軸上的一個類別。此欄的定義名稱是您應針對 ResouceField 小器具內容選取的選項。 | 定義包含資源資料的資料負載。 |
基礎類型 | STRING | INFOTABLE |
列範例 | Resource:'Apple' - 其中 Apple 是資源名稱。 | Data:'Infotable1' - 具有資源資料的資料負載實體。 |
針對您在第一個資料負載中定義的每個資源，您必須建立一個包含欄位定義的資料負載，其中的欄位定義表示圖表中資源的資料結構。下表列出了所需的資料結構，以及用於資料負載的欄位定義：
reason | info | start | end | color | |
|---|---|---|---|---|---|
欄位定義 | reason:{name:'reason',baseType:'STRING'} | info:{name:'info',baseType:'STRING'} | start:{name:'start',baseType:'DATETIME'} | end:{name:'end',baseType:'DATETIME'} | color:{name:'color',baseType:'STRING'} |
使用 | 這是一個必填欄位，用來定義任務名稱或記錄資源事件的原因。此欄中的資料會顯示為圖表圖例。 | 這是一個選用欄位，用來定義資源事件的描述。 | 這是一個必填欄位，用來定義資源事件的開始日期。 | 這是一個必填欄位，用來定義資源事件的結束日期。 | 這是一個選用欄位，用來為圖表中的事件表示定義特定顏色。 |
基礎類型 | STRING | STRING | DATETIME | DATETIME | STRING |
列範例 | reason:'Maintenance' - 其中 Maintenance 是您要顯示在圖表中的事件名稱。 | info:'Maintenance event description' - 其中 Maintenance event description 是要顯示在圖表中的事件描述。 | start:'2020-01-07 03:57:43.322' - 維護事件的開始日期。 | end:'2020-01-26 07:38:12.102' - 維護事件的結束日期。 | color:'red' - 事件會以紅色顯示。 |
| | 資料負載欄位定義必須與上表中指定的名稱相符。 |
每一列都表示資源中事件或任務的時間或持續時間。下圖顯示「排程圖」資料服務的已傳回資料格式：
針對間隔縮放控制選項，您必須建立包含以下兩個欄位的資料負載：標籤與持續時間。兩個欄位中的資料基礎類型應為 STRING。下圖顯示資料服務的已傳回資料格式：
您可在 duration 欄位中使用的值以及這些值表示的範圍如下：
• Y - 年
• M - 月
• W - 週
• d - 日
• h - 小時
• m - 分鐘
• s - 秒
• ms - 毫秒
| | 字元區分大小寫。例如，「M」表示月份，「m」表示分鐘。 |
繫結資料來源
欲在圖表中顯示資料：
1. 在「資料」面板中，新增資料服務，用來傳回包含小器具正確資料格式的資料負載。
2. 將資料服務的 All Data 內容繫結至圖表的 Data 內容。
3. 選取圖表，然後在「內容」面板中設定下列內容：
◦ ResourceField - 選取要用於資源軸的資料負載欄。
◦ DataField - 選取包含每個資源之資料的資料負載欄。每個欄位都是一個包含的資料負載。
4. 按一下「儲存」，然後按一下「檢視混搭」。
資料負載資料即會顯示在圖表中。
新增次要軸
您可以將次要軸新增至排程圖。次要軸可用來以不同格式或地區設定顯示日期。欲將次要時間軸新增至圖表，請執行下列操作：
1. 選取圖表，然後開啟「內容」面板。
2. 選取 SecondTimeAxis 內容旁邊的核取方塊。會列出其他內容。
3. 欲為次要軸指定不同的日期格式，請鍵入 SecondTimeAxisDateFormatToken 內容的日期模式，或選取當地語系化權杖。
4. 按一下「儲存」，然後按一下「檢視混搭」。
會根據指定的格式日期顯示次要時間軸。
下圖顯示了具有次要軸的「排程圖」小器具：
此圖表顯示了多個資源的事件。次要與主要時間軸用來使用兩種不同格式顯示日期。主要軸顯示日期與月份，次要軸顯示週數。欲使用週數顯示日期格式，請將 SecondTimeAxisDateFormatToken 內容設定為 w。如需有關可用格式的詳細資訊，請參閱設定小器具的日期和時間格式。
| | 次要時間軸內容僅在 ThingWorx 9.1 及更新版本中提供。 |
下表列出了可用來啟用及配置次要時間軸的內容：
內容 | 描述 | 基礎類型 | 預設值 | 可繫結? (Y/N) | 當地語系化支援 |
|---|---|---|---|---|---|
SecondTimeAxis | 可將次要時間軸新增至圖表。 | BOOLEAN | False | Y | N |
SecondTimeAxisLabel | 可指定次要時間軸的文字標籤。 | STRING | 次要時間軸 | Y | Y |
SecondTimeAxisLabelAlignment | 可對齊次要時間軸的標籤。依預設，標籤會靠左對齊。 | STRING | 左 | N | N |
SecondTimeAxisDateFormatToken | 可讓您使用 "dd-mm-yy" 模式，針對次要時間軸對日期格式執行當地語系化。依預設，會使用作業系統的日期格式。 | STRING | N/A | Y | Y |
小器具內容
下表列出的內容適用於 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 | 啟用縮放時，在圖表工具列上顯示放大與縮小按鈕。 | BOOLEAN | False | N | N |
下表列出了 ThingWorx 9.3.2 及更新版本中可用的內容：
屬性名稱 | 描述 | 基礎類型 | 可繫結 | 可當地語系化 | ||
|---|---|---|---|---|---|---|
NumberOfTimeLabels | 設定要在時間軸上顯示的標籤數。
| NUMBER | N | Y |
下表列出了 ThingWorx 9.2 及更新版本中可用的圖表內容：
屬性名稱 | 描述 | 基礎類型 | 可繫結 | 可當地語系化 |
|---|---|---|---|---|
NumberOfReferenceLines | 指定要在圖表上顯示的參照線數目。最多可新增 24 條參照線。會針對每條參照線新增附加內容。 | NUMBER | Y | N |
ReferecneLineNLabel | 設定參照線的文字標籤。 | STRING | Y | Y |
ReferecneLineNValue | 設定參照線的值。您可以選取一個日期來設定參照線。 | DATETIME | Y | N |
「排程圖」小器具的內容如下所列。
屬性名稱 | 描述 | 基礎類型 | 預設值 | 可繫結? (Y/N) | 可當地語系化? (Y/N) | ||
|---|---|---|---|---|---|---|---|
AxisZoom | 可讓您在「時間軸」進行放大。 當您選取此內容時，DirectSelectionZoom、DragSelectionZoom、TimeAxisIntervalControl 與 TimeAxisRangeZoom 內容會顯示在內容清單中。 | BOOLEAN | False | Y | N | ||
CustomClass | 要套用至小器具頂部分區之使用者定義的 CSS 類別。 可輸入多個類別，之間以空格分隔。 | STRING | n/a | Y | N | ||
DirectSelectionZoom | 可讓您在圖表中選取兩個資料項目來放大。 可用選項包括「無」、「資源軸」、「時間軸」與「兩者」。 | STRING | 無 | Y | N | ||
DragSelectionZoom | 可讓您在要檢視的資料範圍周圍繪製選取方塊，來放大圖表的特定部份。 可供您使用的選項包括「無」、「資源軸」、「時間軸」與「兩者」。 | STRING | 無 | Y | N | ||
Data | 圖表的資料負載資料來源。 | INFOTABLE | n/a | Y | N | ||
DataField | 選取包含圖表資源時間資料的資料負載欄位。 | INFOTABLE | n/a | Y | N | ||
Disabled | 在混搭中禁用此小器具。 小器具會顯示在混搭中，但您無法按一下或選取該小器具。 | BOOLEAN | False | Y | N | ||
EndTime | 設定縮放範圍結束的日期與時間。 | DATETIME | n/a | Y | N | ||
ExternalPadding | 設定距離軸的填補。 填補是柱狀寬度的百分比。 | NUMBER | 25 | Y | N | ||
HideLegend | 隱藏圖例區域。 當您選取此內容時，LegendAlignment、LegendFilter、LegendMarkerShapes、LegendMaxWidth 與 LegendPosition 內容不會顯示在內容清單中。 | BOOLEAN | False | Y | N | ||
HideNotes | 隱藏註記區域。 當您選取此內容時，Notes、NotesAlignment 與 NotesPosition 內容不會顯示在內容清單中。 | BOOLEAN | False | Y | N | ||
HideResourcesAxis | 隱藏「資源軸」。 | BOOLEAN | False | Y | N | ||
HideTimeAxis | 隱藏「時間軸」。 | BOOLEAN | False | Y | N | ||
HorizontalAxisMaxHeight | 設定水平軸的最大高度。 | NUMBER | 85 | Y | N | ||
HorizontalAxisLabelsRotation | 設定水平軸上標籤的旋轉角度。您可以輸入介於 -180 至 180 之間的值。 | NUMBER | 自動調整 | N | N | ||
InternalPadding | 設定序列之間的填補。 填補是柱狀寬度的百分比。 | NUMBER | 25 | Y | N | ||
Label | 顯示排程圖的文字標籤。 | STRING | 排程圖 | Y | Y | ||
LabelType | 將排程圖的標籤類型選取為「標題」、「子標題」、「標籤」或「本文」。 | STRING | 子標題 | Y | N | ||
LabelAlignment | 將排程圖小器具的標籤向「左」、「置中」或「右」對齊。 此內容的可用選項取決於 LabelPosition 內容的設定。 | 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 | 可讓您視覺化來自圖表中多個來源的資料。 當您選取此內容時，NumberOfDataSources 內容會顯示在內容清單中。 | BOOLEAN | False | N | N | ||
Notes | 指定要在圖表註記區域顯示的文字。您可以輸入字串或選取當地語系化權杖。 | STRING | n/a | Y | Y | ||
NotesAlignment | 將註記文字向「左」、「右」或「置中」對齊。 此內容的可用選項取決於 NotesPosition 內容的設定。 | STRING | 左 | N | N | ||
NotesPosition | 將註記區域的方位設定在「上」或「下」。 | STRING | 下 | N | N | ||
NumberOfDataSources | 設定您可以繫結至圖表的資料來源數。 | NUMBER | 2 | N | N | ||
ResetToDefaultValue | 將此小器具的輸入重設為其預設值。 | n/a | n/a | Y | N | ||
ResourceField | 包含顯示在圖表中之資源的資料負載欄位。 | INFOTABLE | n/a | n/a | n/a | ||
ResourcesAxisLabel | 顯示「資源軸」的文字標籤。 | STRING | 資源軸 | Y | Y | ||
ResourcesAxisLabelAlignment | 將「資源軸」標籤向「上」、「中」或「下」對齊。 | STRING | 中 | N | N | ||
ReverseResourcesAxis | 以反序顯示「資源軸」值。 | BOOLEAN | False | N | N | ||
ReverseTimeAxis | 以反序顯示「時間軸」值。 | BOOLEAN | False | N | N | ||
RulersInFront | 在資料值前方顯示量尺。依預設，量尺顯示在資料之後。 | BOOLEAN | False | Y | N | ||
SeriesClicked | 當您按一下資料點時會觸發事件。 | n/a | n/a | Y | N | ||
ShowHideLegend | 新增了顯示/隱藏按鈕，可讓您在執行時間顯示或隱藏圖表圖例。
| BOOLEAN | False | N | N | ||
ShowResourcesAxisRuler | 顯示資源軸量尺。 | BOOLEAN | False | Y | N | ||
ShowTimeAxisRuler | 顯示時間軸量尺。 | BOOLEAN | False | Y | N | ||
SparkView | 顯示圖表視覺化的簡化視圖。啟用此內容可隱藏標籤、圖例與量尺。 | BOOLEAN | False | Y | N | ||
StartTime | 設定縮放範圍開始的日期與時間。 | DATETIME | n/a | Y | N | ||
TabSequence | 按下 TAB 時，排程圖小器具的序號。 | NUMBER | n/a | N | N | ||
TimeAxisIntervalControl | 新增可讓您根據特定間隔在「時間軸」進行放大的控制項。 依預設，此內容的選取項為「無」。當您選取「下拉清單」時，TimeAxisIntervalControlLabel、TimeAxisIntervalData、TimeAxisIntervalAnchorPoint 與 TimeAxisIntervalAnchorPointLabel 內容會顯示在內容清單中。 | STRING | 無 | Y | N | ||
TimeAxisIntervalControlLabel | 指定「時間軸」間隔縮放控制項的標籤。 | STRING | n/a | Y | Y | ||
TimeAxisIntervalData | 間隔縮放控制選項的資料來源。 當您從間隔下拉清單選取項目時，圖表會根據所選持續時間值與開始/結束錨點放大。 | INFOTABLE | n/a | Y | N | ||
TimeAxisIntervalAnchorPoint | 可讓您選取資料集內間隔範圍的錨點位置。 選取「開始」將間隔置於資料集的開始位置，或選取「結束」將間隔置於資料集的結束位置。 例如，如果您在 12 個月的資料集中指定了三個月的間隔，則您可選取「開始」以顯示資料集的前三個月，或選取「結束」以顯示資料集的最後三個月。 | STRING | 開始 | Y | N | ||
TimeAxisIntervalAnchorPointLabel | 指定「時間軸」間隔錨點的標籤。 | STRING | n/a | Y | Y | ||
TimeAxisLabelAlignment | 將「時間軸」標籤向「左」、「右」或「置中」對齊。 | STRING | 左 | N | N | ||
TimeAxisLabel | 顯示「時間軸」的文字標籤。 | STRING | 時間軸 | Y | Y | ||
TimeAxisDateFormatToken | 使用 DD-MM-YY 模式本地化「時間軸」的日期格式。 | STRING | n/a | Y | Y | ||
TimeAxisRangeZoom | 新增可讓您指定在「時間軸」縮放之日期與時間範圍的控制項。您可以使用 StartTime 與 EndTime 內容設定範圍。 當您選取此內容時，TimeAxisStartZoomLabel 與 TimeAxisEndZoomLabel 內容會顯示在內容清單中。 | BOOLEAN | False | Y | N | ||
TimeAxisStartZoomLabel | 指定範圍選取開始位置的標籤。 | STRING | n/a | Y | Y | ||
TimeAxisEndZoomLabel | 指定範圍選取結束位置的標籤。 | STRING | n/a | Y | Y | ||
VerticalAxisMaxWidth | 設定垂直軸的最大寬度。 | NUMBER | 85 | Y | N |