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

---

FusionCharts Suite XT是全面的跨平臺(tái)、跨瀏覽器JavaScript圖表套包，其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT 、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至簡(jiǎn)單的HTML頁(yè)面。它是你值得信賴的JavaScript圖表解決方案，目前在全球有45萬(wàn)用戶選擇Fusioncharts來(lái)制作專業(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過(guò)去一年的月收入。我們已沿x軸繪制了月份，并沿y軸繪制了收入（數(shù)值）。

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

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

column3D圖表

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

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

Bar 2D圖表

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

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

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

條形3D圖表

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

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

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

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

想要了解或者購(gòu)買FusionCharts XT正版授權(quán)的朋友歡迎

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