Highcharts使用JSON對象

Question

您好我的JSON對象看起來像這樣

[ 
    {"name":"Tokyo","data":3.0}, 
    {"name":"NewYork","data":2.0}, 
    {"name":"Berlin","data":3.5}, 
    {"name":"London","data":1.5} 
] 

如何填充一系列點使用highcharts

Answer 1

試試這個下面的代碼做一個餅圖來填充餅圖數據。這將解析所有值並創建一個名爲dataArrayFinal的數組。

var d = [{"name":"Tokyo","data":3.0},{"name":"NewYork","data":2.0}, {"name":"Berlin","data":3.5},{"name":"London","data":1.5}] 
var name = Array(); 
var data = Array(); 
var dataArrayFinal = Array(); 
for(i=0;i<d.length;i++) { 
    name[i] = d[i].name; 
    data[i] = d[i].data; 
} 

for(j=0;j<name.length;j++) { 
    var temp = new Array(name[j],data[j]); 
    dataArrayFinal[j] = temp;  
} 

而你的系列東西應該如下圖所示。即你應該像下面那樣通過數組dataArrayFinal。

series: [{ 
     type: 'pie', 
     name: 'Browser share', 
     data: dataArrayFinal 
}] 

Answer 2

其實你的數據定義和Highcharts要求的格式之間的唯一區別是，你有一個名爲「數據」，其中Highcharts預計「Y」屬性。所以你只需要遍歷數據並設置屬性。看到它在http://jsfiddle.net/highcharts/uTyZk/住。

// Original data 
var data = [{ 
    "name": "Tokyo", 
    "data": 3.0 
}, { 
    "name": "NewYork", 
    "data": 2.0 
}, { 
    "name": "Berlin", 
    "data": 3.5 
}, { 
    "name": "London", 
    "data": 1.5 
}]; 

// Highcharts requires the y option to be set 
$.each(data, function (i, point) { 
    point.y = point.data; 
}); 


var chart = new Highcharts.Chart({ 

    chart: { 
     renderTo: 'container', 
     type: 'pie' 
    }, 

    series: [{ 
     data: data 
    }] 

});