JavaScript圖表工具FusionCharts入門教程(29)：了解組合圖

---

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最新版

組合圖類似于多系列圖。它們使您可以在同一圖表上繪制多個數據集。但是使用組合圖表的另一個好處是，您還可以在同一圖表上繪制多種圖表類型。例如，您可以在同一圖表畫布上顯示柱形圖，折線圖和面積圖。

組合圖可以以2D或3D呈現，可以具有單個或兩個y軸，并且本質上可以堆疊或多個系列。

FusionCharts Suite XT提供的組合圖為：

• 二維單Y軸組合圖
• 3D單Y軸組合圖
• 二維雙Y軸組合圖
• 3D雙Y軸組合圖
• 列3D +線單Y軸圖表
• 列3D +線雙Y軸圖
• 堆積柱二維線單Y軸圖
• 堆疊柱式3D線單Y軸圖表
• 堆積柱二維線雙Y軸圖
• 堆疊式3D線雙Y軸圖表
• 堆積面積2D線雙Y軸圖表
• 多系列堆積柱二維+線雙Y軸圖表

2D單Y軸組合圖

讓我們創建我們的第一個組合圖，以展示實際收入，預計收入和去年每個月獲得的利潤的比較。使用不同的圖表類型繪制了這三個指標-使用柱形圖繪制了實際的收入，使用折線圖繪制了預期的收入，使用面積圖繪制了所獲利潤。

要以2D方式創建單個y軸組合圖，請執行以下步驟：

• 在JSON數據中，以"": ""格式設置屬性及其對應的值。
• 使用type屬性指定圖表類型。要呈現多系列組合圖，請設置mscombi2D。
• 使用renderAt屬性設置容器對象。
• 使用width和height屬性指定圖表的尺寸。
• 使用dataFormat屬性設置要傳遞給圖表對象的數據類型（JSON / XML）。

有關屬性的詳細列表，請參閱單個y軸組合圖的圖表屬性頁面。
具有單個y軸的2D組合圖如下所示：

3D單Y軸組合圖＃

要在3D中渲染單個y軸組合圖，請將type屬性的值從更改mscombi2d為mscombi3d。其余數據結構保持不變。

3D中的單個y軸組合圖如下所示：

二維雙Y軸組合圖

現在，讓我們創建2D的雙Y軸組合圖。為此，將type屬性的值從更改mscombi2d為mscombidy2d。

在此圖表中，我們將顯示收入，利潤和利潤百分比之間的比較。收入和利潤將顯示為美元金額，但是利潤百分比將需要不同的單位-百分比。這些不能在單個y軸上繪制。如果您要繪制兩個具有兩個不同數字單位的數據，則FusionCharts Suite XT允許您具有兩個y軸，一個主要y軸和一個次要y軸。

因此，我們在主要的y軸（左側的一個）上繪制了美元金額，在次要的y軸（右側的一個）上繪制了利潤百分比。

有關屬性的詳細列表，請參閱2D雙Y軸組合圖的圖表屬性頁面。

具有雙Y軸的2D組合圖如下所示：

您還可以使用樣條線和樣條線區域構建以上組合圖。若要將任何數據集定義為樣條曲線或樣條曲線區域，請將renderAs屬性分別設置為spline或splineArea。

在上面的例子，我們繪制的利潤％的spline和盈利的splineArea。經過這些更改，圖表如下所示：

3D雙Y軸組合圖

現在，讓我們在3D中創建一個雙Y軸組合圖。為此，將type屬性的值從更改mscombidy2d為mscombidy3d。

在此圖表中，我們將顯示收入，利潤和利潤百分比之間的比較。收入和利潤將顯示為美元金額，但是利潤百分比將需要不同的單位-百分比。這些不能在單個y軸上繪制。如果您要繪制兩個具有兩個不同數字單位的數據，則FusionCharts Suite XT允許您具有兩個y軸，一個主要y軸和一個次要y軸。

因此，我們在主要的y軸（左側的一個）上繪制了美元金額，在次要的y軸（右側的一個）上繪制了利潤百分比。

有關屬性的詳細列表，請參閱3D雙Y軸組合圖的圖表屬性頁面。

3D中的雙Y軸組合圖如下所示：

3D欄+線單Y軸圖表

現在，讓我們在3D中創建一個柱線多線圖表。為此，將type屬性的值設置為mscolumnline3d。

有關屬性的詳細列表，請參考3D列+ y軸單線圖表的圖表屬性頁面。

下圖將顯示一年的固定成本，可變成本和預算成本之間的比較。固定成本和可變成本將顯示在列中，而預算成本將顯示在一行中。

上面的多系列序列圖如下：

3D欄+線雙Y軸圖表

要渲染具有雙y軸的3D柱形圖和折線形多系列圖表，請將type屬性的值從更改mscolumnline3d為mscolumn3dlinedy。

有關屬性的詳細列表，請參閱3D列+ y線雙Y軸圖表的圖表屬性頁面。

該圖表如下圖所示：

堆積柱形圖2D線單Y軸圖表

現在，讓我們創建二維堆疊柱狀圖和折線圖的組合。為此，將typeattribute 的值設置為stackedcolumn2dline。

有關屬性的詳細列表，請參閱堆積的2D線單y軸圖表的圖表屬性頁面。

下圖將顯示Harry's SuperMart的食品和非食品收入之間的比較。有了它，利潤將用折線圖顯示。

堆積柱形圖3D線單Y軸圖表

要使用單個y軸渲染堆積的3D柱形圖和折線圖，請將type屬性的值從更改stackedcolumn2dline為stackedcolumn3dline。其余數據結構保持不變。

有關屬性的詳細列表，請參閱堆積的2D線單y軸圖表的圖表屬性頁面。

上面堆疊的3D列線如下所示：

---

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