JavaScript圖表工具FusionCharts入門教程(27)：創建多系列圖表

---

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

FusionCharts Suite XT包含多系列圖表，可繪制多個數據集的數據。例如，您可以使用多系列圖表繪制過去兩年中每個月收集的收入。多系列圖表可以繪制多個數據集的高點和低點，同時還可以進行比較。

FusionCharts Suite XT中提供的不同類型的多系列圖表為：

• 多系列柱二維圖
• 多系列列3D圖表
• 多系列條形二維圖
• 多系列條形3D圖表
• 多系列線形二維圖
• 多系列區域2D圖表

多系列柱二維圖

多系列柱形二維圖表的外觀如下所示：
多個系列的圖表

術語
1個 標題

標題（也稱為圖表標題）是圖表的標題。您可以為標題添加自定義文本。您還可以配置其字體屬性和外觀。

2 子標題

子標題（也稱為圖表標題）是圖表的子標題。您可以為子標題添加自定義文本。您還可以配置其字體屬性。

3 帆布面積

畫布區域是指繪制圖表數據的區域，不包括呈現標題，圖例和軸名稱的區域。

4 X軸

X軸是指圖表上水平（左右）延伸的一條線。

5 X軸標簽

X軸標簽是在圖表的X軸上顯示的數據點的名稱。

6 Y軸

X軸標簽是在圖表的X軸上顯示的數據點的名稱。

7 工具提示

當鼠標光標懸停在特定數據點上時，將顯示工具提示。它提供有關數據點的上下文相關信息。

讓我們創建一個多系列的2D柱形圖，顯示上一年度和本年度的季度收入之間的比較。這兩個數據集的列已使用不同的顏色進行了渲染，前一年為一列，當年為一列。這樣可以輕松解釋和比較數據。

要創建多系列2D柱形圖，請執行以下步驟：

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

有關屬性的詳細列表，請參閱多系列列2D圖表的圖表屬性頁面。
一個簡單的多系列2D柱形圖如下所示：

多系列列3D圖表

要在3D中渲染多系列柱形圖，請將type屬性的值從更改msColumn2D為msColumn3D。其余數據結構保持不變。

有關屬性的詳細列表，請參閱多系列列3D圖表的圖表屬性頁面。

3D中的多系列柱形圖如下所示：

多系列酒吧2D圖

讓我們繼續以2D方式創建多系列條形圖，該條形圖將顯示上個月不同商店中兩個主要類別的銷售額。

要以2D渲染多系列條形圖，請將設置type為msbar2d。

有關屬性的詳細列表，請參閱多系列條形2D圖表的圖表屬性頁面。

多系列條形3D圖表

要在3D模式下繪制多系列條形圖，請將type屬性的值從更改msBar2D為msBar3D。其余數據結構保持不變。

有關屬性的詳細列表，請參閱多系列條形3D圖表的圖表屬性頁面。

3D中的多系列條形圖如下所示：

多系列折線圖

現在，讓我們創建一個多系列折線圖，該圖將顯示一周內購物中心游客數量之間的比較。這兩個數據集的線段已使用不同的顏色進行了渲染，一個用于上周，一個用于本周。這樣可以輕松解釋和比較數據。

要呈現多系列折線圖，請將設置type為msline。

多系列折線圖如下所示：

多系列區域圖

要使多系列面積圖具有與上述相同的用例，請將設置type為msarea。

多系列面積圖如下所示：

請注意，定義的類別對象的數量應等于定義的數據對象的數量，也就是說，如果您提到十二個類別（十二個月），則兩個年份（2013和2014）的數據也應包含十二個數據對象（十二個）數據行）。否則，圖表將在該位置顯示空白區域。

---

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