FusionCharts在Java中的基本使用（1）
一、介绍
FusionCharts是一个基于XML和Flash的图表组件，其中FusionCharts Free是免费的，其功能也十分强大、美观。
在线Demo：http://www.fusioncharts.com/free/demos/Blueprint/
其可以用在PHP、JSP、ASP等等。
二、常见的图表类型
1.Area图
2.Bar图
3.Column图
4.Line图
5.Pie图
6.Stacked图
7.Combine图
三、数据源
其数据源形式为XML的形式，XML形式分为单序列和多序列XML，以及其他的格式。
四、简单使用
目录结构：
test.html
data.xml
FusionCharts
|----------Charts
| |--------------- many charts *.swf
|----------JSClass
| |--------------- FusionCharts.js
test.html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <mce:script language="JavaScript" src="FusionCharts/JSClass/FusionCharts.js" mce_src="FusionCharts/JSClass/FusionCharts.js"></mce:script> <title>图</title> </head> <body> <table align='center' border="1"> <caption>图</caption> <tr> <td> <div id='Pie' align="center"> <script type="text/javascript"> var chart = new FusionCharts('FusionCharts/Charts/FCF_Pie2D.swf', "ChartId", "400", "300"); chart.setDataURL("data.xml"); chart.render('Pie'); </script> </div> </td> </tr> </table> </body> </html>
要注意添加以下几行代码，并注意其中的路径：
（1）导入JS： <script language="JavaScript" src='FusionCharts/JSClass/FusionCharts.js '></script>
（2）图表显示的地方：<div id='Pie' align="center">......</div>
（3）脚本：用于设置显示什么图、图的数据等
<script type="text/javascript">
var chart =
new FusionCharts('FusionCharts/Charts/FCF_Pie2D.swf ', "ChartId", "400", "300");
chart.setDataURL("data.xml");
chart.render('Pie ');
</script>
其中，chart.render("Pie")中的Pie是你要显示图的div的id
data.xml
<graph baseFont='SunSim' baseFontSize='12' caption='分析' subcaption='' yAxisMinValue='51650.1' yAxisMaxValue='71118.3' xaxisname='日期' yaxisname='数量' hovercapbg='FFECAA' hovercapborder='F47E00' formatNumberScale='0' decimalPrecision='0' showvalues='1' numdivlines='10' numVdivlines='0' shownames='1' rotateNames='1'> <set name='2009-10-04' value='57653' color='AFD8F8'/> <set name='2009-10-05' value='57389' color='F6BD0F'/> <set name='2009-10-06' value='59256' color='8BBA00'/> <set name='2009-10-07' value='62762' color='FF8E46'/> <set name='2009-10-08' value='63287' color='008E8E'/> <set name='2009-10-09' value='60109' color='D64646'/> <set name='2009-10-10' value='64653' color='8E468E'/> <set name='2009-10-11' value='61687' color='588526'/> </graph>
显示效果如下：
也可以不用单独的文件存储xml，可以利用setDataXML方法，如下：
<script type="text/javascript"> var chart = new FusionCharts('FusionCharts/Charts/FCF_Pie2D.swf', "ChartId", "400", "300"); chart.setDataXML("<graph baseFont='SunSim' baseFontSize='12' caption='分析' subcaption='' yAxisMinValue='51650.1' yAxisMaxValue='71118.3' xaxisname='日期' yaxisname='数量' hovercapbg='FFECAA' hovercapborder='F47E00' formatNumberScale='0' decimalPrecision='0' showvalues='1' numdivlines='10' numVdivlines='0' shownames='1' rotateNames='1'><set name='2009-10-04' value='57653' color='AFD8F8'/><set name='2009-10-05' value='57389' color='F6BD0F'/><set name='2009-10-06' value='59256' color='8BBA00'/><set name='2009-10-07' value='62762' color='FF8E46'/><set name='2009-10-08' value='63287' color='008E8E'/><set name='2009-10-09' value='60109' color='D64646'/><set name='2009-10-10' value='64653' color='8E468E'/><set name='2009-10-11' value='61687' color='588526'/></graph>"); chart.render('Pie'); <script>