fusioncharts 学习经典
下载文件
1、下载fusioncharts 的swf文件，其中官网上是下载不了的，下载的文件左下角都有logo信息，说以正常如果使用是需要付费购买的。本文推荐付费购买，下面使用版本为破解版仅用于学习交流，不用商业上使用。
下载地址：
http://download.csdn.net/detail/li_894389175/8947133
环境搭建我使用的是java开发环境，当然用的是eclipse开发工具，首先新建项目，并在建好的项目上的WebContent的目录下建立fusioncharts文件夹，
--Webcontent
--fusioncharts //这个文件夹存放fusioncharts.js文件
--js //这个文件夹存放页面引用的js 自己编写的js
--data //这个存放xml数据类型文件，实际项目中是服务端返回
--swf //这个存放下载下来的swf文件
方法一：
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/fusioncharts/js/chartone.js"></script>
</head>
<body>
<div>this jsp page is used to test FusionCharts.js</div>
<br/>
<address>Test-one for trial</address>
<div id ="onetest">FusionCharts will load here...</div>
</body>
</html>
其中chartone.js文件内容
FusionCharts.ready(function () {
var myChart = new FusionCharts({
type: 'column2d',
renderAt: 'onetest',
dataFormat: 'json',
dataSource: {
chart: {
caption: "广州中元软件有限公司",
subCaption: "XXX",
},
data:[{
label: "Bakersfield Central",
value: "880000"
},
{
label: "Garden Groove harbour",
value: "730000"
},
{
label: "Los Angeles Topanga",
value: "590000"
},
{
label: "Compton-Rancho Dom",
value: "520000"
},
{
label: "Daly City Serramonte",
value: "330000"
}]
}
});
myChart.render();
});
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/fusioncharts/js/chartone.js"></script>
</head>
<body>
<div>this jsp page is used to test FusionCharts.js</div>
<br/>
<address>Test-one for trial</address>
<div id ="onetest">FusionCharts will load here...</div>
<br/>
<address>Test-two for swf for object</address>
<div id ="twotest">
<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="500" id="Column3D" >
<param name="movie" value="${pageContext.request.contextPath}/fusioncharts/swf/Column3D.swf" />
<param name="FlashVars" value="&dataURL=fusioncharts/data/twoData.xml">
<param name="quality" value="high"/>
<embed src="${pageContext.request.contextPath}/fusioncharts/swf/Column3D.swf" flashVars="&dataURL=fusioncharts/data/twoData.xml" quality="high" width="900" height="500" name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
<br/>
<address>Test-three for swf for javascript</address>
<address>个人倾向于这种实现方式</address>
<div id ="threetest">
<script type="text/javascript">
var chart = new FusionCharts("/fusioncharts/swf/Bar2D.swf", "ChartId", "700", "500", "0", "0");
//完全基于后台生成xml文件来实现图的展现方式
chart.setDataURL("fusioncharts/data/threeData.xml");
chart.render("threetest");
</script>
</div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/fusioncharts/js/chartone.js"></script>
</head>
<body>
<div>this jsp page is used to test FusionCharts.js</div>
<br/>
<address>Test-one for trial</address>
<div id ="onetest">FusionCharts will load here...</div>
<br/>
<address>Test-two for swf for object</address>
<div id ="twotest">
<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="500" id="Column3D" >
<param name="movie" value="${pageContext.request.contextPath}/fusioncharts/swf/Column3D.swf" />
<param name="FlashVars" value="&dataURL=fusioncharts/data/twoData.xml">
<param name="quality" value="high"/>
<embed src="${pageContext.request.contextPath}/fusioncharts/swf/Column3D.swf" flashVars="&dataURL=fusioncharts/data/twoData.xml" quality="high" width="900" height="500" name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
<br/>
<address>Test-three for swf for javascript</address>
<address>个人倾向于这种实现方式</address>
<div id ="threetest">
<script type="text/javascript">
var chart = new FusionCharts("/fusioncharts/swf/Bar2D.swf", "ChartId", "700", "500", "0", "0");
//完全基于后台生成xml文件来实现图的展现方式
chart.setDataURL("fusioncharts/data/threeData.xml");
chart.render("threetest");
</script>
</div>
</body>
</html>
后面使用到的两种方法均为xml为类型的数据
其中threeData.xml
<chart caption="这个方法最简单 代码量最少" 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>
twoData.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>