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正版授权，或了解更多产品信息请点击