JavaScript圖表工具FusionCharts入門教程(28)：了解重疊的柱形圖和條形圖

---

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圖表。

點擊下載FusionCharts最新版

在3.13.0版中，F(xiàn)usionCharts提出了一個聰明而有效的條形圖來顯示您的數(shù)據(jù)-重疊圖表。在此圖表中，兩個數(shù)據(jù)系列重疊。數(shù)據(jù)系列的圖的寬度不同，這使圖表易于比較。

FusionCharts Suite XT提供的不同類型的重疊圖表為：

• 重疊列2D圖表
• 重疊的條形二維圖

重疊列2D圖表

重疊列2D圖表由兩組或更多組重疊列組成，如下圖所示：

在此示例中，我們創(chuàng)建一個重疊的二維列圖表，比較公共部門和私營部門之間的“人均醫(yī)療保健支出”。

要創(chuàng)建重疊列二維圖表，請執(zhí)行以下步驟：

• 在JSON數(shù)據(jù)中，以"<attributeName>": "<value>"格式設(shè)置屬性及其對應(yīng)的值。
• 使用type屬性指定圖表類型。要渲染重疊的2D柱形圖，請設(shè)置overlappedColumn2D。
• 使用renderAt屬性設(shè)置容器對象。
• 使用width和height屬性指定圖表的尺寸。
• 使用dataFormat屬性設(shè)置要傳遞給圖表對象的數(shù)據(jù)類型（JSON / XML）。

有關(guān)屬性的詳細(xì)列表，請參考重疊列2D圖表的圖表屬性頁面。

重疊的2D柱形圖如下所示：

重疊酒吧2D圖

重疊條形2D圖表由兩組或更多組重疊條形組成，如下圖所示：

渲染重疊的二維條形圖，請將type屬性的值從更改overlappedColumn2D為overlappedBar2D。其余數(shù)據(jù)結(jié)構(gòu)保持不變。

有關(guān)屬性的詳細(xì)列表，請參見重疊的條形2D圖表的圖表屬性頁面。

重疊的條形2D圖表如下所示：

---

想要購買FusionCharts Suite XT正版授權(quán)，或了解更多產(chǎn)品信息請點擊【咨詢在線客服】