彩票走势图

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

翻译|使用教程|编辑:杨鹏连|2020-08-12 11:11:51.713|阅读 158 次

概述:滚动图用于避免图形混乱,从而提供干净的外观。滚动图可以在较小的空间中显示大量的数据图。本文将介绍如何创建滚动图。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

FusionCharts Suite XT是全面的跨平台、跨浏览器JavaScript图表套包,其中包括FusionCharts XTPowerCharts 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正版授权,或了解更多产品信息请点击


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP