fusioncharts:(此控件需flash支持)

  介绍:http://baike.baidu.com/link?url=SOheR7sQlb93S5TqYmeI7FhtJ0V9ABNwH6OsAaNu05JFWCHGTwsfejSw8S6rFUCK57Y2YunL2CbzpVZZTSLhFK

  使用该插件需要首先做的两件事

    1 先把swf导入项目中
    2 先把fusioncharts.js导入项目中并引入页面中

  fusioncharts获取数据有两种方法,一是通过jesson,另一个是通过XML

XML
<chart caption="Total Revenues from 2008-2013" numberprefix="$" bgcolor="FFFFFF" showalternatehgridcolor="0" plotbordercolor="008ee4" plotborderthickness="3" showvalues="0" divlinecolor="CCCCCC" showcanvasborder="0" tooltipbgcolor="00396d" tooltipcolor="FFFFFF" tooltipbordercolor="00396d" numdivlines="2" yaxisvaluespadding="20" anchorbgcolor="008ee4" anchorborderthickness="0" showshadow="0" anchorradius="4" chartrightmargin="25" canvasborderalpha="0" showborder="0">
<set label="2009" value="4400000" color="008ee4" />
<set label="2010" value="4800000" color="008ee4" />
<set label="2011" value="5500000" color="008ee4" />
<set label="2012" value="6700000" color="008ee4" anchorradius="7" tooltext="Historical high" />
<set label="2013" value="4200000" color="008ee4" />
</chart> JSON
={
"chart": {
"caption": "Total Revenues from 2008-2013",
"numberprefix": "$",
"bgcolor": "FFFFFF",
"showalternatehgridcolor": "0",
"plotbordercolor": "008ee4",
"plotborderthickness": "3",
"showvalues": "0",
"divlinecolor": "CCCCCC",
"showcanvasborder": "0",
"tooltipbgcolor": "00396d",
"tooltipcolor": "FFFFFF",
"tooltipbordercolor": "00396d",
"numdivlines": "2",
"yaxisvaluespadding": "20",
"anchorbgcolor": "008ee4",
"anchorborderthickness": "0",
"showshadow": "0",
"anchorradius": "4",
"chartrightmargin": "25",
"canvasborderalpha": "0",
"showborder": "0"
},
"data": [
{
"label": "2009",
"value": "4400000",
"color": "008ee4"
},
{
"label": "2010",
"value": "4800000",
"color": "008ee4"
},
{
"label": "2011",
"value": "5500000",
"color": "008ee4"
},
{
"label": "2012",
"value": "6700000",
"color": "008ee4",
"anchorradius": "7",
"tooltext": "Historical high"
},
{
"label": "2013",
"value": "4200000",
"color": "008ee4"
}
]
}

  主要讲通过XML获取数据的方法,
  用xml时有两种方法,一种是读取xml文件中的内容,然后使用;另一种是直接在程序中拼xml内容直接使用。

  第一种代码

  var chart = new FusionCharts("Charts/FCF_Column3D.swf", "ChartId", "500", "300");
  chart.setDataURL("<%=request.getContextPath()%>"+"/file/postXml.xml");
  chart.render("chartdiv1");

  第二种代码

var chart = new FusionCharts("FusionCharts/Line.swf", "chartid", "400", "300");
chart.setDataXML(xml);
chart.render("dxf");

  FusionCharts函数的参数分别为:
    swf文件的路径
    charts的唯一标示id,随意起但不可以重复
    图表显示的宽度
    图表显示的高度

  graph的主要属性意思:
    caption 大标题
    subcaption 小标题
    xAxisName x轴名
    yAxisName y轴名
    yAxisMinValue x轴最小值(起始坐标)
    decimalPrecision小数精度
    formatNumberScale是否自动补齐小数,0为否。

  具体属性可参考:http://wenku.baidu.com/link?url=c7zwPmlxv3-eu8IEDJOWYlwtLCjKrKakLY_-hOZfj5jd8vPvj3U9fpEBdnmuVzh1xBBKnZiBfvT_oAZOuSE4dYB5OXXNTOr5IXhOiO-2jD3

  两个完整的例子:

