FusionChart (一)

Posted on 2013-03-15 17:00 言冰的夏虫阅读(353) 评论(0) 编辑收藏举报

最近项目中打算使用图表软件来形象的总结显示业务的产生的运行情况。在网上找了很多关于图表软件的资料，主要是找到了JFreeChart和FusionChart。

其中JFreeChart是纯Java版本的，服务器端的图表显示组建。它是一个开源软件，试了一下，感觉挺好用，但是在动画方面的支持不是很强。如果只满足一般的图表显示的话

完全可以胜任一般的需求情况。

但是，项目组中提出可能会出现需要支持动画方面的软件，因此只好换了另一种图表软件FusionChart，该软件，我的理解是运行与客户端的图表软件，如浏览器方面。其支持的

数据格式为JSON与XML。因此从这数据数据格式的情况下，它完全是跨平台的，支持的显示方式很广，包括了ASP,ASP.NET,JSP,PHP,Perl,CGI,CF等等。因为其完全是通过js脚本

控制的，具有很好的平台支持性，与平台无关。

因此，从网上下载了一个破解版，其实完全可以从它的官网上下在一个免费版本，只不过，免费版本可能在用体验上不是很好，因为广告条。

下面，我介绍一下自己使用的情况。

首先，新建一个Java的Web工程FusionChartDemo，因为项目中我们是使用Java语言开发，因此只好使用一个Java的Web工程。其实在Web中的后端完全不必用到，只为以后

复杂的数据时，才可能用到，现在我做的Demo完全没有用到后端的程序，只需要一个容器Tomcat。

(一)、将破解版中的Charts文件夹Copy到工程的WebRoot中，需要注意的是，查看该文件夹中是否有一个FusionCharts.js文件，该文件很重要，是用来解析以后业务中js代码

的文件。其他的*.swf文件是FusionChart中图表模板文件。只有在该文件中存在模板，浏览器才能根据该模板进行画图。如果没有FusionCharts.js，需要下载一个。

(二)、在WebRoot文件夹下，新建一个Data.xml文件，该文件是FusionChart用来画图的数据来源。其中数据如下：

<?xml version="1.0" encoding="UTF-8"?>
<graph caption='Monthly Unit Sales' xAxisName='Month'
       yAxisName='Units' showNames='1' decimalPrecision='0'
       formatNumberScale='0'>
       <set name='Jan' value='462' color='AFD8F8'/>
       <set name='Feb' value='857' color='F6BD0F'/>
       <set name='Mar' value='671' color='8BBA00'/>
       <set name='Apr' value='496' color='FF8E46'/>
       <set name='May' value='761' color='008E8E'/>
       <set name='Jun' value='960' color='D64646'/>
       <set name='Jul' value='629' color='8E469E'/>
       <set name='Aug' value='622' color='588526'/>
       <set name='Sep' value='376' color='B3AA00' />
       <set name='Oct' value='494' color='008ED6'/>
       <set name='Nov' value='761' color='9D080D'/>
       <set name='Dec' value='960' color='A186BE'/>       
</graph>

(三)、在WebRoot下，新建一个chart.jsp文件。该文件主要是用来显示是图表的页面。在chart.jsp页面中插入上面的js文件的引用

<script language="javascript" type="text/javascript" src="Charts/FusionCharts.js"/>

(四)、在body中插入如下的代码：

   <div id="chartContainer"></div>
      <script type="text/javascript"> 
      var myChart=new FusionCharts("Charts/Column3D.swf","myChartId","600","350");
      myChart.setDataURL("Data.xml");
      myChart.render("chartContainer");      
      </script>

分析上面的代码，<div id="chartContainer"></div>是用来显示图表的。

var myChart=new FusionCharts("Charts/Column3D.swf","myChartId","600","350")是用来初始化图表的，FusionCharts的定义就在前面提到的FusionCharts.js

中，因此从此处可以看出，FusionCharts.js是必须，不能缺少。上面定义了一个对象FusionCharts。该对象的第一个参数是关于图表的模板，此处Charts/Column3D.swf是模板

的路径及模板的文件名称。对象的第二个参数是对象的Id值，该值可以用来在其他的js代码中表示所对应的图表对象，该值可以随便取，只要与其它的对像不重复就可以。对象的第

三个参数是图表的显示长度，此处是600，第四个参数是图表的显示宽度，此处是350。

myChart.setDataURL("Data.xml"); 该句是指示图表的数据来源，此处就是前面定义的Data.xml。

myChart.render("chartContainer");用来渲染图表的地方，此处是一个div的Id。

当将工程部署之后，在浏览器中打开chart.jsp后，显示的图表如下：

该图表是以flash的形式显示出来的。因此，如果没有显示出来图片的话，需要检查一下，你的浏览器上是否装了Flash插件。

上面的图表中显示的都是英文，当你将Data.xml文件中的一些英文改成中文的话，在浏览器红不能正确显示中文，反而出现了如下提示：

Invalid XML Data

按正常的情况，因为XML是用utf-8编码，应该能够正常显示中文，但在此处却没有正确显示。此时需要，将上述的Data.xml文件中的数据全部用UltraEdit打开，再进行存储，

以utf-8的格式存储为xml文件。之后，将其覆盖原来的文件，这样的话，应该能够正确显示中文了。如下图：

刷新页面返回顶部

言冰的夏虫

公告

FusionChart (一)