彩票走势图

JavaScript图表工具FusionCharts入门教程(27):创建多系列图表

翻译|使用教程|编辑:杨鹏连|2020-07-23 09:47:15.287|阅读 109 次

概述:FusionCharts Suite XT包含多系列图表,可绘制多个数据集的数据,这些图表类型属于FusionCharts XT。下面让我们具体看看这些图表。

# 慧都年终大促·界面/图表报表/文档/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包含多系列图表,可绘制多个数据集的数据。例如,您可以使用多系列图表绘制过去两年中每个月收集的收入。多系列图表可以绘制多个数据集的高点和低点,同时还可以进行比较。

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


标签:

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

文章转载自:

为你推荐

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

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

FusionCharts XT

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

FusionWidgets XT

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

PowerCharts XT

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

FusionMaps XT

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

扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP