半岛外围网上直营

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

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

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

# 界面/图表报表/文档/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@ke049m.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关产品
FusionWidgets XT

FusionWidgets XT操作简单,提供各种实时图表、金融图表、支持图表自动更新

FusionCharts XT

50万用户首选的跨平台、跨浏览器的JavaScript/HTML图表解决方案

FusionCharts Suite XT

全面的跨平台、跨浏览器JavaScript图表解决方案套包,拥有100+图表和2000+地图

PowerCharts XT

适用于专业领域的高级图表控件

FusionMaps XT

功能强大的JavaScript (HTML5)地图工具,可以根据内容、地区来展现及描绘地理数据或者其它实体。

扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP
利记足球官网(官方)网站/网页版登录入口/手机版登录入口-最新版(已更新) 真人boyu·博鱼滚球网(官方)网站/网页版登录入口/手机版登录入口-最新版(已更新) 最大网上PM娱乐城盘口(官方)网站/网页版登录入口/手机版登录入口-最新版(已更新) 正规雷火竞技官方买球(官方)网站/网页版登录入口/手机版登录入口-最新版(已更新) 雷火竞技权威十大网(官方)网站/网页版登录入口/手机版登录入口-最新版(已更新) boyu·博鱼信誉足球官网(官方)网站/网页版登录入口/手机版登录入口-最新版(已更新) 权威188BET足球网(官方)网站/网页版登录入口/手机版登录入口-最新版(已更新) 正规188BET足球大全(官方)网站/网页版登录入口/手机版登录入口-最新版(已更新)