Highcharts使用easyui datagrid的数据画动态统计图

先看看效果



当选择日期段后点击‘go’，会同时更新表格数据和下面的统计图。 使用Highcharts关键是拼接出正确的json格式（能力有限，欢迎拍砖），具体格式见官网。

初始化表格代码

<table id="xxoo" class="easyui-datagrid" title="Outlets Sales Quantity " style="width:720px;height:auto"
data-options="
singleSelect: true,
url: 'outlets_init.php?type=init',
rowStyler: function(index,row){
if (row.outdate == 'TOTAL'){
return 'background-color:#6293BB;color:#fff;font-weight:bold;';
}
}
">
<thead>
<tr>
<th data-options="field:'outdate',width:80" ><strong>DATE</strong></th>
<th data-options="field:'Qingpu',width:60,align:'right'">Qingpu</th>
<th data-options="field:'Wuxi',width:60,align:'right'">Wuxi</th>
<th data-options="field:'Foxtown',width:60,align:'right'">Foxtown</th>
<th data-options="field:'Suzhou',width:60,align:'right'">Suzhou</th>
<th data-options="field:'Beijing',width:60,align:'right'">Beijing</th>
<th data-options="field:'Shenyang',width:60,align:'right'">Shenyang</th>
<th data-options="field:'Xiamen',width:60,align:'right'">Xiamen</th>
<th data-options="field:'Chongqing',width:65,align:'right'">Chongqing</th>
<th data-options="field:'Chengdu',width:60,align:'right'">Chengdu</th>
<th data-options="field:'day_total',width:80,align:'right'"><strong>TOTAL</strong></th>

</tr>
</thead>
</table>初始化统计图代码
<script src="js/highcharts.js"></script>
<script src="js/exporting.js"></script>

$(function () {
$('#container').highcharts({
title: {
text: 'Major Cities  Sales Quantity ',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
//关键 ：参考官网的json格式拼接处正确的json
categories: <?php  echo $get_time;?>
},
yAxis: {
title: {
text: ' Sales Quantity'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series:<?php echo $get_data;?>
});
});

按钮事件处理
var all_datas;
var date;
jQuery(document).ready(function(){

$('#but').click(function(){
//更新表格
$('#xxoo').datagrid('reload',{bt:$('#bt').datebox('getValue'),et:$('#et').datebox('getValue')});
var c=1;
$('#xxoo').datagrid({
onLoadSuccess:function(){
//datagrid会重复加载...还没解决
c++;
//以下为获取表格数据拼接json
if(c==2){

var obj=eval('('+JSON.stringify($('#xxoo').datagrid('getData'))+')');

var date=[];
var all_datas=[];

var all_data={};
var all_data1={};
var all_data2={};
var all_data3={};
var all_data4={};
var all_data5={};
var all_data6={};
var all_data7={};
var all_data8={};

var all_names=new Array('Qingpu','Foxtown','Wuxi','Suzhou','Beijing','Shenyang','Xiamen','Chongqing','Chengdu');
var all_names1=[];

var datas=[];
var datas1=[];
var datas2=[];
var datas3=[];
var datas4=[];
var datas5=[];
var datas6=[];
var datas7=[];
var datas8=[];
var city_names=[];

for(var i=0;i<obj.rows.length;i++){

if(obj.rows[i].outdate!='TOTAL'){
date.push(obj.rows[i].outdate);

datas[i]=obj.rows[i].Qingpu;
datas1[i]=obj.rows[i].Foxtown;
datas2[i]=obj.rows[i].Wuxi;
datas3[i]=obj.rows[i].Suzhou;
datas4[i]=obj.rows[i].Beijing;
datas5[i]=obj.rows[i].Shenyang;
datas6[i]=obj.rows[i].Xiamen;
datas7[i]=obj.rows[i].Chongqing;
datas8[i]=obj.rows[i].Chengdu;
}
}
all_data["name"]=all_names[0];
all_data["data"]=datas;

all_data1['name']=all_names[1];
all_data1['data']=datas1;

all_data2['name']=all_names[2];
all_data2['data']=datas2;

all_data3['name']=all_names[3];
all_data3['data']=datas3;

all_data4['name']=all_names[4];
all_data4['data']=datas4;

all_data5['name']=all_names[5];
all_data5['data']=datas5;

all_data6['name']=all_names[6];
all_data6['data']=datas6;

all_data7['name']=all_names[7];
all_data7['data']=datas7;

all_data8['name']=all_names[8];
all_data8['data']=datas8;

all_datas.push(all_data);
all_datas.push(all_data1);
all_datas.push(all_data2);
all_datas.push(all_data3);
all_datas.push(all_data4);
all_datas.push(all_data5);
all_datas.push(all_data6);
all_datas.push(all_data7);
all_datas.push(all_data8);

$('#container').highcharts({
title: {
text: 'Major Cities Sales Quantity ',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories:JSON.parse(JSON.stringify(date))
},
yAxis: {
title: {
text: " Sales Quantity"
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series:JSON.parse(JSON.stringify(all_datas))

});

}else{
c--;
}
}

});

});
});



欢迎大家拍砖交流