jspFushionChart使用-一个动态图表的实现

图表(1)FusionCharts是一套很有用的统计图生成工具，flash的，还有动画效果。fusioncharts是以XML为数据接口而生成图表。它提供两种XML形式：直接以XML文件提供数据，也就是事先写好的.xml。另一种是基于数据库动态生成XML。FusionCharts开发的流程：1、拷贝fusioncharts下的所有的.swf文件(所有的图标文件在下载包中Charts包中)到工程WebRoot目录下，这些flash文件作为生成报表的模板图标。2、拷贝fusioncharts.js到webRoot目录下的js文件夹下：FusionCharts.js，FusionChartsExportComponent.js3、拷贝jar文件到lib:fcexporter.jar,jfreechart-1.0.9.jar4、从数据库取数据；5、把数据生成xml；6、用一段js读取xml，送到FusionCharts，生成统计图表。xml格式数据：chartpalette=2caption=UnitSalesxAxisName=MonthyAxisName=UnitsshowValues=0setlabel=Janvalue=462/setlabel=Febvalue=857/setlabel=Marvalue=671/setlabel=Aprvalue=494/setlabel=Mayvalue=761/setlabel=Junvalue=960//chartchart标签属性说明：caption代表：图片的标题、xAxisName代表：横坐标的标题、yAxisName代表：纵坐标的标题(注意：纵坐标的标题只能是英文，能否是中文这一点还在研究当中)、showValues代表：当值为boolen型0为在柱子或者曲线上不显示数据，“1”为显示数据。其中还有很多属性都在fusioncharts帮助文件中有详细的说明。XMLset子标签：label为横坐标的元素，value为每个坐标元素对应的值。页面：js:myChart.setDataURL(Data.xml);//引用xml文件数据myChart.setDataXML(strXml);//strXml为生成的数据!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01Transitional//ENhtmlheadbasehref=%=basePath%titleMyFusionChartsShow/titlescriptlanguage=JavaScriptsrc=FusionCharts/JS/FusionCharts.js/scriptscripttype=text/javascriptfunctionshowFusionCharts(){=newFusionCharts(FusionCharts/Charts/Pie2D.swf,myChartId,800,300);myChart.setDataXML(${xml});//myChart.setDataURL(Data.xml);myChart.render(chartdiv);varmyChart2=newFusionCharts(FusionCharts/Charts/Column3D.swf,myChartId2,800,300);myChart2.setDataXML(${xml});myChart2.render(chartdiv2);}/script/headbodyonload=showFusionCharts();h3FusionChartsDemo/h3divid=chartdiv/divdivid=chartdiv2/div/body/html打开网页就可以看到一个饼图和一个柱状图。