文档章节

fusioncharts 学习经典

继仕zac
 继仕zac
发布于 2015/07/30 18:08
字数 1054
阅读 83
收藏 3

下载文件 

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>


© 著作权归作者所有

继仕zac
粉丝 2
博文 32
码字总数 50099
作品 0
广州
程序员
私信 提问
2012年度FusionCharts图表控件最受欢迎文章精选(上)

本文主要整理了2012年度FusionCharts图表控件最受欢迎的文章,如使用教程,帮助文档,实例,演示,下载地址,参数大全,选型对比等等,希望对FusionCharts使用者有帮助,欢迎交流与评论! Fu...

nautygirl
2013/01/15
192
0
FusionCharts常见问题FAQ及解决方法(FusionCharts 100问)

当你利用FusionCharts创建图表时报错,原因是多方面的。本文总结了一些常见问题及解决方法供大家参考,希望对大家有帮助。 FusionCharts 设置字体大小 FusionCharts服务器要求有要求吗? 如何...

flyingsnail
2014/04/25
2.5K
0
FusionCharts实例下载(ASP,ASP.NET,PHP,JSP......)

本实例主要为你提供了FusionCharts图表在ASP,ASP.NET,PHP,JSP,ColdFusion,Ruby on Rails,JavaScript等语言下效果的下载例子。 FusionCharts实例下载(ColdFusion + MS SQL) FusionCh...

nautygirl
2013/01/14
1K
0
FusionCharts图表控件常见问题解答FAQ

由于最近有不少网友咨询FusionCharts图表的一些常见问题,如安装和配置,导出格式,数据源等等,因此慧都小编特意整理了一些FusionCharts的FAQ供大家参考。>>>下最新版FusionCharts v3.2.2-S...

panda456
2013/01/17
121
0
FusionCharts图表错误原因及调试方法大全

无标题文档 当你利用FusionCharts创建图表时报错,原因是多方面的。本文总结了报错的多种原因及调试方法供大家参考,希望对大家有帮助。 >>>查看调试方法 Fusioncharts的Javascript图表却显示...

panda456
2013/01/23
397
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring使用ThreadPoolTaskExecutor自定义线程池及实现异步调用

多线程一直是工作或面试过程中的高频知识点,今天给大家分享一下使用 ThreadPoolTaskExecutor 来自定义线程池和实现异步调用多线程。 一、ThreadPoolTaskExecutor 本文采用 Executors 的工厂...

CREATE_17
今天
5
0
CSS盒子模型

CSS盒子模型 组成: content --> padding --> border --> margin 像现实生活中的快递: 物品 --> 填充物 --> 包装盒 --> 盒子与盒子之间的间距 content :width、height组成的 内容区域 padd......

studywin
今天
7
0
修复Win10下开始菜单、设置等系统软件无法打开的问题

因为各种各样的原因导致系统文件丢失、损坏、被修改,而造成win10的开始菜单、设置等系统软件无法打开的情况,可以尝试如下方法解决 此方法只在部分情况下有效,但值得一试 用Windows键+R打开...

locbytes
昨天
8
0
jquery 添加和删除节点

本文转载于:专业的前端网站➺jquery 添加和删除节点 // 增加一个三和一节点function addPanel() { // var newPanel = $('.my-panel').clone(true) var newPanel = $(".triple-panel-con......

前端老手
昨天
8
0
一、Django基础

一、web框架分类和wsgiref模块使用介绍 web框架的本质 socket服务端 与 浏览器的通信 socket服务端功能划分: 负责与浏览器收发消息(socket通信) --> wsgiref/uWsgi/gunicorn... 根据用户访问...

ZeroBit
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部