FusionCharts基本使用

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

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

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

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

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

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

<chart caption='my First Charts'>
 <set name='Jan' value='462' />
 <set name='Feb' value='857' />
 <set name='Mar' value='671' />
 <set name='Apr' value='494' />
 <set name='May' value='761' />
 <set name='Jun' value='960' />
 <set name='Jul' value='629' />
 <set name='Aug' value='622' />
 <set name='Sep' value='376' />
 <set name='Oct' value='494' />
 <set name='Nov' value='761' />
 <set name='Dec' value='960' />
</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就可以用了。

评论

12 楼 Shuhui 2014-08-04  

[align=right][align=center][size=large][size=small][color=brown]

[flash=200,200][flash=200,200][flash=200,200]

			[flash=200,200][url][url][list]
			[*][list]
			[*][*] 引用 [u][u][u][u][u][u][u][i][i][b][b][/b][/b][/i][/i][/u][/u][/u][/u][/u][/u][/u]
			[/list]
			[/list][/url][/url][/flash]

[/flash][/flash][/flash]|||||

||
|

|

[/color][/size][/size][/align][/align]                              

11 楼 liuweihug 2014-05-27  

fusioncharts 图片2种方式使用java导出 - 项目实战 - IT工作生活这点事。Just Such So!
http://www.suchso.com/projecteactual/fusioncharts-image-output-java.html

10 楼 strawren 2013-12-10  

这个fusionchart免费的吗

9 楼 javaerman 2013-12-06  

thank you 希望以后多多交流

8 楼 llnyxxzj 2013-11-28  

[flash=200,200][/flash]

7 楼 thjjava 2013-07-16  

很好，正在做这样的图表，3Q

6 楼 rick123456 2013-01-09  

我也正在用这款东东，我也翻译了一些FusionCharts的技术文,档,

Flash图表组件FusionCharts使用教程大全:http://www.evget.com/zh-CN/info/catalog/18405.html

望多指点

5 楼 ynshun 2011-12-03  

欢迎大家相互交流，有任何需要都可以联系我哦

4 楼 yeanjone 2011-11-14  

我想问下，为什么我画柱状图和折线图的混合图时，引用的那个js报错了呢？？

3 楼 yeanjone 2011-11-10  

嘿嘿，最近正在学，谢谢分享！！！有不懂的问题能像你请教吗？？

2 楼 ynshun 2011-08-31  

大家相互学习，能帮上忙我也很高兴啊！

1 楼 南通ori 2011-08-25  

我正在用。想做个3D饼图。3Q