fusioncharts 使用说明

使用说明:
<1>fusioncharts是以XML为数据接口而生成图表。它提供两种XML形式:直接以XML文件提供数据,也就是事先写好的.xml。另一种是基于数据库动态生成XML
<2>:拷贝fusioncharts下的所有的.swf文件(所有的图标文件在下载包中Charts 包中)到工程WebRoot目录下,这些flash文件作为生成报表的模板图标
<3>:拷贝fusioncharts.js到webRoot目录下的js文件夹下,这里面提供了createChartHTML,能帮助我们直接调用flash文件从而生成图表。
<4>:用一个简单的例子来说明一下上面的步骤:
(1):以静态的XML为数据接口创建柱状图或者曲线图。在工程根目录下创建XML文件data.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" />
</chart>
(2):这个xml文件可以直接放在一个文件夹下,也可以放在jsp页面当中来引用。注意与以往的xml格式不同的是没有声明xml的表头。这种格式正是fusioncharts所要求的格式
(3):chart标签属性说明:caption代表:图片的标题、xAxisName代表:横坐标的标题、yAxisName代表:纵坐标的标题(注意:纵坐标的标题只能是英文,能否是中文这一点还在研究当中)、showValues代表:当值为boolen型0为在柱子或者曲线上不显示数据,“1”为显示数据。其中还有很多属性都在fusioncharts帮助文件中有详细的说明。
(4):XML<set>子标签:label为横坐标的元素,value为每个坐标元素对应的值。
(5):了解了XML的内容就可以直接编写jsp页面了。
<%@ include file="../Includes/FusionCharts.jsp"%>
<HTML>
   <HEAD>
      <TITLE>FusionCharts - Simple Column 3D Chart</TITLE>
   </HEAD>
   <BODY>
   <%
 String chartHTMLCode=createChartHTML("./FusionCharts/Column3D.swf", " Data.xml", "", "myFirst", 600, 300, false) ;
   %>
   <%=chartHTMLCode%>
   </BODY>
</HTML>
 
(6):FusionCharts.jsp文件提供了createChartHTML()函数来创建图片方法中的共有七个参数:
1:要引用flash文件的的路径不同的图片引用不同的flash文件。
2:为xml文件的路径。
3当动态的生成XMl文件时要传的参数,在此如果物理路径中有XMl文件的话第二个参数传文件路径,第三个参数为空,当物理路径中没有xml文件 而是程序生成的话,第二个参数为空,第三个参数为程序生成xml的字符串。
4:生成图片的id。
5:图片的with。
6: 图片的hight。
7:图片是否为调试模式。通过以上的代码就可以生成简单的chart图了。
现在运行web服务器可以看到图片
其中还有很多的flash文件包括复合图标正在研究当中。这个只是初始知道怎么来用,也做了例子了。后面会写出来。
posted @ 2011-05-24 18:15  chinaifne  阅读(3491)  评论(2编辑  收藏  举报