wang371134086
wang371134086

fusioncharts简单实用示例+超全SWF文件

阅读更多

Index.jsp代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

 

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

   <head>

      <title>My First FusionChartstitle>

   head>

   <body bgcolor="#ffffff">

      <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="900" height="300" id="Column3D" >

         <param name="movie" value="FusionCharts/Column3D.swf" />

         <param name="FlashVars" value="&dataURL=Data/Data.xml">

         <param name="quality" value="high" />

         <embed src="FusionCharts/Column3D.swf" flashVars="&dataURL= Data/Data.xml" quality="high" width="900" height="300" name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

      object>

body>

html>

只用了解标记的参数就可以了。其中Column3D.swf是显示flash需要用到的文件，在Fusion Charts的资源包中，Data.xml是flash显示数据的数据源。

 

 

 

 

 

 

要导入的文件：

Data.xml文件如下：

<chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'>

    <set label='January' value='17400' />

    <set label='February' value='19800' />

    <set label='March' value='21800' />

    <set label='April' value='23800' />

    <set label='May' value='29600' />

    <set label='June' value='27600' />

    <set label='July' value='31800' />

    <set label='August' value='39700' />

    <set label='September' value='37800' />

    <set label='October' value='21900' />

    <set label='November' value='32900' />

    <set label='December' value='39800' />

chart>

向项目中加入以上代码后生成的flash报表如下：

 

 

2.示例二

Index2.jsp代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

 

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

   <head>

      <title>My First FusionChartstitle>

      <script language="JavaScript" src="FusionCharts/FusionCharts.js">script>

    

   head>

   <body bgcolor="#ffffff">

   <div id="chartdiv" align="center">

    <script type="text/javascript">

          var chart = new FusionCharts("FusionCharts/Bar2D.swf", "ChartId", "500", "350", "0", "0");

          chart.setDataURL("Data/Data2.xml");       

          chart.render("chartdiv");

    script>

   div>

body>

html>

 

Data2.xml如下：

<chart caption="zjshuai" xAxisName="Month" yAxisName="Units" showValues="0" decimals="0" formatNumberScale="0" chartRightMargin="30">

  <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" />

  <set label="Jul" value="629" />

  <set label="Aug" value="622" />

  <set label="Sep" value="376" />

  <set label="Oct" value="494" />

  <set label="Nov" value="761" />

  <set label="Dec" value="960" />

chart>

生成的flash报表如下：

 

 

 

     //myChart.setDataXML(strChart);

     myChart.render("chartdiv");

    script>   td>

   tr>

   <tr>

     <td align="center">

       <%

           String strChart = "";

           strChart += "";

           strChart += "  ganttWidthPercent='85' canvasBorderColor='999999' canvasBorderThickness='0' gridBorderColor='4567aa' gridBorderAlpha='20' showSlackAsFill='1' slackFillColor='eeeeee' ganttPaneDuration='30' ganttPaneDurationUnit='d'>";

           strChart += "";

               strChart += "";

               strChart += "";

            strChart += "";

            strChart += "";

               strChart += "";

               strChart += "";

               strChart += "";

               strChart += "";

               strChart += "";

               strChart += "";

               strChart += "";

               strChart += "";

               strChart += "";

               strChart += "";

               strChart += "";

               strChart += "";

               strChart += "";

               strChart += "";

               strChart += "";

               strChart += "";

               strChart += "";

               strChart += "";

               strChart += "";

            strChart += "";

            strChart += "' fontColor='000000' fontSize='12' isAnimated='1' bgColor='4567aa' headerVAlign='middle' headerAlign='left' headerbgColor='4567aa' headerFontColor='ffffff' headerFontSize='12' align='left' isBold='1' bgAlpha='25'>";

               strChart += "' id='1134' />";

               strChart += "' id='1135' />";

            strChart += "";

            strChart += "";

            strChart += "";

            strChart += "";

               strChart += "  percentComplete='100.00' /> ";

               strChart += "  alpha='100' topPadding='56%' height='32%'  percentComplete='10.0' />";

               strChart += "  percentComplete='100.00' />";

               strChart += " ";

            strChart += "";

            strChart += "";

               strChart += "";

               strChart += "";

               strChart += "";

               strChart += "";

            strChart += "";

            strChart += "";

              strChart += "";

                  strChart += "