fushioncharts简单实例

来源：互联网发布：高清矩阵图片编辑：程序博客网时间：2024/05/14 17:14

FushionCharts官网地址：http://www.fusioncharts.com/

首先到官网下载FusionCharts组件：FusionCharts XT（直接下载全部组件也行）

点击FushionChart XT,

gallery 里面是样例，code里面是代码，chart里面是swf文件及js，打开index.html可以查看各种效果图

本文以下图例子为例讲解：

所需js：fushionCharts.js; swf:MSCombi3D.swf

jsp代码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">        <title>FusionChart图表</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><style type="text/css">body{width: 1920px;height: 2160px;margin:0px;font-family: Arial;}</style>  </head>  <script type="text/javascript" src="<%=basePath%>js/jquery-1.5.1.js"></script><script type="text/javascript" src="<%=basePath%>js/chart/FusionCharts.js"></script>   <body>    <button onclick="testp('1')">3D动态图样例1</button><br>    <button onclick="testp('2')">3D动态图样例2</button><br>    <button onclick="testp('3')">3D动态图样例3</button><br>           <!-- 这个div用于放置生成chart -->    <div id="chart"></div>        <script type="text/javascript">        function testp(flag){             var chart = new FusionCharts("<%=basePath%>swf/MSCombi3D.swf", "chartId01", "560", "400", "0", "0");         //chart.setXMLData(data);可以获取xml格式字符窜显示            if(flag==1){             chart.setXMLUrl("<%=basePath%>xml/chartXML/tu1.xml");               }else if(flag==2){              chart.setXMLUrl("<%=basePath%>xml/chartXML/tu2.xml");            }else if(flag==3){{              chart.setXMLUrl("<%=basePath%>xml/chartXML/tu3.xml");            }   chart.render("chart");       } </script>      </body></html>

tu1.xml：

<chart palette="2" caption="Country Comparison" showLabels="1" showvalues="0" decimals="0" numberPrefix="$" clustered="0" exeTime="1.5" showPlotBorder="0" zGapPlot="30" zDepth="90" divLineEffect="emboss" startAngX="10" endAngX="18" startAngY="-10" endAngY="-40"><categories><category label="Austria" /><category label="Brazil" /><category label="France" /><category label="Germany" /><category label="USA" /></categories><dataset seriesName="1998" color="8BBA00" showValues="0"><set value="45000.65" /><set value="44835.76" /><set value="18722.18" /><set value="77557.31" /><set value="92633.68" /></dataset><dataset seriesName="1997" color="F6BD0F" showValues="0"><set value="57401.85" /><set value="41941.19" /><set value="45263.37" /><set value="117320.16" /><set value="114845.27" /></dataset><dataset seriesName="1996" color="AFD8F8" showValues="0"><set value="25601.34" /><set value="20148.82" /><set value="17372.76" /><set value="35407.15" /><set value="38105.68" /></dataset><styles><definition><style name="captionFont" type="font" size="15" /></definition><application><apply toObject="caption" styles="captionfont" /></application></styles></chart>

结果截图：

可拖拽：

TIP:点击VIEW XML

0 0