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

编程开发-JavaWebjsp FusionCharts图表(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格式数据：chart palette=2 caption=Unit Sales xAxisName=Month yAxisName=Units showValues=0? ? ? ?set label=Jan value=462 /? ? ? ? set label=Feb value=857 /? ? ? ? set label=Mar value=671 /? ? ? ? set label=Apr value=494 /? ? ? ? set label=May value=761 /? ? ? ? set label=Jun value=960 //chartchart标签属性说明：caption代表：图片的标题、xAxisName代表：横坐标的标题、yAxisName代表：纵坐标的标题(注意：纵坐标的标题只能是英文，能否是中文这一点还在研究当中)、showValues代表：当值为boolen型0为在柱子或者曲线上不显示数据，“1”为显示数据。其中还有很多属性都在fusioncharts帮助文件中有详细的说明。XMLset子标签：label为横坐标的元素，value为每个坐标元素对应的值。页面：js:myChart.setDataURL(Data.xml); ?//引用xml文件数据myChart.setDataXML(strXml); ?//strXml为生成的数据!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//ENhtml? head? ? base href=%=basePath%? ??? ? titleMy FusionCharts Show/titlescript language=JavaScript src=FusionCharts/JS/FusionCharts.js/scriptscript type=text/javascriptfunction showFusionCharts(){?var myChart = new FusionCharts(FusionCharts/Charts/Pie2D.swf, myChartId, 800, 300);? ?myChart.setDataXML(${xml});? ??//myChart.setDataURL(Data.xml);? ? myChart.render(chartdiv);? ? ? ? var myChart2 = new FusionCharts(FusionCharts/Charts/Column3D.swf, myChartId2, 800, 300);? ?myChart2.setDataXML(${xml});? ? myChart2.render(chartdiv2);? ? }? ? ? ?/script? /head???body onload=showFusionCharts();? ??? ? h3FusionCharts Demo/h3? ?? ? div id=chartdiv/div? ? div id=chartdiv2/div? /body/html打开网页http://localhost:8080/MyChartsDemo/servlet/MyServlet就可以看到一个饼图和一个柱状图。?