Question

服务器正在发回这样的数据：

{"barData":
    [
        {"Accepted":[0,0,0]},
        {"Rejected":[0,0,0]},
        {"In_Process":[0,1,0]}]
}

在浏览器中，它显示为：

enter image description here

我或许（很可能）不正确的信念是，这是填充Highcharts堆积条形图的正确结构，如下所示：

Example Stacked Bar in jsFiddle

文档中的示例显示了一个如下所示的固定数据集：

series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]

这是我试图模仿的内容。所以，在所有这些结束时，我得到一个零图。我的Javascript看起来像这样：

$.ajax({
url : 'http://localhost:8080/afta/report/transfersbynetwork',
success : function(point) {
    data = [];
    $.each(point.barData, function(itemNo, item) {
        data.push([ item[0], parseInt(item[1][0]), parseInt(item[1][1]), parseInt(item[1][2])]);
    });
    barchart = new Highcharts.Chart(baroptions);
    baroptions.series[0].data = data;
},
cache : false
});

那我在哪里凿起来了？我没有得到任何情节，并且我确信这个问题要么是我对服务器数据的呈现（可能），要么是解析数据结构和加载系列的javascript（非常有可能）。

任何见解都将受到赞赏。

Answer 1

根据您的结构，您需要更改功能以处理数据：

$(function () {
    var point = {
        "barData": [{
            "Accepted": [1, 2, 3]
        }, {
            "Rejected": [3, 4, 5]
        }, {
            "In_Process": [0, 1, 0]
        }]
    },
    data = [];

    $.each(point.barData, function (itemNo, item) {
        for (var prop in item) {
            data.push({
                name: prop,
                data: [parseInt(item[prop][0]), parseInt(item[prop][1]), parseInt(item[prop][2])]
            });
        }
    });
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Stacked bar chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            }
        },
        legend: {
            backgroundColor: '#FFFFFF',
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: data
    });
});

http://jsfiddle.net/9jVJb/

加载Javascript Highcharts系列数据问题

1 个答案: