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

---

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

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

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

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

多系列柱二維圖

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

術(shù)語
1個 標題

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

2 子標題

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

3 帆布面積

畫布區(qū)域是指繪制圖表數(shù)據(jù)的區(qū)域，不包括呈現(xiàn)標題，圖例和軸名稱的區(qū)域。

4 X軸

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

5 X軸標簽

X軸標簽是在圖表的X軸上顯示的數(shù)據(jù)點的名稱。

6 Y軸

X軸標簽是在圖表的X軸上顯示的數(shù)據(jù)點的名稱。

7 工具提示

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

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

要創(chuàng)建多系列2D柱形圖，請執(zhí)行以下步驟：

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

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

多系列列3D圖表

要在3D中渲染多系列柱形圖，請將type屬性的值從更改msColumn2D為msColumn3D。其余數(shù)據(jù)結(jié)構(gòu)保持不變。

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

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

多系列酒吧2D圖

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

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

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

多系列條形3D圖表

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

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

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

多系列折線圖

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

要呈現(xiàn)多系列折線圖，請將設(shè)置type為msline。

多系列折線圖如下所示：

多系列區(qū)域圖

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

多系列面積圖如下所示：

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

---

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