fushioncharts简单实例

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

首先到官网下载FusionCharts组件:FusionCharts XT(直接下载全部组件也行)


点击FushionChart XT,

fushioncharts简单实例_第1张图片


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

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


fushioncharts简单实例_第2张图片

所需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>


结果截图:

fushioncharts简单实例_第3张图片


可拖拽:

fushioncharts简单实例_第4张图片


TIP:点击VIEW XML

 fushioncharts简单实例_第5张图片


你可能感兴趣的:(js,实例,swf,FusionCharts)