1 xml文件的

Data.xml:
<graph caption='Monthly Sales Summary' subcaption='For the year 2004' xAxisName='Month' yAxisMinValue='15000' yAxisName='Sales' decimalPrecision='0' formatNumberScale='0' numberPrefix='' showNames='1' showValues='0' showAlternateHGridColor='1' AlternateHGridColor='ff5904' divLineColor='ff5904' divLineAlpha='20' alternateHGridAlpha='5' >
<set name='Jan' value='17400'/>
<set name='Feb' value='19800'/>
<set name='Mar' value='21800'/>
<set name='Apr' value='23800'/>
<set name='May' value='29600'/>
<set name='Jun' value='27600'/>
<set name='Jul' value='31800'/>
<set name='Aug' value='39700'/>
<set name='Sep' value='37800'/>
<set name='Oct' value='21900'/>
<set name='Nov' value='32900'/>
<set name='Dec' value='39800'/>
</graph> html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>My First FusionCharts</title>
<style type="text/css">
#dxf{
width:400px;
height:300px;
}
</style>
<script type="text/javascript" src="js/FusionCharts.js"></script>
</head>
<body bgcolor="#ffffff" >
<script type="text/javascript">
function createTb()
{
var chart = new FusionCharts("FusionCharts/Line.swf", "chartid", "400", "300");
chart.setDataURL("datas/Data.xml");
chart.render("dxf");
}
</script>
<a href="javascript:createTb()">ssssssss</a>
<div style="border:solid thin #000" id="dxf">
</div>
</body>
</html> 2 直接拼xml内容的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>My First FusionCharts</title>
<style type="text/css">
#dxf{
width:400px;
height:300px;
}
</style>
<script type="text/javascript" src="js/FusionCharts.js"></script>
</head>
<body bgcolor="#ffffff" >
<script type="text/javascript">
function createTb()
{
var xml="<graph xAxisName='Type' yAxisName='Units' showNames='图表' decimalPrecision='6' formatNumberScale='0'>"+
"<set name='Jan' value='17400'/>"+
"<set name='Feb' value='19800'/>"+
"<set name='Mar' value='21800'/>"+
"<set name='Apr' value='23800'/>"+
"<set name='May' value='29600'/>"+
"<set name='Jun' value='27600'/>"+
"<set name='Jul' value='31800'/>"+
"<set name='Aug' value='39700'/>"+
"<set name='Sep' value='37800'/>"+
"<set name='Oct' value='21900'/>"+
"<set name='Nov' value='32900'/>"+
"<set name='Dec' value='39800'/>"+
"</graph>";
var chart = new FusionCharts("FusionCharts/Line.swf", "chartid", "400", "300");
chart.setDataXML(xml);
chart.render("dxf");
}
</script>
<a href="javascript:createTb()">ssssssss</a>
<div style="border:solid thin #000" id="dxf">
</div>
</body>
</html>

