效果图:
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