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來制作專業(yè)的JavaScript圖表。

點(diǎn)擊下載FusionCharts Suite XT最新試用版

Column 2D圖表

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

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

要創(chuàng)建單系列二維柱狀圖，請執(zhí)行以下步驟：

• 在JSON數(shù)據(jù)中，以"": ""格式設(shè)置屬性及其對應(yīng)的值。
• 使用type屬性指定圖表類型。要呈現(xiàn)柱形圖，請?jiān)O(shè)置column2d。
• 使用renderAt屬性設(shè)置容器對象。
• 使用width和height屬性指定圖表的尺寸。
• 使用dataFormat屬性設(shè)置要傳遞給圖表對象的數(shù)據(jù)類型（JSON / XML）。
• 根據(jù)傳遞給的值dataFormat，設(shè)置dataSource將從中獲取數(shù)據(jù)的屬性（JSON / XML）。
• 使用對象value內(nèi)的屬性指定數(shù)據(jù)項(xiàng)的值data。

column3D圖表

要以3D形式繪制柱形圖，請將type屬性的值從更改column2D為column3D。其余數(shù)據(jù)結(jié)構(gòu)保持不變。

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

Bar 2D圖表

現(xiàn)在，讓我們創(chuàng)建一個(gè)二維條形圖。

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

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

條形3D圖表

要以3D渲染條形圖，請將type屬性的值從更改bar2D為bar3D。其余數(shù)據(jù)結(jié)構(gòu)保持不變。

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

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

想了解更多關(guān)于FusionCharts  XT資源，請點(diǎn)擊此處查看

想要了解或者購買FusionCharts XT正版授權(quán)的朋友歡迎咨詢慧都官方客服

關(guān)注下方微信公眾號，及時(shí)獲取產(chǎn)品最新消息和最新資訊