两个数据集的堆积柱形图 - Google Charts

mav*_*ili 18 charts google-visualization stacked

我正在制作一些谷歌图表,我被困在这里.Google允许您将列堆叠起来.但它有限或我无法配置它工作.以谷歌为例,这里有一个例子,显示了两个国家每年生产的咖啡杯数量:

奥地利和比利时每年的咖啡杯数量

假设我有两个国家的另一个数据集,但这次我有速溶咖啡而不是地面.例:

奥地利和比利时每年的即食咖啡杯数量

我想做的是将这两个数据集叠加在一起.所以每个专栏都是一个国家,但有两个部门:豆类和速溶咖啡.

我在想是否有一种方法可以通过以下方式格式化数据表:

['Year', 'Austria', 'Austria (instant)', 'Bulgaria', 'Bulgaria (instant')],
['2003', 1736060, 10051, 250361, 68564],
['2004', 1338156, 65161, 786849, 1854654],
['2005', 1276579, 65451, 120514, 654654]
Run Code Online (Sandbox Code Playgroud)

生成类似的东西

在此输入图像描述

非常感谢您的帮助.

小智 17

我今天刚遇到同样的问题,并按照您提交的链接进行操作.似乎最近有人回复了这个问题:

"这实际上可以使用新的材料条形图(尽管有点迂回).在新图表中,如果您将图表堆叠起来,但将一些系列放在不同的轴上,则会为这些系列创建单独的堆栈.不幸的是,目前还没有办法完全隐藏轴,你必须明确设置视图窗口.最后我们将引入隐藏轴和对齐视图窗口的选项,但现在必须这样做."

这个小提琴似乎帮助我解决了这个问题:http://jsfiddle.net/p7o0pjgg/

这是代码:

google.load('visualization', '1.1', {
    'packages': ['bar']
});
google.setOnLoadCallback(drawStuff);

function drawStuff() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Nescafe Instant');
    data.addColumn('number', 'Folgers Instant');
    data.addColumn('number', 'Nescafe Beans');
    data.addColumn('number', 'Folgers Beans');
    data.addRows([
        ['2001', 321, 621, 816, 319],
        ['2002', 163, 231, 539, 594],
        ['2003', 125, 819, 123, 578],
        ['2004', 197, 536, 613, 298]
    ]);

    // Set chart options
    var options = {
        isStacked: true,
        width: 800,
        height: 600,
        chart: {
            title: 'Year-by-year coffee consumption',
            subtitle: 'This data is not real'
        },
        vAxis: {
            viewWindow: {
                min: 0,
                max: 1000
            }
        },
        series: {
            2: {
                targetAxisIndex: 1
            },
            3: {
                targetAxisIndex: 1
            }
        }
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.charts.Bar(document.getElementById('chart_div'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
};
Run Code Online (Sandbox Code Playgroud)


小智 6

您可以使用 来完成此操作stacked column chart,其中一组(例如研磨咖啡)的所有数据系列位于左轴,另一组(速溶咖啡)的所有数据系列位于右轴。

数据和堆积柱形图设置

在此输入图像描述

第 2 组系列移至右轴

在此输入图像描述