解析Highcharts的JSON数据

Question

我已经为此花了几个小时，并且用尽了所有类似的stackoverflow线程以及highcharts文档，因此希望有人可以提供帮助。

我正在尝试绘制带有性别划分的饼图。 我以前使用过折线图，因此我的数据采用x和y轴格式，如下所示：

[{"y":"Mr","x":"145"},{"y":"Miss","x":"43"},{"y":"Mrs","x":"18"},{"y":"Ms","x":"2"}]

这把我带到某个地方，我可以进入json并拉出整数，但是我无法终生获得与数字相关的标题...

function genderData() {
 $.getJSON('/statsboard/gender', function(data_g) {
    $.each(data_g, function(key_g, val_g) {
        obj_g = val_g;
         genderChart.series[0].addPoint(parseInt(obj_g.x));

        //genderChart.xAxis[0].categories.push(obj_g.y);
    });
 });
}

然后，我仅按以下方式调用了函数sexData：

genderChart = new Highcharts.Chart({
        chart: {
            renderTo: 'gender',
            events: {
                load: genderData
            }
        }
        title: {
            text: 'Gender Split'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            },
        },
        series: [{
            type: 'pie',
            name: 'Gender Split',
            data: []
        }]
    });

所以我最终得到了一张准确的图表，但没有标签，它们只是默认为“切片” ...

如此接近但没有雪茄;-)

如此，我更改了我的服务器端代码，以根据docs :-)返回以下格式：现在返回以下内容：

[{"Mr":"145"},{"Miss":"43"},{"Mrs":"18"},{"Ms":"2"}]

这对我来说似乎很重要，但是，当我尝试在js代码上适应这一点时，一切都崩溃了。

我一直在看： 编写JSON解析器以格式化饼图的数据（HighCharts）

但是无法根据我的情况在此处应用该实践。有人可以帮忙吗？

Answer 1

形式：

[{"name": "Mr", "y": 145}, ...]

要么

[["Mr", 145], ...]

将工作。 请注意，第二种形式是数组数组而不是对象数组（您已经关闭）。

有关更多信息，请参阅基本饼演示 （单击视图选项并向下滚动到数据）， series.data文档和series.addPoint文档 。

如果让服务器端以上述两种形式之一返回数据，则可以执行以下操作：

function genderData() {
  $.getJSON('/statsboard/gender', function(data_g) {
    genderChart.series[0].setData(data_g, true);
  });
}

Answer 2

您可以按以下方式设置要点：

    genderChart.series[0].addPoint({

        name: key_g,
        y: val_g

    });

Answer 3

通过重新排列我的Json使其具有“名称”和“ y”作为键，我能够取得进步，即：

[{"name":"Mr","y":"145"},{"name":"Miss","y":"43"},{"name":"Mrs","y":"18"},{"name":"Ms","y":"2"}]

然后通过遍历json数据并使用JS中的parseInt（）函数将“ y”值解析为一个int，我可以得到我想要的结果...

function genderData() {
$.getJSON('/statsboard/gender', function(data_g) {
$.each(data_g, function(key_g, val_g) {
    obj_g = val_g;
     genderChart.series[0].addPoint({
        name: obj_g.name,
        y: parseInt(obj_g.y)
});
console.log(obj_g.y)
});
});
}

Answer 4

我知道这个问题已经解决。 但是在这种情况下，数组的map函数可能是一个不错的选择，我喜欢函数语言中的map！

data = [{"y":"Mr","x":"145"},{"y":"Miss","x":"43"},
        {"y":"Mrs","x":"18"},{"y":"Ms","x":"2"}];

var series = data.map(function(e){ return parseInt(e.x); });

....高图....