Question

怎样用json数据给Highcharts 的data赋值

Answer 1

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进行赋值。