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

點擊下載FusionCharts最新版

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

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

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

重疊列2D圖表

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

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

要創建重疊列二維圖表，請執行以下步驟：

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

有關屬性的詳細列表，請參考重疊列2D圖表的圖表屬性頁面。

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

重疊酒吧2D圖

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

渲染重疊的二維條形圖，請將type屬性的值從更改overlappedColumn2D為overlappedBar2D。其余數據結構保持不變。

有關屬性的詳細列表，請參見重疊的條形2D圖表的圖表屬性頁面。

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

---

想要購買FusionCharts Suite XT正版授權，或了解更多產品信息請點擊