FusionCharts之我用
fusioncharts:(此控件需flash支持)
使用该插件需要首先做的两件事
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为否。
两个完整的例子:
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之我用的更多相关文章
- JavaScript图表FusionCharts免费在线公开课,由印度原厂技术工程师主讲,10月13日发车
FusionCharts公开课达人还你做 轻松晋升图表大师 [开课时间]10月13日 14:30[主讲老师]印度原厂技术工程师[开课形式]网络在线公开课[活动费用]前50名免费 现在就可以报名哦 报 ...
- FusionCharts和highcharts 饼图区别!
FusionCharts ---------------脚本--------------- <script src="../../../fashioncharts/js/FusionC ...
- FusionCharts的使用方法(超详细)
今天统计价格变化规律的时候找到的一个很好的文档,很详细 一.简介 Ø FusionCharts 是InfoSoft Global 公司的一个产品,InfoSoft Global 公司是专业的Flash ...
- FusionCharts参数说明 (中文)
FushionCharts是把抽象数据图示化的套件,使用方便,配置简单.其相关参数中文说明如下. FusionCharts Free中文开发指南第二版.pdf 功能特性 animation ...
- 关于使用FusionCharts生成图表时出现invalid xml data错误提示的解决方法
FusionCharts的确功能是够强大的.收集的功能估计更强大.在初次使用时,对着手册,一步一步操作,就是生成图表工具不成功.一直报"Invalid xml data"错误.后面 ...
- FusionCharts饼图的图例属性
showLegend 是否在图表中显示图例 legendPosition 图例可以显示在图表的底部(BOTTOM)或右侧(RIGHT) legendCaption 可以为图例整体定义一个标题 lege ...
- 使用Fusioncharts实现后台处理进度的前台展示
本文要解决两个问题: 1.在ajax的数据交互中,如何获得后台的处理进度? 2.在前台界面中,如何使用图形化的方式展示后台处理进度? 关于第一个问题,不是本文的重点,简单说一下思路.因为HTTP协 ...
- FusionCharts中仪表盘相关属性
上上周用FusionCharts做了几个报表,里面有个仪表盘,当时查属性查疯了,现在把相关的一些属性记下来,方便以后查找. -------------------------仪表盘重要属性解析---- ...
- FusionCharts制作报表使用XML导入数据时出现的中文乱码问题
今天在使用FusionCharts制作报表时用XML导入数据,总是出现乱码问题,下面是我的解决方案. 让FusionCharts支持中文 刚刚将XML导入到html中后,在火狐浏览器一直报Invali ...
- FusionCharts教程文档下载
FusionCharts是一个Flash的图表组件,它可以用来制作数据动画图表,其中动画效果用的是Adobe Flash 8 (原Macromedia Flash的)制作的flash , Fusion ...
随机推荐
- 笔记本能连上WIFI网络,但是无法上网怎么办
在插网线的台式机上登陆192.168.1.1,点击无线设置,修改一下SSID号,别的什么都不用改. 然后保存,需要重启路由器.重启之后再用笔记本连接新的无线网络即可.
- CLR-基元类型以及溢出检查 (CLR-Via-C#) 类型基础
CLR-基元类型以及溢出检查 =========(CLR via C#阅读笔记)======== 基元类型(primitive type): 基元类型也不做过多的解释,举个例子即可清晰的辨别 在j ...
- POJ 3260 The Fewest Coins(多重背包+全然背包)
POJ 3260 The Fewest Coins(多重背包+全然背包) http://poj.org/problem?id=3260 题意: John要去买价值为m的商品. 如今的货币系统有n种货币 ...
- 图像处理之基础---yuv420及其rgb,bayer, yuv, RGB的相互转换详解
YUV格式解析1(播放器——project2) 根据板卡api设计实现yuv420格式的视频播放器 打开*.mp4;*.264类型的文件,实现其播放. 使用的视频格式是YUV420格式 YUV格式 ...
- [整理]EABI和OABI【转】
本文转载自:https://www.crifan.com/order_eabi_and_oabi/ 1.什么是ABIABI,application binary interface (ABI),应用程 ...
- POJ 2562:Primary Arithmetic
Primary Arithmetic Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 11135 Accepted: 40 ...
- POJ2686 Traveling by Stagecoach 状态压缩DP
POJ2686 比较简单的 状态压缩DP 注意DP方程转移时,新的状态必然数值上小于当前状态,故最外层循环为状态从大到小即可. #include <cstdio> #include < ...
- AIZU AOJ 2309 Vector Compression 最小树形图(朱—刘算法)
题意简述:给定若干个相同维度的向量,寻找一种排序方法,使得所有向量的表示长度总和最低. 所谓表示长度为(Aj-r*Ai)^2,其中i<j 数据范围:向量总数和维度均小于100 思路:(1)首先 ...
- Java中wait和sleep方法的区别
1.两者的区别 这两个方法来自不同的类分别是Thread和Object 最主要是sleep方法没有释放锁,而wait方法释放了锁,使得其他线程可以使用同步控制块或者方法(锁代码块和方法锁). wait ...
- 4-2 买家类目-dao(下)
查询出来的对象ProductCategory就已经有updateTime和createTime了,然而你只是把对象的categoryType给修改了一下,修改之后就执行save方法保存了.所以它还是原 ...