FushionCharts

FushionCharts官网：http://www.fusioncharts.com/

在线Demo：http://www.fusioncharts.com/free/demos/Blueprint/

首先我们需要做的准备工作就是下载一个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. myChart.setDataURL("Data.xml");
5. myChart.render("chartdiv");
6. }
7. </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文件代码