FusionCharts 入门例子（JsonData）

最近在用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":
         [
             {"label":"Week 1","value":"14400"},
             {"label":"Week 2","value":"19600"},
             {"label":"Week 3","value":"24000"},
             {"label":"Week 4","value":"15700"}
         ]
  });
  charts.render("line");
 }
});

代码复制上就可以使用，仅供学习~