2

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

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

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

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

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

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

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

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

4

4 回答 4

3

表格：

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

或者

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

将工作。请注意，第二种形式是数组数组而不是对象数组（您很接近）。

请参阅basic-pie 演示（单击查看选项并向下滚动到数据）、series.data 文档和series.addPoint 文档以获取更多信息。

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

function genderData() {
  $.getJSON('/statsboard/gender', function(data_g) {
    genderChart.series[0].setData(data_g, true);
  });
}
于 2012-10-16T19:33:41.487 回答
2

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

    genderChart.series[0].addPoint({

        name: key_g,
        y: val_g

    });
于 2012-10-16T19:20:07.307 回答
1

通过重新排列我的 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)
});
});
}
于 2012-10-17T12:35:56.170 回答
0

我知道这个问题已经解决了。但是在这些情况下，数组的 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); });

.... 高度图 ....

于 2013-04-16T00:24:11.120 回答