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, resourceAddFa