两个数据集的堆叠柱形图 - Google图表 [英] stacked column chart for two data sets - Google Charts

问题描述

我产生了一些Google Charts，我被困在这里。 Google允许您对列进行堆叠。但它是有限的，或者我不能配置它的工作。这是一个从Google获取的示例，显示了两个国家/地区每年生产的咖啡数量：

I'm generating some Google Charts and I'm stuck here. Google allows you to have your columns stacked. But it's either limited or I can't configure it to work. Taken from Google, here is an example showing number of cups of coffee produced in each year for two countries:

假设我有另一个数据集国家，但这一次我有速溶咖啡，而不是地面。示例：

Say I have another data set for the same two countries, but this time I have instant coffee instead of ground. Example:

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

What I'd like to do is to stack these two datasets on top of each other. So each column would be a single country, but two divisions: bean and instant coffee.

我想是否有一种方式以下列方式格式化数据表：

I was thinking if there was a way of formatting the data table in the following way:

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

可产生

>

您的帮助。

推荐答案

我今天遇到了同样的问题，并按照提交链接。似乎最近有人回答说：

I just ran into this same issue today and followed your submission link. It seems that just recently someone replied with this:

这实际上可能与新的材料条图（虽然在
a在新的图表中，如果你使一个图表
堆叠，但是在不同的轴上放置一些系列，那么为这些系列创建一个
单独的堆栈，不幸的是，目前没有
方法完全隐藏一个轴，你必须显式
设置视图窗口。最后，我们将介绍选项隐藏axis
和对齐视图窗口，但这将要做现在。

"This is actually possible with the new Material Bar chart (albeit in a somewhat roundabout way). In the new chart, if you make a chart stacked, but place some series on a different axis, that creates a separate stack for those series. Unfortunately, there is currently no way to completely hide an axis yet, and you will have to explicitly set the view window. Eventually we will introduce options to hide axes and to align view windows, but this will have to do for now."

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

This fiddle seemed to help me solve this problem: 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));
};

这篇关于两个数据集的堆叠柱形图 - Google图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！