为 Highcharts 解析 JSON 数据答案

【问题标题】：Parsing JSON data for Highcharts为 Highcharts 解析 JSON 数据
【发布时间】：2012-10-16 18:01:09
【问题描述】：

我已经为此转了几个小时，并且已经用尽了所有类似的 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)

但无法在此处应用适合我的情况的做法。有人可以帮忙吗？

【问题讨论】：

标签： javascript json highcharts pie-chart

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

【讨论】：

嗨，Chad，谢谢你，它取得了一些进展，json 格式如下：[{"name":"Mr","y":"145"},{"name" :"Miss","y":"43"},{"name":"Mrs","y":"18"},{"name":"Ms","y":"2"}]我收到一个错误：未捕获的 Highcharts 错误 #14：www.highcharts.com/errors/14 我查看了您推荐的文档，但由于它总是引用静态数据，我不确定我哪里出错了，但我会继续寻找...
那是因为你的值需要是数字，而不是字符串。它必须是 [{"y": 43}, ...] 而不是 [{"y": "43"}, ...]
对，我明白了，最后我在 js 方面进行了类型转换，因为在你的帮助和@Greg 之间，在后端我做到了。

【解决方案2】：

您可以按如下方式设置积分：

    genderChart.series[0].addPoint({

        name: key_g,
        y: val_g

    });

【讨论】：

这是使用后期形式的json吗？ [{"Mr":"145"},... 如果是这样，那么 name: 和 y: 来自哪里？因为它似乎无法正常工作...
是的。将此代码放在您的“genderData”函数中，替换对“addPoint”的原始调用。 “name”和“y”是在传递给“addPoint”的点对象上设置的属性。该点在此处表示为文字 json 对象。
好吧，在你们俩的帮助下，我终于到了那里，最后我需要指定和类型转换整数... function genderData() { $.getJSON('/statsboard/性别'，函数（data_g）{$.each（data_g，函数（key_g，val_g）{obj_g = val_g；genderChart.series[0].addPoint（{名称：obj_g.name，y：parseInt（obj_g.y）} ); console.log(obj_g.y) }); });通过一些控制台日志，我能够到达那里！非常感谢！
如果我有 2 个 y 轴？即一个 x 轴和两个 y 轴！
在饼图中有两个 yAxis..?

【解决方案3】：

通过重新排列我的 Json 以将“name”和“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)
});
});
}

【讨论】：

如果有一种更漂亮的方法可以做到这一点，我会全力以赴，但至少现在它已经启动并运行了 ;-)
更有效的方法是将值数字设置在服务器端，因此您不必重复对象两次。但有了这样一个小物件，也没什么大不了的。
注意到了，感谢您对这个乍得的帮助，非常感谢！

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

.... 高度图 ....

【讨论】：