使用小工具 > 2D > 柱狀圖 (Bar Chart)
  
柱狀圖 (Bar Chart)
此小工具的功能為何？
「柱狀圖」小工具可於柱狀圖中顯示資料。
* 
資料必須繫結至柱狀圖。
使用此小工具的時機？
柱狀圖使用時機：
• 想在體驗中顯示資料。
• 想比較相同資料集合中的不同數值。
還有任何特殊屬性、服務、事件、動作嗎？
欲檢視常用小工具屬性、服務、事件等清單，可參閱 共通的小工具屬性、服務、事件。
下表列出此小工具專屬的屬性、服務以及事件。
屬性
描述
圖表選項
按一下「圖表選項」旁邊的編輯圖示，以存取「顯示 X 軸的格線」設定。
服務
JavaScript
描述
更新圖表
updateChart
更新圖表。
動作中的小工具
此範例為小工具可能的外觀！
使用所必須的最少步驟
近似外觀
1. 拖曳「柱狀圖」小工具至畫布上。
2. 從「資料」窗格中，透過資料集合中的數字屬性，搜尋具有服務的實體。
3. 一旦新增該服務之後，將「所有項目」拖曳至小工具上，並選擇「選擇繫結目標」視窗上的「資料」。
4. 在「資料」窗格的「組態」之下，選取「啟動時叫用」核取方塊。
5. 從「X 軸欄位」下拉式清單中選擇屬性。在此範例中，我們選擇「速度」。
6. 從「Y 軸欄位」下拉式清單中選擇屬性。在此範例中，我們選擇「RPM」。
使用 JavaScript 與 CSS 對小工具進行樣式化處理
您可使用 JavaScript 對小工具進行樣式化處理！以下是範例：
* 
請記住，最好為類別指定唯一名稱，從而不與其他類別或 OOTB 屬性相衝突。
範例
近似外觀
1. 在 JavaScript 編輯器中輸入下列內容：
Chart.defaults.global.legend.position="bottom";
Chart.defaults.global.legend.labels.fontColor="#912f46";
Chart.defaults.global.defaultFontColor="#00acc8";
Chart.defaults.global.defaultFontSize=20;
Chart.defaults.global.title.display=true;
2. 在應用程式編輯器中新增下列類別：
.ptc-barchart {
height: 500px;
}
3. 在柱狀圖的「類別」欄位中輸入新類別。
如需詳細資訊，請參閱在 Vuforia Studio 中使用 JavaScript與應用程式樣式。
繫結 ThingWorx 資料後的輔助組態欄位
在繫結 ThingWorx 資料至小工具之後，隨即在下拉式清單中顯示某些欄位的選項。舉例來說，如果您繫結「所有項目」至「柱狀圖」小工具，並選取「選取繫結目標」視窗上的「資料」，則「X 軸欄位」與「Y 軸欄位」屬性都會出現可用選項。