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

问题描述

我正在生成一些 Google 图表，但被困在这里.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:

这实际上可以通过新的材料条形图(尽管在有点迂回的方式).在新图表中，如果您制作图表堆叠，但将一些系列放在不同的轴上，这会创建一个这些系列的单独堆栈.不幸的是，目前没有完全隐藏轴的方法，您必须明确设置视图窗口.最终我们将介绍隐藏轴的选项并对齐视图窗口，但现在必须这样做."

"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 Charts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！