сложенная диаграмма столбцов для двух наборов данных - Google Charts

Question

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

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

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

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

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

генерировать что-то вроде

Ваша помощь ценится.

Answer 1

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

«Это действительно возможно с новой диаграммы Материал 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)); 
}; 

Answer 2

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

Answer 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>