fusioncharts 学习经典

发布时间：2020-12-15 20:07:44 所属栏目：百科来源：网络整理

导读：下载文件? 1、下载fusioncharts 的swf文件，其中官网上是下载不了的，下载的文件左下角都有logo信息，说以正常如果使用是需要付费购买的。本文推荐付费购买，下面使用版本为破解版仅用于学习交流，不用商业上使用。下载地址： http://download.csdn.net/det

下载文件?

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"?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");
??????????//完全基于后台生成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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!