時間序列圖 (Time Series Chart)
此小工具的功能為何？
「時間序列圖」小工具可搭配使用 x 軸為時間的時間序列資料。此圖表僅支援線及/或點的標記渲染。
 |
資料必須繫結至時間序列圖。
|
使用此小工具的時機？
當您要說明的時間連續間隔的資料點時，即可使用時間序列圖。舉例來說，如果您要透過圖表顯示過去一小時內的卡車每分鐘轉速 (RPM)，則可透過時間續列表小工具，並將連線卡車的「RPM」屬性作為「資料」繫結至小工具。
還有任何特殊屬性、服務、事件、操作嗎？
欲檢視通用的小工具屬性、服務、事件等清單，可參閱 共通的小工具屬性、服務、事件。
|
屬性
|
JavaScript
|
類型
|
描述
|
|---|---|---|---|
|
X 軸欄位
|
labelsField
|
string
|
將顯示圖表的 X 軸資料。需手動輸入欄位名稱。例如，輸入「名稱」。
|
|
Y 軸欄位
|
valuesField
|
string
|
將顯示圖表的 Y 軸資料。需手動輸入欄位名稱。例如，輸入「使用者」。
|
操作中的小工具
此範例為小工具可能的外觀！
|
使用所必須的最少步驟
|
近似外觀
|
|---|---|
|
1. 拖曳「時間序列圖」小工具至畫布上。
2. 從「資料」窗格中，透過能回傳歷史記錄資料的服務搜尋實體。
3. 一旦新增該服務之後，將「所有項目」拖曳至小工具上，並選擇「選擇繫結目標」視窗上的「資料」。
4. 從「X 軸欄位」下拉式清單中選擇屬性。針對此範例，我們選擇「速度」。
5. 從「Y 軸欄位」下拉式清單中選擇屬性。針對此範例，我們選擇「RPM」。
|
 |
繫結 ThingWorx 資料後的輔助組態欄位
在繫結 ThingWorx 資料至小工具之後，隨即在下拉式清單中顯示某些欄位的選項。舉例來說，如果您繫結「所有項目」至「時間序列圖」小工具，並選取「選取繫結目標」視窗上的「資料」，則「X 軸欄位」與「Y 軸欄位」屬性都會出現可用選項。
使用 JavaScript 與 CSS 對小器具進行樣式化處理
您可使用 JavaScript 對小器具進行樣式化處理！以下是範例：
 |
請記住，最好為類別指定唯一名稱，從而不與其他類別或 OOTB 屬性相衝突。
|
|
範例
|
近似外觀
|
|---|---|
|
在 JavaScript 編輯器中輸入下列內容：
// Chart Legends |
 |
|
在 JavaScript 編輯器中輸入下列內容：
1. 在 JavaScript 編輯器中輸入下列內容：
// Time Series lines 2. 在應用程式編輯器中新增下列類別：
.ptc-TimeSeries {
3. 在時間序列圖的「類別」欄位中輸入新類別。
|
 |
|
1. 在 JavaScript 編輯器中輸入下列內容：
Chart.defaults.global.legend.position="bottom"; 2. 在應用程式編輯器中新增下列類別：
.ptc-TimeSeries {
3. 在時間序列圖的「類別」欄位中輸入新類別。
|
 |
如需可以更新的屬性之完整清單，請參閱 https://www.chartjs.org/docs/latest。
如需詳細資訊，請參閱在 Vuforia Studio 中使用 JavaScript與應用程式樣式。