如何使用json的資料格式給Highcharts賦值

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進行賦值。

本文出自 “莫慌張，募直向前” 部落格，請務必保留此出處http://kunyali.blog.51cto.com/4890065/1292803