彩票走势图

JavaScript图表工具FusionCharts入门教程(十八):柱形图

翻译|使用教程|编辑:吴园园|2020-05-08 14:33:14.703|阅读 204 次

概述:柱形图和条形图用矩形水平或垂直条形表示数据。这些图表类型属于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 Suite XT最新试用版

Column 2D图表

柱形图和条形图用矩形水平或垂直条形表示数据。条形的高度与它们代表的值成正比。在柱状图的情况下,numeric values沿y轴data labels绘制图,沿x轴绘制图。而在条形图中,数值沿x轴绘制,数据标签沿y轴绘制。当您要比较值时,最适合使用柱形图和条形图。


JavaScript图表工具FusionCharts入门教程(十八):柱形图

在此示例中,让我们创建第一个柱形图,以显示Harry's SuperMart过去一年的月收入。我们已沿x轴绘制了月份,并沿y轴绘制了收入(数值)。

要创建单系列二维柱状图,请执行以下步骤:

  • 在JSON数据中,以"": ""格式设置属性及其对应的值。
  • 使用type属性指定图表类型。要呈现柱形图,请设置column2d。
  • 使用renderAt属性设置容器对象。
  • 使用width和height属性指定图表的尺寸。
  • 使用dataFormat属性设置要传递给图表对象的数据类型(JSON / XML)。
  • 根据传递给的值dataFormat,设置dataSource将从中获取数据的属性(JSON / XML)。
  • 使用对象value内的属性指定数据项的值data。

column3D图表

要以3D形式绘制柱形图,请将type属性的值从更改column2D为column3D。其余数据结构保持不变。

单系列柱形3D图表如下所示:

Bar 2D图表

现在,让我们创建一个二维条形图。

 在下面的图表中,我们显示了一家超市中五个销售最高的商店。销售数字沿x轴绘制,商店名称沿y轴绘制。

要渲染2D条形图,请将设置type为bar2d。单系列条形2D图表如下所示:


条形3D图表

要以3D渲染条形图,请将type属性的值从更改bar2D为bar3D。其余数据结构保持不变。

单系列条形3D图表如下所示:


 ====================================================

想了解更多关于FusionCharts  XT资源,请点击此处查看

想要了解或者购买FusionCharts XT正版授权的朋友欢迎

关注下方微信公众号,及时获取产品最新消息和最新资讯


标签:

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

文章转载自:

为你推荐

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

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

FusionCharts XT

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

PowerCharts XT

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

FusionWidgets XT

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

FusionMaps XT

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

扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP