highcharts异步获取数据

页面异步代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

$(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中，拼接字符串并返回即可

1 2 3 4 5 6 7 8 9 10

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();