两个数据集的堆叠柱状图 - 谷歌图表

Question

我正在生成一些谷歌图表，但卡在这里了。谷歌允许您堆叠列。但它要么有限制，要么我无法配置它的工作方式。以下是来自谷歌的一个示例，显示两个国家每年生产的咖啡杯数：

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

我想做的是将这两个数据集叠加在一起。因此，每个列都将是一个单独的国家，但有两个类别：豆和速溶咖啡。

我在考虑，是否有一种方式可以按以下方式格式化数据表：

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

帮助生成类似下图的内容：

感谢您的帮助。

- mavili

---

你好，你可以使用组合图表 https://google-developers.appspot.com/chart/interactive/docs/gallery/combochart。 - Jothi Kannan

我不知道那是如何完成工作的？ - mavili

嗨，请看这里https://developers.google.com/chart/image/docs/gallery/bar_charts，在图表类型中，查看bvo图表类型，它可能会更有帮助。 - Jothi Kannan

@jothikannan，这可能有效，但仅适用于图像图表，而不是交互式图表。 - asgallant

尽管它可能适用于图像图表，但您可以看到页面上写着“已弃用”，因此可能不再由Google提供。 - mavili

Answer 1

今天我也遇到了同样的问题，我按照你提供的链接解决了这个问题。最近有人回复说：

"使用新的 Material Bar chart 实际上可以实现（虽然方法有点曲折）。在新的图表中，如果你将图表设置为堆叠，并将某些系列放置在不同的轴上，那么就会为这些系列创建一个单独的堆栈。不幸的是，目前还没有完全隐藏轴的方法，您必须明确地设置视图窗口。最终我们会引入隐藏轴和对齐视图窗口的选项，但现在只能这样做。"

这个 fiddle 看起来帮助我解决了这个问题：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));
};

- Dan Hogan

---

我刚刚看到了你的回答 ;) 因为我已经很久之前就放弃了那个需求，没有意识到一年多以前有一个新的答案！但是这个示例足以证明它确实是解决方案。谢谢。 - mavili

最新版本的库还能实现这个吗？上面的代码在当前版本中无法工作。 - Julien M

@Julien 我相信它原则上仍然有效。提供的 JSFiddle 示例可能存在一个小错误，阻止其正常工作。请查看下面的答案以获取可用副本。 - Damien

我有一种感觉，这对组合图表不起作用。我已经从Google Chart文档中获取了小提琴图，并添加了targetAxisIndex：它不起作用。我错过了什么吗？ - dma_k

如何在上面的图表中添加注释？请按照以下步骤进行操作。 - krishna_tandon

Answer 2

你可以使用堆叠柱状图来实现，其中一组所有数据系列（例如，现磨咖啡）位于左轴上，而另一组所有数据系列（速溶咖啡）位于右轴上。 数据和堆叠柱状图设置 将第二组系列移动到右轴

- Mark Schiefelbein

Answer 3

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

- asgallant

---

谢谢，伙计。我刚刚提交了一个功能请求。如果他们真的添加了那个功能，那将是非常酷的。 - mavili

这是有关编程的内容，请将以下文本从英语翻译成中文。仅返回已翻译的文本：这是请求的链接：多个堆叠条形图 - mavili

我在图表中有四列，但我只想堆叠两列，该怎么做？ - Rana Aalamgeer

Answer 4

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>

- Damien

---

我在图表中有四列，但我只想堆叠两列，该怎么做？ - Rana Aalamgeer

以上图表是否有添加注释的方法？ - krishna_tandon