FusionCharts 入门例子(JsonData)
2013-03-19 18:30
447 查看
最近在用extjs+fusioncharts,所以找点资料先看一下,这个例子是用pie2d,column2d,line来做的,通过点击复选框来动态显示图表,代码如下:
1. 准备工作: fusioncharts.js 注意:如果用jsondata,那么有的js里没有这个方法,需要自行下载带setjsondata函数的js文件
swf文件夹,里面是一些swf格式的文件,也就是显示的样式
2. jsp页面:很简单 导入extjs文件和fusioncharts的js文件
<link rel="stylesheet" href="<%=path %>/ext/resources/css/ext-all.css" type="text/css"></link>
<script type="text/javascript" src="<%=path %>/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=path %>/ext/ext-all.js"></script>
<script type="text/javascript" src="<%=path %>/fushioncharts/js/FusionCharts.js"></script>
<script type="text/javascript" src="charttest.js">
</script>
2. charttest.js
Ext.chart.Chart.CHART_URL = 'ext/resources/charts.swf';
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';// 替换图片文件地址为本地
var linedis;
var columndis;
var piedis;
Ext.onReady(function(){
var panel=new Ext.Panel({
title:"My Chart Panel",
layout:"fit",//自动填充
autoScroll:true,
height:768,
renderTo:document.body,
tbar:new Ext.Toolbar({
items:[{
text:"Change Data",//自动获取初始化数据
handler:function(){
var checks=Ext.getCmp("mygroup").items;
for(var i=0;i<checks.length;i++){//设置复选框为选中
checks.get(i).setValue(true);
}
getInit();//初始化三个图
}
},new Ext.form.CheckboxGroup({//复选框按钮组
id:"mygroup",
xtype:"checkboxgroup",
itemCls: 'x-check-group-alt',
columns:3,
height:20,
items:[{
xtype:"checkbox",
boxLabel:"线形图",
id:"xxtcheck",
name:"check",
listeners:{//在选中的时候触发事件 根据是否选中来给标识赋值 并计算宽度和高度 重新生成图
check:function(){
linedis=this.getValue();
create();
}
}
},{
xtype:"checkbox",
boxLabel:"饼状图",
id:"bztcheck",
name:"check",
listeners:{
check:function(){
piedis=this.getValue();
create();
}
}
},{
xtype:"checkbox",
boxLabel:"柱状图",
id:"zztcheck",
name:"check",
listeners:{
check:function(){
columndis=this.getValue();
create();
}
}
}]
})]
}),
html:"<div id='pie' style='display:inline'></div><div id='column' style='display:inline'></div><div id='line' style='display:inline'></div>"
});
function clear(){//清理div
document.getElementById("pie").innerHTML="";
document.getElementById("line").innerHTML="";
document.getElementById("column").innerHTML="";
}
function create(){//点击复选框触发的函数
clear();
var count=getDisCount();//获取被选中的个数 用以计算
if(piedis){//根据被选中的类型 计算
var jsonsize=calcPieColumnSize(count);
var width=jsonsize.width;
var height=jsonsize.height;
createPie(width,height);
}
if(columndis){
var jsonsize=calcPieColumnSize(count);
var width=jsonsize.width;
var height=jsonsize.height;
createColumn(width,height);
}
if(linedis){//线性图的计算方式在这个例子里和其他两种不同 如果三个都显示的话 这个图显示在第二行
var jsonsize=calcLineSize(count);
var width=jsonsize.width;
var height=jsonsize.height;
createLine(width,height);
}
}
function calcWidthHeight(count){//业务逻辑抽象出来 根据count计算宽度和高度
var width=panel.getWidth()-20;
var height=panel.getHeight()-60;
width=parseInt(width/count);
height=parseInt(height/count);
return {width:width,height:height};
}
function calcPieColumnSize(count){//根据不同的类型 做不同的count赋值
if(count==3) count=2; //第一行就算三个全选中 也只显示两个 第三个另起一行显示
return calcWidthHeight(count);
}
function calcLineSize(count){//根据不同的类型 做不同的count赋值
if(count==3) count=1;//如果有三个 那么他在第二行占全部宽度
return calcWidthHeight(count);
}
function getDisCount(){//获取被选中的总数
var count=0;
if(piedis){
count++;
}
if(columndis){
count++;
}
if(linedis){
count++;
}
return count;
}
function getInit(){//初始化
var width=panel.getWidth();
var height=panel.getHeight()-60;
createLine(width-20,height/2);
createPie((width-20)/2,height/2);
createColumn((width-20)/2,height/2);
}
function createPie(width,height){//创建饼图 有个地方没弄明白 不知道怎么把饼图旁边的注释去掉
piedis=true;
var charts=new FusionCharts("fushioncharts/swf/Pie2D.swf","pieid",width,height);
charts.setJSONData({
"chart":
{
"showCanvasBg" : "0",
"caption" : "饼状图",
"baseFontSize" : "15",// 字体大小
"bgColor" : "ffffff",
"aboutmenuitemlabel" : "百度",
"aboutmenuitemlink" : "n-http://www.baidu.com",
"formatNumberScale" : "0",
"decimalPrecision" : '0'
},
"data":
[
{"label":"","value":"14400"},
{"label":"","value":"19600"},
{"label":"","value":"24000"},
{"label":"","value":"15700"}
]
});
charts.render("pie");
}
function createColumn(width,height){//柱状图
columndis=true;
var charts=new FusionCharts("fushioncharts/swf/Column2D.swf","columnid",width,height);
charts.setJSONData({
"chart":
{
"showCanvasBg" : "0",
"caption" : "柱状图",
"baseFontSize" : "15",// 字体大小
"bgColor" : "ffffff",
"aboutmenuitemlabel" : "青岛海博科技",
"aboutmenuitemlink" : "n-http://www.baidu.com",
"formatNumberScale" : "0",
"decimalPrecision" : '0'
},
"data":
[
{"label":"Week 1","value":"14400"},
{"label":"Week 2","value":"19600"},
{"label":"Week 3","value":"24000"},
{"label":"Week 4","value":"15700"}
]
});
charts.render("column");
}
function createLine(width,height){//线性图
linedis=true;
var charts=new FusionCharts("fushioncharts/swf/Line.swf","lineid",width,height);
charts.setJSONData({
"chart":
{
"showCanvasBg" : "0",
"caption" : "线状图",
"baseFontSize" : "15",// 字体大小
"bgColor" : "ffffff",
"aboutmenuitemlabel" : "百度",
"aboutmenuitemlink" : "n-http://www.baidu.com",
"formatNumberScale" : "0",
"decimalPrecision" : '0'
},
"data
4000
":
[
{"label":"Week 1","value":"14400"},
{"label":"Week 2","value":"19600"},
{"label":"Week 3","value":"24000"},
{"label":"Week 4","value":"15700"}
]
});
charts.render("line");
}
});
代码复制上就可以使用,仅供学习~
1. 准备工作: fusioncharts.js 注意:如果用jsondata,那么有的js里没有这个方法,需要自行下载带setjsondata函数的js文件
swf文件夹,里面是一些swf格式的文件,也就是显示的样式
2. jsp页面:很简单 导入extjs文件和fusioncharts的js文件
<link rel="stylesheet" href="<%=path %>/ext/resources/css/ext-all.css" type="text/css"></link>
<script type="text/javascript" src="<%=path %>/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=path %>/ext/ext-all.js"></script>
<script type="text/javascript" src="<%=path %>/fushioncharts/js/FusionCharts.js"></script>
<script type="text/javascript" src="charttest.js">
</script>
2. charttest.js
Ext.chart.Chart.CHART_URL = 'ext/resources/charts.swf';
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';// 替换图片文件地址为本地
var linedis;
var columndis;
var piedis;
Ext.onReady(function(){
var panel=new Ext.Panel({
title:"My Chart Panel",
layout:"fit",//自动填充
autoScroll:true,
height:768,
renderTo:document.body,
tbar:new Ext.Toolbar({
items:[{
text:"Change Data",//自动获取初始化数据
handler:function(){
var checks=Ext.getCmp("mygroup").items;
for(var i=0;i<checks.length;i++){//设置复选框为选中
checks.get(i).setValue(true);
}
getInit();//初始化三个图
}
},new Ext.form.CheckboxGroup({//复选框按钮组
id:"mygroup",
xtype:"checkboxgroup",
itemCls: 'x-check-group-alt',
columns:3,
height:20,
items:[{
xtype:"checkbox",
boxLabel:"线形图",
id:"xxtcheck",
name:"check",
listeners:{//在选中的时候触发事件 根据是否选中来给标识赋值 并计算宽度和高度 重新生成图
check:function(){
linedis=this.getValue();
create();
}
}
},{
xtype:"checkbox",
boxLabel:"饼状图",
id:"bztcheck",
name:"check",
listeners:{
check:function(){
piedis=this.getValue();
create();
}
}
},{
xtype:"checkbox",
boxLabel:"柱状图",
id:"zztcheck",
name:"check",
listeners:{
check:function(){
columndis=this.getValue();
create();
}
}
}]
})]
}),
html:"<div id='pie' style='display:inline'></div><div id='column' style='display:inline'></div><div id='line' style='display:inline'></div>"
});
function clear(){//清理div
document.getElementById("pie").innerHTML="";
document.getElementById("line").innerHTML="";
document.getElementById("column").innerHTML="";
}
function create(){//点击复选框触发的函数
clear();
var count=getDisCount();//获取被选中的个数 用以计算
if(piedis){//根据被选中的类型 计算
var jsonsize=calcPieColumnSize(count);
var width=jsonsize.width;
var height=jsonsize.height;
createPie(width,height);
}
if(columndis){
var jsonsize=calcPieColumnSize(count);
var width=jsonsize.width;
var height=jsonsize.height;
createColumn(width,height);
}
if(linedis){//线性图的计算方式在这个例子里和其他两种不同 如果三个都显示的话 这个图显示在第二行
var jsonsize=calcLineSize(count);
var width=jsonsize.width;
var height=jsonsize.height;
createLine(width,height);
}
}
function calcWidthHeight(count){//业务逻辑抽象出来 根据count计算宽度和高度
var width=panel.getWidth()-20;
var height=panel.getHeight()-60;
width=parseInt(width/count);
height=parseInt(height/count);
return {width:width,height:height};
}
function calcPieColumnSize(count){//根据不同的类型 做不同的count赋值
if(count==3) count=2; //第一行就算三个全选中 也只显示两个 第三个另起一行显示
return calcWidthHeight(count);
}
function calcLineSize(count){//根据不同的类型 做不同的count赋值
if(count==3) count=1;//如果有三个 那么他在第二行占全部宽度
return calcWidthHeight(count);
}
function getDisCount(){//获取被选中的总数
var count=0;
if(piedis){
count++;
}
if(columndis){
count++;
}
if(linedis){
count++;
}
return count;
}
function getInit(){//初始化
var width=panel.getWidth();
var height=panel.getHeight()-60;
createLine(width-20,height/2);
createPie((width-20)/2,height/2);
createColumn((width-20)/2,height/2);
}
function createPie(width,height){//创建饼图 有个地方没弄明白 不知道怎么把饼图旁边的注释去掉
piedis=true;
var charts=new FusionCharts("fushioncharts/swf/Pie2D.swf","pieid",width,height);
charts.setJSONData({
"chart":
{
"showCanvasBg" : "0",
"caption" : "饼状图",
"baseFontSize" : "15",// 字体大小
"bgColor" : "ffffff",
"aboutmenuitemlabel" : "百度",
"aboutmenuitemlink" : "n-http://www.baidu.com",
"formatNumberScale" : "0",
"decimalPrecision" : '0'
},
"data":
[
{"label":"","value":"14400"},
{"label":"","value":"19600"},
{"label":"","value":"24000"},
{"label":"","value":"15700"}
]
});
charts.render("pie");
}
function createColumn(width,height){//柱状图
columndis=true;
var charts=new FusionCharts("fushioncharts/swf/Column2D.swf","columnid",width,height);
charts.setJSONData({
"chart":
{
"showCanvasBg" : "0",
"caption" : "柱状图",
"baseFontSize" : "15",// 字体大小
"bgColor" : "ffffff",
"aboutmenuitemlabel" : "青岛海博科技",
"aboutmenuitemlink" : "n-http://www.baidu.com",
"formatNumberScale" : "0",
"decimalPrecision" : '0'
},
"data":
[
{"label":"Week 1","value":"14400"},
{"label":"Week 2","value":"19600"},
{"label":"Week 3","value":"24000"},
{"label":"Week 4","value":"15700"}
]
});
charts.render("column");
}
function createLine(width,height){//线性图
linedis=true;
var charts=new FusionCharts("fushioncharts/swf/Line.swf","lineid",width,height);
charts.setJSONData({
"chart":
{
"showCanvasBg" : "0",
"caption" : "线状图",
"baseFontSize" : "15",// 字体大小
"bgColor" : "ffffff",
"aboutmenuitemlabel" : "百度",
"aboutmenuitemlink" : "n-http://www.baidu.com",
"formatNumberScale" : "0",
"decimalPrecision" : '0'
},
"data
4000
":
[
{"label":"Week 1","value":"14400"},
{"label":"Week 2","value":"19600"},
{"label":"Week 3","value":"24000"},
{"label":"Week 4","value":"15700"}
]
});
charts.render("line");
}
});
代码复制上就可以使用,仅供学习~
相关文章推荐
- Json 入门例子(form表单)【0】
- Net 3.5 用DataContractJsonSerializer实现Json序列和反序列例子
- Net 3.5 用DataContractJsonSerializer实现Json序列和反序列例子
- JSON入门小例子
- Spring Data MongoDB 入门例子
- Net 3.5 用DataContractJsonSerializer实现Json序列和反序列例子
- JSON入门小例子
- Json 入门例子【2】
- fusioncharts入门系列4之setJSONData和insertFusionCharts
- 记一个Silveright DataContractJsonSerializer序列化失败的例子
- Net 3.5 用DataContractJsonSerializer实现Json序列和反序列例子
- mybatis学习-入门(4)-一个完整的web例子,通过json将字符串传递给前台,然后显示出来
- Json 入门例子 多行数组 【1】
- json 入门--例子
- Json 入门例子【3】
- Spring Data JPA 入门例子
- Net 3.5 用DataContractJsonSerializer实现Json序列和反序列例子
- Net 3.5 用DataContractJsonSerializer实现Json序列和反序列例子
- JSON入门小例子(转)
- CoreData入门例子