highcharts异步获取数据-白红宇

highcharts异步获取数据

阅读量：5995 次

发布时间：2019-06-20

本文共 1642 字，大约阅读时间需要 5 分钟。

页面异步代码

                         
$(
function
() { 
            
var
chart_validatestatics;
            
$(document).ready(
function
() { 
                
var
options_validatestatics = { 
                    
chart: { 
                        
renderTo: 
'container_validatestatics'
,
                        
type: 
'column'
                    
},
                    
title: { 
                        
text: 
'验票分析'
                    
},
                    
subtitle: { 
                        
text: 
'tourol.cn'
                    
},
                    
xAxis: { 
                
},
                
yAxis: { 
                    
title: { 
                        
text: 
'人数'
                    
}
                
},
                
plotOptions: { 
                    
bar: { 
                        
dataLabels: { 
                            
enabled: 
true
                        
}
                    
}
                
},
                
tooltip: { 
                    
formatter: 
function
() { 
                        
return
'<b>'
+ 
this
.x + 
'</b><br/>'
+ 
this
.series.name + 
': '
+ 
this
.y + 
'人'
;
                    
}
                
},
                
credits: { 
                    
enabled: 
false
                
},
                
series: [{ 
                    
name: 
"验票用户"
,
                    
width: 3
                
}]
            
}
            
$.get(
"/ajaxhandler/dataupdate.ashx?operate_type=validatestatics"
, 
function
(data) { 
                
var
xatrnames = [];
                
var
yvalidators = [];
                
for
(
var
i = 0; i < data.rows.length; i++) { 
                    
xatrnames.push([
                            
data.rows[i].atrname
                        
]);
                    
yvalidators.push([
                            
data.rows[i].atrname,
                            
parseInt(data.rows[i].nums)
                        
]);
                
}
                
alert(xatrnames + yvalidators);
                
options_validatestatics.xAxis.categories = xatrnames
                
options_validatestatics.series[0].data = yvalidators;
                
chart_validatestatics = 
new
Highcharts.Chart(options_validatestatics);
            
});
        
});
    
});
        
      

这里要注意的是：x轴数组定义好后，定义y轴数据的时候要把对应在x轴上的值也push到数组里，不然会造成无法显示的情况

对应的在ajaxhandler中，拼接字符串并返回即可

                         
string json = 
"{\"rows\":["
;
        
for
(int i = 0; i < datas.Rows.Count; i++)
        
{ 
            
json += 
"{\"atrname\":\""
+ datas.Rows[i][
"name"
] + 
"\",\"nums\":\""
+ datas.Rows[i][
"nums"
] + 
"\"},"
;
        
}
        
json = json.TrimEnd(
','
);
        
json += 
"]}"
;
        
context.Response.Write(json);
        
context.Response.Flush();
        
context.Response.End();
        
      