javascript - 解析 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);
    });
 });
}

然后我按如下方式调用函数 genderData:

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: []
        }]
    });

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

这么近但没有雪茄 ;-)

太棒了，我根据文档更改了我的服务器端代码以返回以下格式 :-)，现在返回以下内容:

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

这对我来说看起来很准确，但是，唉，当我尝试在 js 代码上适应它时，一切都崩溃了。

我一直在看这个: Write JSON parser to format data for pie chart (HighCharts)

但无法在此处应用适合我情况的实践。任何人都可以提供帮助吗？

Answer 1

表格:

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

或

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

会起作用。请注意，第二种形式是 arrays 的数组而不是 objects 的数组(你很接近)。

参见 basic-pie demo (单击查看选项并向下滚动到数据)，series.data docs , 和 series.addPoint docs了解更多信息。

如果您让服务器端以上述两种形式之一返回数据，您可以这样做:

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