19

我正在生成一些谷歌图表，但我被困在这里。Google 允许您将列堆叠起来。但它要么受到限制，要么我无法将其配置为工作。取自谷歌，这里有一个例子，显示了两个国家每年生产的咖啡杯数：

奥地利和比利时每年的 BEAN COFFEE 杯数

假设我有另一个相同两个国家的数据集，但这次我用的是速溶咖啡而不是咖啡粉。例子：

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

我想做的是将这两个数据集堆叠在一起。所以每一列都是一个国家，但有两个部门：豆类和速溶咖啡。

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

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

生成类似的东西

在此处输入图像描述

感谢您的帮助。

4

4 回答 4

20

我今天刚遇到同样的问题，并点击了您的提交链接。好像最近有人这样回复：

“这实际上可以通过新的材料条形图实现（尽管以某种迂回的方式）。在新图表中，如果您将图表堆叠起来，但将一些系列放在不同的轴上，则会为这些系列创建一个单独的堆栈。不幸的是，目前还没有办法完全隐藏轴，您必须明确设置视图窗口。最终我们将引入隐藏轴和对齐视图窗口的选项，但现在必须这样做。

这个小提琴似乎帮助我解决了这个问题：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));
};
于 2014-10-31T23:07:20.983 回答
4

可视化 API 不支持为每行数据创建多个列堆栈。如果需要，您可以提出功能请求以添加对此的支持。

于 2013-07-29T19:32:07.447 回答
3

您可以使用 a 来执行此操作stacked column chart，其中一组（例如研磨咖啡）的所有数据系列位于左轴，而另一组的所有数据系列位于右轴（速溶咖啡）。

数据和堆积柱形图设置

在此处输入图像描述

第 2 组系列移至右轴

在此处输入图像描述

于 2019-07-03T11:47:06.303 回答
2

Dan Hogan 的回答对我有用。但是，JSFiddle 示例似乎不起作用（不确定，为什么。）这是一个适合我的版本。

google.charts.load('current', {'packages': ['bar']});
google.charts.setOnLoadCallback(function() {
    $('.service-usage-graph').each(function() {

        var table = new google.visualization.DataTable();
        table.addColumn('string', 'Date');
        table.addColumn('number', 'UL Peak');
        table.addColumn('number', 'UL Off-peak');
        table.addColumn('number', 'DL Peak');
        table.addColumn('number', 'DL Off-peak');

        table.addRow(['2001-01-01', 1, 2, 3, 4]);
        table.addRow(['2001-01-03', 3, 2, 4, 2]);
        table.addRow(['2001-01-04', 2, 2, 4, 2]);
        table.addRow(['2001-01-05', 0, 1, 4, 5]);
        table.addRow(['2001-01-06', 9, 2, 6, 8]);
        table.addRow(['2001-01-07', 2, 2, 7, 3]);
        var chart = new google.charts.Bar(this);
        var options = google.charts.Bar.convertOptions({
            isStacked: true,
            series: {
                2: { targetAxisIndex: 1 },
                3: { targetAxisIndex: 1 }
            },
            vAxis: {
              viewWindow: {
                max: 15,
              }   
            }   
        });
        chart.draw(table, options);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="service-usage-graph"></div>

于 2016-09-01T05:35:15.080 回答