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
- fushioncharts简单实例
- fushioncharts取消加载动画
- fushioncharts微调笔记
- FushionCharts 使用案例
- Java封装FushionCharts
- 关于fushioncharts的Column2d美化图
- extjs3.3 + fushioncharts + velocity 实现折线图
- JQuery实例Ajax 简单实例
- ActiveMQ简单介绍+简单实例
- jboss ejb 简单实例
- 简单的struts实例
- AWK简单实例
- Struts简单实例
- xsl+xml简单实例
- Socket编程简单实例
- Spring简单入门实例
- web 打印简单实例
- struts简单入门实例
- x86芯片Linux系统32位和64位CAS无锁函数实现
- UIlabel
- 错误:无法访问android.app.Activity 找不到android.app.Activity的类文件
- CMMI5个等级和22个过程域
- 带到山花烂漫时 他在从中笑
- fushioncharts简单实例
- 今天遇到了很弱智的OpenGL的问题
- 第五周作业
- EXCEPT和INTERSECT
- 解决jquery-easyui1.3.3combobox多选模式不兼容IE8问题
- 配置内存使用
- Linux下Vi/Vim的常用命令
- OpenStreetMap/Google/百度/Bing瓦片地图服务(TMS)
- IOS 正则表达式语法表