Использование Highcharts для отображения нескольких столбчатых диаграмм с накоплением рядом друг с другом

Пытаюсь найти способ прочитать два массива в серии Highcharts для 4 графиков. Это пример кода, который я пытался адаптировать из обычной гистограммы:

        var charts = [],
        $containers = $('table td'),
        datasets = [
                    {
                        name: 'Global',
                        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                        data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
                    }, 
                    {
                        name: 'Region',
                        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                        data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
                    }, 
                    {
                        name: 'Role',
                        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                        data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
                    }, 
                    {
                        name: 'Industry',
                        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                        data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
                    }];                     

        $.each(datasets, function(i, dataset) {
            console.log(dataset);
            charts.push(new Highcharts.Chart({

                chart: {
                    renderTo: $containers[i],
                    type: 'bar',
                    marginLeft: 50,
                    marginBottom: 90
                },

                credits: {
                    enabled: false
                },

                title: {
                    text: dataset.name
                },

                xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },

                plotOptions: {
                    series: {
                        stacking: 'normal'
                    }
                },
                series: [dataset]

            }));
        });

а затем это мой HTML:

<table>
    <tr>
        <td id="first"></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

Как мне преобразовать два массива для сложенных столбцов в высокие диаграммы? Заранее спасибо.


highcharts stacked
person richnwilson    schedule 27.02.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Если вам нужны гистограммы с накоплением, каждый набор данных должен быть отдельной серией. Демо: http://jsfiddle.net/n9xvof2y/1/

Предлагаемый формат:

    datasets = [{
        name: 'Global',
        data: [
            [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
        ]
    }, {
        name: 'Region',
        data: [
            [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
        ]
    }, {
        name: 'Role',
        data: [
            [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
        ]
    }, {
        name: 'Industry',
        data: [
            [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
        ]
    }];

Варианты серий:

        series: [{
            name: dataset.name,
            data: dataset.data[0]
        }, {
            name: dataset.name,
            data: dataset.data[1]
        }]

Если вам нужен только один элемент легенды для обеих серий, используйте параметр linkedTo: http://jsfiddle.net/n9xvof2y/3/

person Paweł Fus    schedule 27.02.2015