jquery结合highcharts使用Ajax异步刷新数据

Highchart是比较流行的一款图形插件，可以生成常用的饼图、拆线图、柱状图，图形界面也比较美观。官网上也提供了一引demo，但是如何使用json给Hightcharts各部分赋值，我选择了用ajax来请求action，然后得到json给Highchart赋值。

具体主要代码如下：

原demo:

$(function () {

       $('#container').highcharts({

           chart: {

               zoomType: 'xy'

           },

           title: {

               text: 'Average Monthly Temperature and Rainfall in Tokyo'

           },

           subtitle: {

               text: 'Source: WorldClimate.com'

           },

           xAxis: [{

               categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',

                   'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

           }],

           yAxis: [{ // Primary yAxis

               labels: {

                   format: '{value}°C',

                   style: {

                       color: '#89A54E'

                   }

               },

           series: [{

               name: 'Rainfall',

               color: '#4572A7',

               type: 'column',

               yAxis: 1,

               data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],

               tooltip: {

                   valueSuffix: ' mm'

               }}, {

               name: 'Temperature',

               color: '#89A54E',

               type: 'spline',

               data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],

               tooltip: {

                   valueSuffix: '°C'

               }

demo提供的是直接给值，这样的话在用程序实现时，ACTION与jsp传值会比较麻烦，所以选择使用json来传值，具体做法如下：

$.ajax({

   type: "POST",

   url: "seriesjson.action?region="+encodeURI(region_name),

   dataType:"text",

    success: function(data){

        alert(data);

        data=$.parseJSON(data);

    alert(data[0].one);

   var one = data[0].one;

   var two = data[0].two;

   var three =data[0].three;

   var four =data[0].four;

   var five =data[0].five;

   var mon =data[0].mon;

   var chart;

   $(document).ready(function() {

       chart = new Highcharts.Chart({

           chart: {

               renderTo: 'container',

               type: 'spline'

           },

           title: {

               text: '各等级客户数'

           },

           xAxis:[{

               categories: mon

           }],

           yAxis: {

               title: {

                   text: '客户数 (户)'

               },

               min: 0

           },

           tooltip: {

               formatter: function() {

                       return '<b>'+ this.series.name +'</b>'+': '+ this.y +' 户';

               }

           },

           series: [{

               name: '一星用户',

               // Define the data points. All series have a dummy year

               // of 1970/71 in order to be compared on the same x axis. Note

               // that in JavaScript, months start at 0 for January, 1 for February etc.

               data: one

           }, {

               name: '二星用户',

               data: two

           }, {

               name: '三星用户',

               data: three

           }, {

               name: '四星用户',

               data: four

           }, {

               name: '五星用户',

               data: five

           }]

       });

   });

   }

   })

以上是一个拆线图的例子，可以请求Action得到json后，然后处理json给Highcharts进行赋值。