0

服务器发送回这样的数据:

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

在浏览器中,它显示为:

在此处输入图像描述

我可能(并且很可能)不正确的信念是,这是填充 Highcharts 堆叠条形图的正确结构,如下所示:

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 中(很可能)。

任何见解将不胜感激。

4

1 回答 1

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/

于 2013-08-05T21:28:43.427 回答