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

先看看效果

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

初始化表格代码

        

            

                
DATE
                
Qingpu
                
Wuxi
                
Foxtown
                
Suzhou
                
Beijing
                 
Shenyang
                
Xiamen
                
Chongqing
                
Chengdu
                
TOTAL
               
            
        
    

初始化统计图代码

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

按钮事件处理

   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

欢迎大家拍砖交流