FushionCharts 使用案例

效果图：

js代码

柱状图：

  LoadColumn:function(formdata){        var designer=this;        var str=[];        var i;        for(i=0;i<formdata.length;i++){            var N=formdata[i].date;            var V=formdata[i].count;            str.push({"label":N,"value":V});        }        var data1={            "chart": {                "caption": "OBD Fault Histogram Stats",                "subcaption": "",                "xaxisname": "date",                "yaxismaxvalue": "100",                "bgcolor": "91AF46,FFFFFF",                "divlinecolor": "91AF46",                "divlinealpha": "30",                "alternatehgridalpha": "5",                "canvasbordercolor": "666666",                "basefontcolor": "666666",                "linecolor": "91AF46",                "numvdivlines": "7",                "showalternatevgridcolor": "1",                "anchorsides": "3",                "anchorradius": "5",                "showvalues": "0"            },            "data":str,            "trendlines": [                {                    "line": [                    ]                }            ]}        var chart1 = new FusionCharts("../themes/js/public/Charts/Column2D.swf", "GZ_LinChart", designer.lfttop.getWidth(), designer.lfttop.getHeight()-5, "0", "0");        chart1.setJSONData(data1);        chart1.render("OBD_GZBB_ZZT");    } ,

饼图：

  LoadPie:function(formdata){        var designer=this;        var str=[];        var i;        for(i=0;i<formdata.length;i++){            var N=formdata[i].faultName;            var V=formdata[i].percent;            str.push({"label":N,"value":V});        }        var dataString2 ={            "chart": {                "caption": "OBD Fault Pie Stats",                "showpercentageinlabel": "1",                "showvalues": "1",                "showlabels": "0",                "showlegend": "1",                "showpercentvalues": "1"            },            "data": str        };        this.idnub++;        var chart2 = new FusionCharts("../themes/js/public/Charts/Pie2D.swf", "GZ_PieChart", designer.rfttop.getWidth(), designer.rfttop.getHeight()-5, "0", "0");        chart2.setJSONData(dataString2 );        chart2.render("OBD_GZBB_BT");    } ,

具体的：

使用查询后，然后再去加载两个状体图

  /**     * 查询     */    btn_Query_Click: function () {        if(this.vlpnFlag!=0){            Ext.MessageBox.alert(resourceMsgTitle,resourceChooseVehicle);            return;        }        if(!this.beginDt.isValid() || !this.endDt.isValid())        {            Ext.MessageBox.alert(resourceMsgTitle,TimeinvalidText);            return;        }        if(this.beginDt.getValue().format('Y-m-d H:i:s')            > this.endDt.getValue().format('Y-m-d H:i:s'))        {            Ext.MessageBox.alert(resourceMsgTitle,resourceTimeLimit);            return;        }        this.beginDateTime =this.beginDt.getValue().format('Y-m-d H:i:s');        this.endDateTime = this.endDt.getValue().format('Y-m-d H:i:s');        this.loadPageStore();        this.ajaxFaultPie(this.LoadPie.createDelegate(this));        this.ajaxFaultColumn(this.LoadColumn.createDelegate(this));    },    ajaxFaultPie:function(callback){        Ext.Ajax.request({            url:  $("#ctx").val() + '/purview/obd_report/fetchOBDFaultPie.action',            method: "POST",            params: {                'vid':  this.CurrentVehicleId,                'startTime':this.beginDateTime,                'endTime':this.endDateTime            },            success: function (response, opts) {                var formDat = [];                formData= response.responseJSON.resultItemPies;                callback(formData);            },            failure: function () {                Ext.MessageBox.alert(resourceMsgTitle, resourceAddFail);                return;            }        });    },    ajaxFaultColumn:function(callback){        Ext.Ajax.request({            url:  $("#ctx").val() + '/purview/obd_report/fetchOBDFaultColumn.action',            method: "POST",            params: {                'vid':  this.CurrentVehicleId,                'startTime':this.beginDateTime,                'endTime':this.endDateTime            },            success: function (response, opts) {                var formDat = [];                formData= response.responseJSON.resultItemColumns;                callback(formData);            },            failure: function () {                Ext.MessageBox.alert(resourceMsgTitle, resourceAddFail);                return;            }        });    },

