使用小工具 > 2D > 時間序列圖 (Time Series Chart)
  
時間序列圖 (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
Chart.defaults.global.legend.position="bottom";
Chart.defaults.global.legend.labels.fontColor="#ffffff";
Chart.defaults.global.defaultFontColor="#0000ff";
Chart.defaults.global.defaultFontSize=10;
Chart.defaults.global.title.display=true;
//For timeseries LINES
Chart.defaults.global.elements.line.backgroundColor="#ffffff";
Chart.defaults.global.elements.line.borderColor='rgba(0, 50, 255, 0.7)';
// for time series POINTS
Chart.defaults.global.elements.point.backgroundColor="#ffffff";
Chart.defaults.global.elements.point.borderColor="#007777";
Chart.defaults.global.elements.point.radius=2;
在 JavaScript 編輯器中輸入下列內容：
1. 在 JavaScript 編輯器中輸入下列內容：
// Time Series lines
Chart.defaults.global.elements.line.borderColor='rgba(0, 50, 255, 0.7)';
Chart.defaults.global.elements.line.backgroundColor="#add8e6"
Chart.defaults.global.elements.line.fill='top';
// Time Series points
Chart.defaults.global.elements.point.backgroundColor="rgba(255, 255, 0, 0.7)";
Chart.defaults.global.elements.point.borderColor="rgba(255, 0, 0, 1)";
Chart.defaults.global.elements.point.radius=5;
// Time Series chart legend, title, font settings
Chart.defaults.global.defaultFontColor="#0000ff";
Chart.defaults.global.legend.display=true;
Chart.defaults.global.legend.labels.fontColor="#ff0000";
Chart.defaults.global.legend.position="bottom";
Chart.defaults.global.title.text="Title of line chart";
Chart.defaults.global.title.display=true;
2. 在應用程式編輯器中新增下列類別：
.ptc-TimeSeries {
height: 400px;
}
3. 在時間序列圖的「類別」欄位中輸入新類別。
1. 在 JavaScript 編輯器中輸入下列內容：
Chart.defaults.global.legend.position="bottom";
Chart.defaults.global.legend.labels.fontColor="#5bb73b";
Chart.defaults.global.defaultFontColor="#007a3e";
Chart.defaults.global.defaultFontSize=14;
Chart.defaults.global.title.display=true;
//For timeseries LINES
Chart.defaults.global.elements.line.backgroundColor="#ffffff";
Chart.defaults.global.elements.line.borderColor="#5bb73b";
2. 在應用程式編輯器中新增下列類別：
.ptc-TimeSeries {
height: 400px;
}
3. 在時間序列圖的「類別」欄位中輸入新類別。
如需可以更新的屬性之完整清單，請參閱 https://www.chartjs.org/docs/latest。
如需詳細資訊，請參閱在 Vuforia Studio 中使用 JavaScript與應用程式樣式。