ajax给highchart赋值,如何使用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 ''+ this.series.name +''+': '+ 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进行赋值。