附：完整的代码以及完整的效果：

/** * Created with IntelliJ IDEA. * User: Administrator * Date: 14-4-3 * Time: 上午11:12 * To change this template use File | Settings | File Templates. * OBD故障报表 */GZ_OBDHANDLER = function (moduleName, moduleText, moduleIcon) {    if (moduleName == "" || moduleText == "" || moduleIcon == "") return;    HideMainMenu(0);//隐藏主菜单    var designer = new GZ_OBDHANDLER_Designer();    AddTab(moduleText, moduleName, designer.container, moduleIcon);//    designer.LoadChart1();//    designer.LoadData2();  //刚开始进入界面后，图表是没有数据可以显示的}function GZ_OBDHANDLER_Designer() {    this.vidDidStr="";//车辆ID串    this.container;    this.store;    this.grid;    this.vlpnFlag=1;//0表示为 选中的是车辆  1表示选中的是组织    this.CurrentVehicleId=-1;  //车辆ID    this.CurrentVehicleName="";  //车牌号    //查询条件    this.pageSize = 10;    this.container;    this.InitComponent();}GZ_OBDHANDLER_Designer.prototype = {    LoadPie:function(formdata){        var designer=this;        var str=[];        var i;        for(i=0;i<formdata.length;i++){            var N=formdata[i].faultName;            var V=formdata[i].percent;            str.push({"label":N,"value":V});        }        var dataString2 ={            "chart": {                "caption": "OBD Fault Pie Stats",                "showpercentageinlabel": "1",                "showvalues": "1",                "showlabels": "0",                "showlegend": "1",                "showpercentvalues": "1"            },            "data": str        };        this.idnub++;        var chart2 = new FusionCharts("../themes/js/public/Charts/Pie2D.swf", "GZ_PieChart", designer.rfttop.getWidth(), designer.rfttop.getHeight()-5, "0", "0");        chart2.setJSONData(dataString2 );        chart2.render("OBD_GZBB_BT");    } ,    LoadColumn:function(formdata){        var designer=this;        var str=[];        var i;        for(i=0;i<formdata.length;i++){            var N=formdata[i].date;            var V=formdata[i].count;            str.push({"label":N,"value":V});        }        var data1={            "chart": {                "caption": "OBD Fault Histogram Stats",                "subcaption": "",                "xaxisname": "date",                "yaxismaxvalue": "100",                "bgcolor": "91AF46,FFFFFF",                "divlinecolor": "91AF46",                "divlinealpha": "30",                "alternatehgridalpha": "5",                "canvasbordercolor": "666666",                "basefontcolor": "666666",                "linecolor": "91AF46",                "numvdivlines": "7",                "showalternatevgridcolor": "1",                "anchorsides": "3",                "anchorradius": "5",                "showvalues": "0"            },            "data":str,            "trendlines": [                {                    "line": [                    ]                }            ]}        var chart1 = new FusionCharts("../themes/js/public/Charts/Column2D.swf", "GZ_LinChart", designer.lfttop.getWidth(), designer.lfttop.getHeight()-5, "0", "0");        chart1.setJSONData(data1);        chart1.render("OBD_GZBB_ZZT");    } ,    /**     * 请求新的数据对象之前触发     */    beforeloadStore: function (thiz, options) {        thiz.baseParams["vid"] =  this.CurrentVehicleId;        thiz.baseParams["startTime"] = this.beginDateTime;        thiz.baseParams["endTime"] = this.endDateTime;    },    /**     * 采用当前参数加载Record缓存     */    loadPageStore: function (inPageSize) {        this.store.removeAll();        this.pageSize = inPageSize == undefined ? this.pageSize : inPageSize;        this.store.load({            params: { start: 0, limit: this.pageSize,                'vid':  this.CurrentVehicleId,                'startTime':this.beginDateTime,                'endTime':this.endDateTime            }        });    },    /**     * 采用上一次参数加载Record缓存     */    reloadStore: function () {        this.store.reload();    },    /**     * 查询     */    btn_Query_Click: function () {        if(this.vlpnFlag!=0){            Ext.MessageBox.alert(resourceMsgTitle,resourceChooseVehicle);            return;        }        if(!this.beginDt.isValid() || !this.endDt.isValid())        {            Ext.MessageBox.alert(resourceMsgTitle,TimeinvalidText);            return;        }        if(this.beginDt.getValue().format('Y-m-d H:i:s')            > this.endDt.getValue().format('Y-m-d H:i:s'))        {            Ext.MessageBox.alert(resourceMsgTitle,resourceTimeLimit);            return;        }        this.beginDateTime =this.beginDt.getValue().format('Y-m-d H:i:s');        this.endDateTime = this.endDt.getValue().format('Y-m-d H:i:s');        this.loadPageStore();        this.ajaxFaultPie(this.LoadPie.createDelegate(this));        this.ajaxFaultColumn(this.LoadColumn.createDelegate(this));    },    ajaxFaultPie:function(callback){        Ext.Ajax.request({            url:  $("#ctx").val() + '/purview/obd_report/fetchOBDFaultPie.action',            method: "POST",            params: {                'vid':  this.CurrentVehicleId,                'startTime':this.beginDateTime,                'endTime':this.endDateTime            },            success: function (response, opts) {                var formDat = [];                formData= response.responseJSON.resultItemPies;                callback(formData);            },            failure: function () {                Ext.MessageBox.alert(resourceMsgTitle, resourceAddFail);                return;            }        });    },    ajaxFaultColumn:function(callback){        Ext.Ajax.request({            url:  $("#ctx").val() + '/purview/obd_report/fetchOBDFaultColumn.action',            method: "POST",            params: {                'vid':  this.CurrentVehicleId,                'startTime':this.beginDateTime,                'endTime':this.endDateTime            },            success: function (response, opts) {                var formDat = [];                formData= response.responseJSON.resultItemColumns;                callback(formData);            },            failure: function () {                Ext.MessageBox.alert(resourceMsgTitle, resourceAddFail);                return;            }        });    },       //******左边车辆，点击等的方法    //车辆筛选    btn_QueryVehicle_Click:function(){        this.vehicleTreeCtrl.reload(this.txt_VehicleName.getValue().trim().toString());    },    //点击数节点事件    treeClickHandler: function(node) {        if(node.attributes.type == 0)        {            this.vlpnFlag=1;//是组织            this.groupId =node.attributes.id;            this.groupName = node.attributes.text;        }        else if(node.attributes.type == 1)        {            this.vlpnFlag=0; //表示是叶子节点的车辆            this.CurrentVehicleId = node.attributes.vid;            this.CurrentVehicleName = node.attributes.text;        }    }}GZ_OBDHANDLER_Designer.prototype.InitComponent = function () {    // 1) 车辆树 条件    this.vehicleTreeCtrl =new DeviceTreeTotal();    this.vehicleTreeCtrl.tempTree.on("click", this.treeClickHandler, this);    this.txt_VehicleName = new Ext.form.TextField({        name: "VehicleName",        width:110    });    //2) 日期 条件    this.beginDate = new Ext.form.DateField({        name: 'beginDate',        fieldLabel:LabelbeginTime,        value: new Date(),        format: "Y-m-d",        selectOnFocus: true,        invalidText: TimeinvalidText,        allowBlank: false,        blankText: resourceNotEmptyTime,        width: 100    });    this.beginTime = CreatDateTimeCtrl(8, 0, 0);    this.beginTime[0].setValue(0);    this.beginTime[1].setValue(0);    this.endDate = new Ext.form.DateField({        name: 'beginDate',        fieldLabel: LabelEndTime,        value: new Date(),        format: "Y-m-d",        selectOnFocus: true,        invalidText:TimeinvalidText,        allowBlank: false,        blankText: resourceNotEmptyTime,        width: 100    });    this.endTime = CreatDateTimeCtrl(18, 0, 0);    this.endTime[0].setValue(23);    this.endTime[1].setValue(59);    this.beginDt = new Ext.ux.form.DateTimeField({        fieldLabel: LabelbeginTime,        selectOnFocus: true,        allowBlank: false,        value: new Date(),        format: 'Y-m-d H:i:s',        blankText: resourceNotEmptyTime,        width: 145    });    this.endDt = new Ext.ux.form.DateTimeField({        fieldLabel: LabelEndTime,        selectOnFocus: true,        allowBlank: false,        value: new Date(),        format: 'Y-m-d H:i:s',        blankText: resourceNotEmptyTime,        width: 145    });    this.startButton = new Ext.Button({        text: resourceQuery,        minWidth: 50,        handler: this.btn_Query_Click.createDelegate(this)    });    //4) 日期和查询按钮 汇总    var configParam = new Ext.Panel({        region: 'south',        layout: 'form',        labelWidth: 65,        split: true,        height: 100,        labelAlign: 'right',        bodyStyle: 'padding-top:10px;',        buttonAlign:"center",        items: [            this.beginDt,            this.endDt        ],        buttons: [this.startButton]//,this.yestButton,this.startButton]    });    //6）*****左边全部 汇总    this.leftContainer = new Ext.Panel({        layout: "border",        region: 'west',        split: true,        initialSize: 240,        minSize: 240,        maxSize: 400,        width: 220,        collapsible: true,        items: [this.vehicleTreeCtrl.tempTree, configParam],        tbar:[resourceLpn,this.txt_VehicleName,{            text:resourceQuery,            pressed:true,            iconCls:'serchrecord',            handler:this.btn_QueryVehicle_Click.createDelegate(this)        }]    });    //********右边****************************************************************    //1、右上***左边 两个fashionchart  /*  this.comStore = new Ext.data.Store({        autoLoad: true,        proxy: new Ext.data.HttpProxy({            url: $("#ctx").val() + "/purview/obd_report/fetchOBDAlarmReport.action",            method: "POST"        }),        reader: new Ext.data.JsonReader({            fields: ['value', 'text'],            root: "dateList"        })    });    this.Comb_year = new Ext.form.ComboBox({        fieldLabel: '年度',        hiddenName: "year",        valueField: 'value',        displayField: 'text',        store: this.comStore,        typeAhead: true,        mode: 'local',        triggerAction: 'all',        selectOnFocus: true,        forceSelection: true,        editable: false,        allowBlank: false,        width: 180    });*///    this.Comb_year.on("select",this.change1.createDelegate(this),this);    this.lfttop=new Ext.Panel({        region:'center',        layout:'fit',        html:'<div id="OBD_GZBB_ZZT" style="height: 100%;width: 100%"></div>'    });    this.lftbottom=new Ext.Panel({        region:'south',        height:300,//        html:"数据统计描述：" ,        items:[]    });    this.lftpl=new Ext.Panel({        layout:'border',        columnWidth:.5,        height:center.height,        items:[this.lfttop,this.lftbottom]//        tbar:["<b>统计年度</b>",this.Comb_year]    });    //1. 右上***右边边 两个fashionchart   /* this.Comb_year2 = new Ext.form.ComboBox({        fieldLabel: '年度',        hiddenName: "year2",        valueField: 'value',        displayField: 'text',        store: this.comStore,        typeAhead: true,        mode: 'local',        triggerAction: 'all',        selectOnFocus: true,        forceSelection: true,        editable: false,        allowBlank: false,        width: 180    });*///    this.Comb_year2.on("select",this.change2.createDelegate(this),this);    this.rfttop=new Ext.Panel({        region:'center',        layout:'fit',        html:'<div id="OBD_GZBB_BT" style="height: 100%;width: 100%"></div>'    });    this.rftbottom=new Ext.Panel({        region:'south',        height:300,//        html:'数据统计分析：',        items:[]    });    this.rftpl=new Ext.Panel({        layout:'border',        height:center.height,        columnWidth:.5,        items:[this.rfttop,this.rftbottom]//        tbar:["<b>统计年度</b>",this.Comb_year2]    });    //2. 右上 左+右    this.mainpl=new Ext.Panel({        region: "center",        layout:'column',        items:[this.lftpl,this.rftpl]    });    //字段参数    var fields = [        "vid",        "lpn",        "gpsTime",        "sim",        "faultNum",        "faultName",        "fuel100Miles" ,        "fuelMoment",        "fuelThisTime",        "fuelMax"    ];    this.store = new Ext.data.Store({        proxy: new Ext.data.HttpProxy({            url: $("#ctx").val() + '/purview/obd_report/fetchOBDFault.action',            method: "POST"        }),        reader: new Ext.data.JsonReader({            fields: fields,            root: "lstOBDFault"//,//            id: "vid",//            totalProperty: "totalCount"        })    });    this.store.on("beforeload", this.beforeloadStore, this);//    this.store.on("load",this.storeLoad.createDelegate(this)); //数据加载列表store后//    var sm = new Ext.grid.CheckboxSelectionModel({ dataIndex: "vid" });    var cm = new Ext.grid.ColumnModel([//        sm,        new Ext.grid.RowNumberer({            width: 35,            header:fieldNamNum,//"序号",            align:"center",            sortable: true        }),        {            header: "vid",            dataIndex: "vid",            align:"center",            sortable: true,            hidden: true        },        {            header: fieldNameLpn,//"车牌号",            dataIndex: "lpn" ,            align:"center",            sortable: true        },        {            header:fieldNameSim,// "sim卡号",            dataIndex: "sim",            align:"center",            sortable: true        },        {            header: fieldNameGpsTime,//"gps采集时间",            dataIndex: "gpsTime",            align:"center",            width:130,            sortable: true,            menuDisabled: true,            renderer: function (value) {                return Yaxon.Common.Api.removeTimeT(value);            }        },        {            header:fieldNameFuel100Miles,// "平均百里油耗",            dataIndex: "fuel100Miles" ,            align:"center",            renderer:function(value){                return Yaxon.Common.Api.transToFloat(value,100);            }        } ,        {            header: fieldNameFaultCode,//"故障码",            dataIndex: "faultNum" ,            align:"center"        },        {            header:fieldNameFaultName,// "故障名称",            dataIndex: "faultName" ,            width:400,            align:"center"        }    ]);    this.pageBar = new PageBar(this.store, { defaultSize: this.pageSize, callBack: this.loadPageStore.createDelegate(this) });    this.currentPage = this.pageBar.PagingToolBar.beforePageText;    //grid    this.grid = new Ext.grid.GridPanel({        region: 'south',//        sm: sm,        cm: cm,        height:290,        autoWidth:true,        /*collapsed:true,        collapsible:true,*/        loadMask: true,        autoScroll: true,        border: false,        store: this.store,//        bbar: this.pageBar.PagingToolBar,        buttonAlign: 'center',        tbar: [          /*  {                xtype: 'tbseparator' //分割符            },*/          /*  {                text:"导出全部",                iconCls:"export",                handler:this.btn_ExportAllTiredDrive_Click.createDelegate(this)            },            "-",            {                text:"导出当前",                iconCls:"export",                handler:this.btn_ExportCurrentTiredDrive_Click.createDelegate(this)            }*/        ]    });    //*********右边汇总*******    this.rightcontainer = new Ext.Panel({        region: 'center',        layout: 'border',        split: true,        border: false,        items: [this.mainpl,this.grid]    });    this.container = new Ext.Panel({        region: 'center',        layout: 'border',        split: true,        border: false,        items: [this.leftContainer,this.rightcontainer]    });};