FusionCharts之我用的更多相关文章

  1. JavaScript图表FusionCharts免费在线公开课,由印度原厂技术工程师主讲,10月13日发车

    FusionCharts公开课达人还你做 轻松晋升图表大师 [开课时间]10月13日 14:30[主讲老师]印度原厂技术工程师[开课形式]网络在线公开课[活动费用]前50名免费 现在就可以报名哦  报 ...

  2. FusionCharts和highcharts 饼图区别!

    FusionCharts ---------------脚本--------------- <script src="../../../fashioncharts/js/FusionC ...

  3. FusionCharts的使用方法(超详细)

    今天统计价格变化规律的时候找到的一个很好的文档,很详细 一.简介 Ø FusionCharts 是InfoSoft Global 公司的一个产品,InfoSoft Global 公司是专业的Flash ...

  4. FusionCharts参数说明 (中文)

    FushionCharts是把抽象数据图示化的套件,使用方便,配置简单.其相关参数中文说明如下. FusionCharts Free中文开发指南第二版.pdf 功能特性 animation       ...

  5. 关于使用FusionCharts生成图表时出现invalid xml data错误提示的解决方法

    FusionCharts的确功能是够强大的.收集的功能估计更强大.在初次使用时,对着手册,一步一步操作,就是生成图表工具不成功.一直报"Invalid xml data"错误.后面 ...

  6. FusionCharts饼图的图例属性

    showLegend 是否在图表中显示图例 legendPosition 图例可以显示在图表的底部(BOTTOM)或右侧(RIGHT) legendCaption 可以为图例整体定义一个标题 lege ...

  7. 使用Fusioncharts实现后台处理进度的前台展示

    本文要解决两个问题: 1.在ajax的数据交互中,如何获得后台的处理进度? 2.在前台界面中,如何使用图形化的方式展示后台处理进度?   关于第一个问题,不是本文的重点,简单说一下思路.因为HTTP协 ...

  8. FusionCharts中仪表盘相关属性

    上上周用FusionCharts做了几个报表,里面有个仪表盘,当时查属性查疯了,现在把相关的一些属性记下来,方便以后查找. -------------------------仪表盘重要属性解析---- ...

  9. FusionCharts制作报表使用XML导入数据时出现的中文乱码问题

    今天在使用FusionCharts制作报表时用XML导入数据,总是出现乱码问题,下面是我的解决方案. 让FusionCharts支持中文 刚刚将XML导入到html中后,在火狐浏览器一直报Invali ...

  10. FusionCharts教程文档下载

    FusionCharts是一个Flash的图表组件,它可以用来制作数据动画图表,其中动画效果用的是Adobe Flash 8 (原Macromedia Flash的)制作的flash , Fusion ...

随机推荐

  1. 笔记本能连上WIFI网络,但是无法上网怎么办

    在插网线的台式机上登陆192.168.1.1,点击无线设置,修改一下SSID号,别的什么都不用改.   然后保存,需要重启路由器.重启之后再用笔记本连接新的无线网络即可.

  2. CLR-基元类型以及溢出检查 (CLR-Via-C#) 类型基础

    CLR-基元类型以及溢出检查   =========(CLR via C#阅读笔记)======== 基元类型(primitive type): 基元类型也不做过多的解释,举个例子即可清晰的辨别 在j ...

  3. POJ 3260 The Fewest Coins(多重背包+全然背包)

    POJ 3260 The Fewest Coins(多重背包+全然背包) http://poj.org/problem?id=3260 题意: John要去买价值为m的商品. 如今的货币系统有n种货币 ...

  4. 图像处理之基础---yuv420及其rgb,bayer, yuv, RGB的相互转换详解

    YUV格式解析1(播放器——project2) 根据板卡api设计实现yuv420格式的视频播放器 打开*.mp4;*.264类型的文件,实现其播放. 使用的视频格式是YUV420格式   YUV格式 ...

  5. [整理]EABI和OABI【转】

    本文转载自:https://www.crifan.com/order_eabi_and_oabi/ 1.什么是ABIABI,application binary interface (ABI),应用程 ...

  6. POJ 2562:Primary Arithmetic

    Primary Arithmetic Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 11135   Accepted: 40 ...

  7. POJ2686 Traveling by Stagecoach 状态压缩DP

    POJ2686 比较简单的 状态压缩DP 注意DP方程转移时,新的状态必然数值上小于当前状态,故最外层循环为状态从大到小即可. #include <cstdio> #include < ...

  8. AIZU AOJ 2309 Vector Compression 最小树形图(朱—刘算法)

    题意简述:给定若干个相同维度的向量,寻找一种排序方法,使得所有向量的表示长度总和最低. 所谓表示长度为(Aj-r*Ai)^2,其中i<j  数据范围:向量总数和维度均小于100 思路:(1)首先 ...

  9. Java中wait和sleep方法的区别

    1.两者的区别 这两个方法来自不同的类分别是Thread和Object 最主要是sleep方法没有释放锁,而wait方法释放了锁,使得其他线程可以使用同步控制块或者方法(锁代码块和方法锁). wait ...

  10. 4-2 买家类目-dao(下)

    查询出来的对象ProductCategory就已经有updateTime和createTime了,然而你只是把对象的categoryType给修改了一下,修改之后就执行save方法保存了.所以它还是原 ...