Fusioncharts+报表工具

Fusioncharts报表工具....................................................................................................................21.Fusioncharts介绍........................................................................................................22.数据接口XML：.............................................................................................................23.使用前的准备工作（基于java的Web工程为例）：...................................................24.创建第一个Chart：.........................................................................................................25.FusionCharts提供多样式图：........................................................................................46.FusionCharts的高级特性：........................................................................................87.FusionCharts提供了很多设置chart样式的属性：.....................................................108.动态XML生成的chart：.........................................................................................109.FusionCharts的优缺点..............................................................................................1010购买FusionCharts注意的事项：.............................................................................10Fusioncharts报表工具1.Fusioncharts介绍：Fusioncharts是一个基于Flash的图表组件，可以用来提供数据驱动的动态图标，fusioncharts可用于任何网页脚本语言如，HTML格式，JSP技术等等。提供交互式和强大的动态图标，fusioncharts充分利用流体美丽的Flash为模板，使用XML作为其数据接口，创造紧凑，互动和真正的动态图表。2.数据接口XML：Fusioncharts是以XML为数据接口而成图表。提供XML两种形式：直接以XML文件提供数据。基于数据库数据动态生成XML（此方法在后面详细介绍）。3.使用前的准备工作（基于java的Web工程为例）：拷贝所有的flash文件(所有的图标文件在下载包中Charts包中)到工程WebRoot目录下，这些flash文件作为生成报表的模板图标。拷贝FusionCharts.jsp（下载包Includes包中）文件到WebRoot下（可以将其放在WebRoot下的某个文件夹中），这个文件包含将生成的flash图标嵌入到jsp或者HTML文件中。拷贝FusionCharts.js（下载包JSCLASS包中），这个文件提供了createChartHTML函数是我们轻松的创建图表。通过向面的介绍我们基本上可以将FusionCharts实际应用到项目当中。那么如何应用以及注意事项我们将进一步的研究。4.创建第一个Chart：在第三节的基础上我们已经有了基于FusionCharts的开发环境。基于第三节的内容来分析FusionCharts的特性。以静态的XML为数据接口创建柱状图或者曲线图。在工程根目录下创建XML文件data.xml此文件的格式为chartpalette=2caption=UnitSalesxAxisName=MonthyAxisName=UnitsshowValues=0setlabel=Janvalue=462/setlabel=Febvalue=857/setlabel=Marvalue=671/setlabel=Aprvalue=494/setlabel=Mayvalue=761/setlabel=Junvalue=960//chartChart标签中属性：以上结构的xml可以创建单一的柱状和曲线图。每个XML以chart为跟标签开始/chart结束。介绍chart标签中的属性：caption设置图片的标题。xAxisName设置横坐标的标题，yAxisName纵坐标标题（注意：纵坐标的标题只能为英文），showValues值为boolen型0为在柱子或者曲线上不显示数据，“1”为显示数据。Chart标签中有很多相关的属性例如数据格式，特殊字符的转化，我们可以参考FusionCharts的帮助文件根据需要进行设置，这里不一一介绍以上XMLset子标签：label为横坐标的元素，value为每个很坐标元素对应的值。当我们了解了XML文件的内容就可以生成图片了：创建一个JSP文件。将FusionCharts.jsp文件包含进来。编辑JSP文件%@includefile=../Includes/FusionCharts.jsp%HTMLHEADTITLEFusionCharts-SimpleColumn3DChart/TITLE/HEADBODY%StringchartHTMLCode=createChartHTML(/FusionCharts/Column3D.swf,Data.xml,,myFirst,600,300,false);%%=chartHTMLCode%/BODY/HTMLFusionCharts.jsp文件提供了createChartHTML（）函数来创建图片方法中的共有七个参数，一次介绍：1：要引用flash文件的的路径不同的图片引用不同的flash文件，2：为xml文件的路径，3当动态的生成XMl文件时要传的参数，在此如果物理路径中有XMl文件的话第二个参数传文件路径，第三个参数为空，当物理路径中没有xml文件而是程序生成的话，第二个参数为空，第三个参数为程序生成xml的字符串。4：生成图片的id，5，6为图片的widthhight。7：图片是否为调试模式。通过以上的代码就可以生成简单的chart图了。现在运行web服务器可以看到图片5.FusionCharts提供多样式图：在我们的实际应用当中会涉及到复合图标，以及柱状图和曲线图的混合。那这些主要是XML文件的结构的差异以及应用不同的flash文件复合图的生成注意事项：(多柱状）(多曲线)（堆状图）上面两个图的XML结构相同引用不同的Flash文件：chartpalette='2'caption='各个地市第一季度绩效对比'xAxisName='地市'yAxisName='绩效数据'showValues='0'decimals='0'formatNumberScale='0'useRoundEdges='1'categoriescategorylabel='成都'/categorylabel='德阳'/.../categoriesdatasetseriesName='一月'setvalue='233'link='n-/chartDemo/turn.do?value=233'/setvalue='448'link='n-/chartDemo/turn.do?value=448'/.../datasetdatasetseriesName='二月'setvalue='755'/setvalue='543'/.../datasetdatasetseriesName='三月'setvalue='656'/setvalue='567'/.../dataset/chart次结构的XML，chart根元素在第四节中介绍过了，接下来介绍chart的子节点categories/categories这个子节点包含了子节点多个categorylabel=“成都”/category用来设置图片横坐标的元素，label属性来设置显示的元素。datasetseriesName='一月'子节点为一个元素中有几个柱子或曲线就有几个datasetseriesName='一月'标签，如上图为统计各个地市一月，二月，三月分别的绩效数据。那么就有三个dataset标签，标签中seriesName属性可以在横坐标下边形成一组图片（如上图）说明了不同颜色的柱子曲线表示的不同的数据。dataset里有子节点set和第四节中一样的功能。当鼠标移到某个柱子或者曲线的坐标点上时显示如图数据（一月成都绩效数据是233）生成下图柱状和曲线图的XML的结构为：chartpalette='2'caption='各个地市第一季度绩效对比'xAxisName='地市'yAxisName='绩效数据'showValues='0'decimals='0'formatNumberScale='0'useRoundEdges='1'categoriescategorylabel='成都'/categorylabel='德阳'/.../categoriesdatasetseriesName='一月'setvalue='877'link='n-/chartDemo/turn.do?value=成都'/setvalue='644'link='n-/chartDemo/turn.do?value=德阳'/.../datasetdatasetseriesName='二月'renderAs='Line'setvalue='755'link='n-/chartDemo/turn.do?value=877'/setvalue='408'link='n-/chartDemo/turn.do?value=644'/.../datasettrendlineslinestartValue='26000'color='91C728'displayValue='Target'showOnTop='1'//trendlines/chart和上面的多柱状和多曲线的结构基本相同，区别为要那个datasetseriesName='二月的值以曲线的形式展示设置那个datasetseriesName='二月'renderAs='Line'增加了属性renderAs=‘Line’6.FusionCharts的高级特性：热点：FusionCharts也支持获取给每个数据元素的热点数据。在set标签提供属性link可以解决热点的问题，在上面XML文档结构中也看到了关于link的信息。在此详细介绍。链接的形式：a：set…link=’/chartDemo/link.jso?value=999链接到本页面，b：