Highcharts 使用 json 对象填充饼图的数据答案

【问题标题】：Highcharts to populate data for pie chart using json objectHighcharts 使用 json 对象填充饼图的数据
【发布时间】：2013-01-19 12:45:06
【问题描述】：

嗨，我的 json 对象看起来像这样

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

如何使用 highcharts 填充系列点以制作饼图

【问题讨论】：

标签： highcharts

【解决方案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
}]

【讨论】：

我在 name[i] = d[i].name 中变得未定义；如果我检查放置警报消息。
您是否使用了您指定的相同 json 对象或任何其他对象？
我喜欢这个 [{"name":"Tokyo","data":3.0},{"name":"NewYork","data":2.0},{"name": "柏林","数据":3.5},{"名称":"伦敦","数据":1.5}]
但是您在问题中指定了一个不同的问题。 data":[2.0] 等等....对吗？首先用正确的问题编辑您的问题。您是否按原样使用了上面的代码？将您的 JSON 分配给变量 d。
是的，我已经在问题中更改了它们。我已按照您的建议将其分配给变量 d。但我无法得到名字[i]

【解决方案2】：

实际上，您的数据定义和 Highcharts 要求的格式之间的唯一区别是，您的数据定义有一个名为“data”的属性，而 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
    }]

});

【讨论】：