JavaScript图表工具FusionCharts入门教程(31)：如何创建滚动图（一）

---

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中可用的滚动图类型为：

• 滚动列二维图
• 滚动条2D图表
• 滚动2D图表
• 滚动区域2D图表
• 滚动堆积列二维图表
• 滚动堆积条形二维图
• 滚动组合二维图表（单个Y）
• 滚动组合2D图表（双Y）
• 滚动多系列堆积柱2D
• 滚动多系列堆积列2D +线（双Y）

滚动列2D图表

让我们创建一个滚动2D图表来绘制2012——2013财年的销售趋势。
要创建滚动列二维图表，请执行以下步骤：

• 在JSON数据中，以"<attributeName>": "<value>"格式设置属性及其对应的值。
• 使用type属性指定图表类型。要呈现滚动列2D图表，请设置scrollcolumn2d。
• 使用renderAt属性设置容器对象。
• 使用width和height属性指定图表的尺寸。
• 使用dataFormat属性设置要传递给图表对象的数据类型（JSON / XML）。

有关属性的详细列表，请参阅滚动2D图表的图表属性页面。
上面代码的滚动2D图表如下所示：

滚动条2D图表

现在，让我们创建一个滚动条二维图表。要以2D呈现滚动条形图，请将type属性的值从更改scrollColumn2D为scrollBar2D。其余数据结构保持不变。
有关属性的详细列表，请参阅滚动条2D图表的图表属性页面。
单系列滚动条2D图表如下所示：

滚动线2D图表

现在，让我们创建一个滚动2D图表。要以2D渲染滚动折线图，请将type属性的值从更改scrollBar2D为scrollline2d。其余数据结构保持不变。
有关属性的详细列表，请参见滚动线2D图表的图表属性页面。
单系列滚动线二维图表如下所示：

滚动区域2D图表

让我们创建滚动区域2D图表。要以2D渲染滚动区域图，请将type属性的值从更改scrollline2d为scrollarea2d。其余数据结构保持不变。
有关属性的详细列表，请参见滚动区域2D图表的图表属性页面。
单系列滚动区域2D图表如下所示：

滚动堆积列2D图表

堆叠图表是多系列图表，其绘图数据集彼此重叠。现在，让我们创建一个滚动堆叠的二维列图表。该示例将绘制2017财年至2018财年产品与服务的销售比较。
要以2D渲染滚动堆叠的柱状图，请将type属性的值更改为scrollstackedcolumn2d。
有关属性的详细列表，请参阅滚动堆叠式2D图表的图表属性页面。
滚动堆叠的二维列图表如下所示：

滚动堆积条形图2D图

让我们创建一个滚动堆积的2D条形图。要以2D渲染滚动堆叠的条形图，请将type属性的值更改为scrollStackedBar2D。
有关属性的详细列表，请参阅滚动堆叠式2D图表的图表属性页面。
滚动堆积的条形2D图表如下所示：

滚动组合2D图表

现在，我们将创建一个滚动组合2D图表，以绘制2017-2018财年的收入和所获利润（以美元为单位）以及利润。
要渲染滚动组合2D图表，请将type属性的值更改为scrollcombi2d。
有关属性的详细列表，请参阅滚动组合2D图表的图表属性页面。
滚动组合2D图表如下所示：

滚动组合2D双Y轴图表

要创建具有双y轴的滚动组合2D图表，请将type属性的值更改为scrollcombidy2d。在这里，我们将绘制2018-2019财年的收入和所获利润（以美元为单位）以及利润百分比。
有关属性的详细列表，请参阅滚动组合2D双Y轴图表的图表属性页面。
这样创建的滚动组合2D图表（双Y）图表如下所示：

现在，让我们自定义图表的外观和属性。

---

想要购买FusionCharts Suite XT正版授权，或了解更多产品信息请点击