JavaScript圖表工具FusionCharts入門教程（十八）：柱形圖

---

FusionCharts Suite XT是全面的跨平臺、跨瀏覽器JavaScript圖表套包，其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT 、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至簡單的HTML頁面。它是你值得信賴的JavaScript圖表解決方案，目前在全球有45萬用戶選擇Fusioncharts來制作專業的JavaScript圖表。

點擊下載FusionCharts Suite XT最新試用版

Column 2D圖表

柱形圖和條形圖用矩形水平或垂直條形表示數據。條形的高度與它們代表的值成正比。在柱狀圖的情況下，numeric values沿y軸data labels繪制圖，沿x軸繪制圖。而在條形圖中，數值沿x軸繪制，數據標簽沿y軸繪制。當您要比較值時，最適合使用柱形圖和條形圖。

在此示例中，讓我們創建第一個柱形圖，以顯示Harry's SuperMart過去一年的月收入。我們已沿x軸繪制了月份，并沿y軸繪制了收入（數值）。

要創建單系列二維柱狀圖，請執行以下步驟：

• 在JSON數據中，以"": ""格式設置屬性及其對應的值。
• 使用type屬性指定圖表類型。要呈現柱形圖，請設置column2d。
• 使用renderAt屬性設置容器對象。
• 使用width和height屬性指定圖表的尺寸。
• 使用dataFormat屬性設置要傳遞給圖表對象的數據類型（JSON / XML）。
• 根據傳遞給的值dataFormat，設置dataSource將從中獲取數據的屬性（JSON / XML）。
• 使用對象value內的屬性指定數據項的值data。

column3D圖表

要以3D形式繪制柱形圖，請將type屬性的值從更改column2D為column3D。其余數據結構保持不變。

單系列柱形3D圖表如下所示：

Bar 2D圖表

現在，讓我們創建一個二維條形圖。

在下面的圖表中，我們顯示了一家超市中五個銷售最高的商店。銷售數字沿x軸繪制，商店名稱沿y軸繪制。

要渲染2D條形圖，請將設置type為bar2d。單系列條形2D圖表如下所示：

條形3D圖表

要以3D渲染條形圖，請將type屬性的值從更改bar2D為bar3D。其余數據結構保持不變。

單系列條形3D圖表如下所示：

====================================================

想了解更多關于FusionCharts  XT資源，請點擊此處查看

想要了解或者購買FusionCharts XT正版授權的朋友歡迎

關注下方微信公眾號，及時獲取產品最新消息和最新資訊