Таблица столбчатых столбцов для двух наборов данных - Google Chart

Я создаю некоторые Google Графики, и я застрял здесь. Google позволяет группировать ваши столбцы. Но он либо ограничен, либо я не могу настроить его для работы. Взятый от Google, вот пример, показывающий количество чашек кофе, производимых в каждом году для двух стран:

Скажем, у меня есть другой набор данных для тех же двух стран, но на этот раз у меня есть растворимый кофе вместо земли. Пример:

Что бы я хотел сделать, это собрать эти два набора данных друг на друга. Таким образом, каждый столбец будет отдельной страной, но двумя разделами: bean и мгновенным кофе.

Я думал, был ли способ форматирования таблицы данных следующим образом:

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

чтобы создать что-то вроде

Ваша помощь приветствуется.

Ответ 1

Я сейчас столкнулся с этой проблемой и следил за ссылкой для отправки. Кажется, что совсем недавно кто-то ответил:

"Это действительно возможно с новой диаграммой Material Bar (хотя в несколько окольный путь). В новом графике, если вы сделаете диаграмму сгруппированы, но поместите некоторые серии на другую ось, что создает отдельный стек для этих серий. К сожалению, в настоящее время нет способ полностью скрыть ось, и вам придется явно установите окно просмотра. В конце концов мы представим варианты спрятать топоры и выровнять окна просмотра, но это нужно будет сделать сейчас".

Эта скрипка помогла мне решить эту проблему: 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));
};

Ответ 2

API визуализации не поддерживает создание нескольких столбцов столбцов на строку данных. Вы можете сделать запрос функции, чтобы добавить поддержку для этого, если хотите.

Ответ 3

Ответ Дэна Хогана работал у меня. Однако пример 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>

Ответ 4

Вы можете сделать это, используя stacked column chart с stacked column chart, где все серии данных одной группы (например, молотый кофе) находятся на левой оси, а все серии данных другой группы на правой оси (растворимый кофе).

настройка диаграммы данных и столбцов с накоплением

серия группы 2 переместилась на правую ось