使用Highcharts可以显示多个堆叠的条形图

Question

试图找到一种方法，将两个数组读取到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>

如何将堆叠条形图的两个数组转换为高图？提前谢谢。

Answer 1

当您需要堆叠条形图时，每个数据集都需要是一个单独的系列。演示：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/