Highcharts从CSV堆叠条形数据

时间:2015-01-15 13:33:18

标签: csv highcharts

我正在尝试使用来自CSV的数据实现堆积条形图。 我需要使用CSV文件中的数据更新系列,其中包含例如“John,10,5,3,4,1”。 求救!

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Stacked bar chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            }
        },
        legend: {
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        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]
        }]
    });
});

UPDT

我终于让它运转了,但仍有问题。条形图是反转的,我需要它们与CSV文件中的顺序完全相同。

这是我的解析器:

$.get('chart.csv', function(data) {
                            var lines=data.split('\n');
                            $.each(lines, function(lineNo, line) {
                            var items = line.split(',');
                            var series = {
                                data: []
                            };
                            $.each(items, function(itemNo, item) {
                                if (itemNo == 0) {
                                    series.name = item;
                                } else {
                                    series.data.push(parseFloat(item));
                                }
                            });
                            options.series.push(series);
                            });
                            var chart = new Highcharts.Chart(options);

CSV文件的内容:

Disconnection,30,30
Site Care,12,12
Documentation,35,35
Lining,22,22
Connection,70,52

我需要堆叠的条形图与图例中的顺序相同:  http://i.stack.imgur.com/6EkHg.png

1 个答案:

答案 0 :(得分:0)

您可以尝试在渲染图表之前自定义系列索引,以修复条形图的反转。

这样的事情可能会起到作用:

 for (var i = 0; i < options.series.length; i++) {
        options.series[i].index = options.series.length - 1 - i;
        options.series[i].legendIndex = i;
    }