FusionCharts基本使用

前些天根据项目需要，使用到了FusionCharts做图形报表，感觉确实挺炫。一下便是我的个人学习笔记，供初学者参考，我们先来看一下用FusionCharts设计出来的效果图。

当然，还有很多样式，很多图形，如柱状图，线性图等。具体有些啥样式在这里我就不多说了，反正很炫很强大，我们一起来做出来就知道了。

       首先我们需要做的准备工作就是下载一个FusionCharts数据包，里面包括了我们后面将试用的Jar包和Js和CSS文件等，做好了这个步骤后我们可以开始编码了。把我们下载回来的FusionCharts包拷贝到MyEclipse项目中的WebRoot目录下，我这里整理成了一下形式

做完这一步后，导入下载FusionCharts包中的两个Jar文件

OK了，准备工作也就做完了，正式进入写代码的时候了。现在我们就来做一个Demo出来供大家学习

Js代码代码  

1. <script type="text/javascript">  
2.     function showFusionCharts(){  
3.         var myChart = new FusionCharts("FusionCharts/Charts/Pie3D.swf", "myChartId", "1000", "800");  
4.           
5.         myChart.setDataURL("Data.xml");  
6.         myChart.render("chartdiv");  
7.     }  
8. </script>  

Js代码代码  

1. <chart caption='my First Charts'>  
2.  <set name='Jan' value='462' />  
3.  <set name='Feb' value='857' />  
4.  <set name='Mar' value='671' />  
5.  <set name='Apr' value='494' />  
6.  <set name='May' value='761' />  
7.  <set name='Jun' value='960' />  
8.  <set name='Jul' value='629' />  
9.  <set name='Aug' value='622' />  
10.  <set name='Sep' value='376' />  
11.  <set name='Oct' value='494' />  
12.  <set name='Nov' value='761' />  
13.  <set name='Dec' value='960' />  
14. </chart>  

 注意：

在使用在该FusionCharts对象是，别忘了导入FusionCharts.js文件。

var myChart = new FusionCharts("FusionCharts/Charts/Pie3D.swf", "myChartId", "1000","800");
这一句实例化了一个FusionCharts对象出来，其中第一个参数FusionCharts/Charts/Pie3D.swf就是指出你需要显示的图标样式所对应的目录，根据我前面FusionCharts在myEclipse中的布局，打开charts目录就是了，这里面就是你对应的样式了；

第二个参数myChartId是对该实例化的FusionCharts对象定义的一个ID号，可以自己根据自己需要随意取；

第三个和第四个参数分别指明该实例化的FusionCharts对象的长和宽。

myChart.render("chartdiv");      这一句指明了FusionCharts对象的显示地方，我这里是定义了一个<div id="chartdiv>

myChart.setDataURL("Data.xml"); 这一句指明了FusionCharts对象的数据来源，我这里为了方便，写了一个XML文件Data.xml放到了WebRoot跟目录下。

 

 

最后，在适当的地方调用该定义FusionCharts对象的方法就可以看到效果了，简单吧。

 

最后来总结一下：

1、准备工作整理下载回来的FusionCharts数据包，保留Charts样式、FusionCharts.js、编写XML文件。

2、导入FusionCharts.js文件

3、编写jsp文件代码

 

 

由于时间原因，写得有点零乱，望各位网友谅解。我这里把几个相关文件都留在了附件里面，有需要的朋友可以下载看一下，解压后直接导入MyEclipse就可以用了。