FusionCharts绘图插件(一)——初识fusioncharts

来源：互联网发布：网络兼职在校学生编辑：程序博客网时间：2024/04/30 15:56

做项目完成数据统计的时候，需要将统计数据进行图形化分析，也就是将数据做成各种图表，即柱状图和折线图，由此接触了FusionCharts绘图插件，经过多日的查询资料和做Demo，终于将项目功能完成，特此总结以备将来查阅。

FusionCharts的简介和安装

简介

FusionCharts Free是FusionCharts提供的一个免费版本，用于个人学习和参考，但是功能依然强大，图形类型依然丰富。这里介绍了都是基于FusionCharts Free的，商业版本所支持的图表种类更多，并提供各种售后服务。
我所使用的版本是旧版本，所以FusionCharts free 还是使用的flash图表组件解决方案，能够被 ASP.NET, PHP, JSP, ColdFusion, Ruby on Rails, VB.NET,J2EE,简单 HTML 页面甚至PPT调用。我们不需要知道任何Flash的知识，只需要了解你所用的编程语言而已。
那么我们先大概看一下它所支持的常用的图表
柱状图2D
折线图2D
饼状图2D
环形图2D
当然，FusionCharts支持多达90+种2D、3D图形，所以能够完全满足所有的项目需要。

目录结构

由于项目中使用的FusionCharts版本是version 3.2.1，所以下载的目录结构如图所示：
这里写图片描述
Charts ：里面包含着所有的SWF文件，如果你的Web项目需要创建图像，则导入相应的SWF文件即可。
Code ：里面包含了所支持的各种编程语言以及其所有的示例代码。
Contents ：包含了文档，也就是API，包含了FusionCharts的使用方法。
Gallery ：包含了一些图像的创建例子Demo。
Tools：包含几种网页工具，有xml文本转换为json、Flash在各个平台的安装使用方法、xml数据生成工具
SourceCode：FusionCharts javascript文件就放在这个目录下，这些文件能够帮组我们以一种友好的方式将图像插入到页面中。
【补充】最新版本的FusionCharts的目录结构已经改变，如下图所示
这里写图片描述
其中最大的差别就是新版本中已经没有了charts目录，也就是各种swf文件，通过使用发现应该是将图表的实现改为了由html和JS实现了，这是一个很大的进步。之后我们再比较两者在使用上的区别。

第一个FusionCharts图表

项目中应用FusionCharts插件最常用的方法就是在JS中加载数据图表，所以我们就直接采用如下的方法进行加载。

创建工程
新建文件夹，然后将各种所需要的文件放到如图所示的文件夹中：
创建XML数据文件
创建xml文件：Data.xml，并将其放入到xml文件夹中，文件内容如下：

<graph caption='每月销售额柱形图' xAxisName='月份' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'>      <set name='一月' value='100' color='AFD8F8' />      <set name='二月' value='200' color='F6BD0F' />      <set name='三月' value='300' color='8BBA00' />      <set name='四月' value='120' color='FF8E46' />      <set name='五月' value='220' color='008E8E' />      <set name='六月' value='330' color='D64646' />      <set name='七月' value='210' color='8E468E' />      <set name='八月' value='544' color='588526' />      <set name='九月' value='565' color='B3AA00' />      <set name='十月' value='754' color='008ED6' />      <set name='十一月' value='441' color='9D080D' />      <set name='十二月' value='654' color='A186BE' />  </graph>

上面的xml文件中，graph标签是root元素，也就是根节点，同chart标签功能相似，在该根标签下可以设置图表的基本属性，如x轴名称、y轴名称、图表标题、数值格式等。关于这些属性会在以后的博客中描述到。其中里面的set标签，name是指x轴坐标值，value是指y轴坐标值，color是指数据线的颜色，这里还有各种属性还是以后再说。

html代码

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>fusionchartsDemo</title>        <script type="text/javascript" src="js/FusionCharts.js"></script>               </head>    <body>        <div id="chartdiv" align="center"></div>        <script type="text/javascript">            var chart = new FusionCharts("swf/Line.swf", "ChartId", "500", "300", "0", "1" );            chart.setDataURL("xml/Data.xml");            chart.render("chartdiv");        </script>     </body></html>

生成的图表

新版的创建方法

新版本的FusionCharts已经不需要引用swf文件了，并且已经支持了json的数据格式，下面我们来看下新版的html代码。

<html>    <head>        <title>My first chart</title>        <script type="text/javascript" src="js/fusioncharts.js"></script>        <script type="text/javascript" src="js/themes/fusioncharts.theme.fint.js"></script>        <script type="text/javascript">            FusionCharts.ready(function(){            var revenueChart = new FusionCharts({                "type": "column2d",                "renderAt": "chartContainer",                "width": "500",                "height": "300",                "dataFormat": "json",                "dataSource":  {                  "chart": {                    "caption": "Monthly revenue for last year",                    "subCaption": "Harry's SuperMart",                    "xAxisName": "Month",                    "yAxisName": "Revenues (In USD)",                    "theme": "fint"                 },                 "data": [                    {                       "label": "Jan",                       "value": "420000"                    },                    {                       "label": "Feb",                       "value": "810000"                    },                    {                       "label": "Mar",                       "value": "720000"                    },                    {                       "label": "Apr",                       "value": "550000"                    }                                                 ]              }          });            revenueChart.render();        })        </script>    </head>    <body>      <div id="chartContainer"></div>    </body></html>

生成的图表如下图所示，明显感觉更加漂亮了，还是新版本好啊！！
这里写图片描述

扩展：HighCharts

HighCharts是一款功能强大的图表分析软件，基于HTML5和JS，界面更加优美，流畅，同时支持Json数据格式，个人版依旧是免费的，使用起来也非常方便，对于这两款图表插件，功能已经非常接近了，但是FusionCharts作为老牌图表分析插件，所支持的图形更加全面，具体的分析可参考如下链接，PS：这里介绍的版本有点偏老，功能现在已经基本都实现了，所以仅供参考！
1.HighCharts和FusionCharts对比
2.HighCharts和FusionCharts支持图表对比
3.HighCharts各种图表演示

总结：面对新的事物，新的东西，要敢于尝试，坚持做下去，说不定就成功了，因为我一开始下载后做Demo一直无法显示，总是报各种错误，什么error to loading Data,什么No data to display。。。明明就是那么几行代码，但是生生的折腾了我好几天根本显示不出图表。所幸的是工作还得继续做啊！没办法，休息了一个周末，周一从头再来，终于将图表显示出来了，具体各种错误以及解决办法和更多的使用方法会在后续持续更新。。。。。

1 0