在 Google 图表中按天分组列答案

【问题标题】：Group Columns by day in Google Charts在 Google 图表中按天分组列
【发布时间】：2018-04-09 11:07:00
【问题描述】：

我正在制作一个柱形图，正在努力将数据可视化，如下图所示：

 var data = google.visualization.arrayToDataTable([
     ['Day', 'Amount'],
     ['Mon', 4],
     ['Mon', 6],
     ['Tue', 3],
     ['Wed', 3],
 ]);

不像这张图：

是否可以在 Google 图表中对数据进行分组，以便同一天的数据在 xAxis 中彼此相邻显示？

【问题讨论】：

标签： javascript charts google-visualization multiple-columns

【解决方案1】：

要在 x 轴上分组，添加列/附加系列...

var data = google.visualization.arrayToDataTable([
  ['Day', 'Amount 1', 'Amount 2'],
  ['Mon', 4, 6],
  ['Tue', 3, null],
  ['Wed', 3, null]
]);

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Day', 'Amount 1', 'Amount 2'],
    ['Mon', 4, 6],
    ['Tue', 3, null],
    ['Wed', 3, null]
  ]);

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

【讨论】：

嘿白帽。它有所帮助，但问题是我不一定知道'Amount 1'，'Amount 2'，'Amount #'等的数量。每天都会有。所以我不确定我是否可以像你的建议那样对其进行硬编码。但它可以工作，我可以设置一个限制，每天最多显示 5 个左右的列并从那里开始工作，但这不是最佳的。不过非常感谢！
只是需要的数据表格式示例，不必硬编码，可以使用group()方法知道要添加多少列...