Google Charts中如何按天分组柱状图并让同日期数据在X轴相邻显示？

没问题！要让相同日期的多个数据在X轴上相邻显示（也就是同一日期标签下并排展示多个柱子），核心是调整数据结构，让Google Charts把这些同日期的数值识别为独立的数据系列，而非同一系列下的重复标签。下面分两种场景给出具体方案：

一、静态数据手动调整结构 #

如果你的数据是固定的，直接把同一日期的多个数值拆分成不同的列（对应不同数据系列）即可：

var data = google.visualization.arrayToDataTable([
  ['Day', 'Amount 1', 'Amount 2'], // 新增系列列，可自定义名称
  ['Mon', 4, 6],                   // Mon的两个数值分别对应不同系列
  ['Tue', 3, null],                // 无对应数值的位置填null占位
  ['Wed', 3, null]
]);

这样渲染出的柱状图，Mon位置会有两个并排的柱子，Tue和Wed则仅显示单个柱子，完全符合分组展示的需求。

二、动态数据自动分组（适配数据不固定场景） #

如果你的数据是动态获取的（比如从后端接口返回），可以先通过JavaScript预处理数据，将同一日期的多值结构转换为Google Charts支持的多列格式：

// 假设原始数据是你提供的格式
const rawData = [
  ['Day', 'Amount'],
  ['Mon', 4],
  ['Mon', 6],
  ['Tue', 3],
  ['Wed', 3]
];

// 1. 整理同一日期的所有数值
const dayValueMap = {};
rawData.slice(1).forEach(row => {
  const day = row[0];
  const amount = row[1];
  if (!dayValueMap[day]) {
    dayValueMap[day] = [];
  }
  dayValueMap[day].push(amount);
});

// 2. 确定需要多少个系列列
const maxSeriesNum = Math.max(...Object.values(dayValueMap).map(v => v.length));
const headers = ['Day'];
for (let i = 1; i <= maxSeriesNum; i++) {
  headers.push(`Amount ${i}`); // 可根据业务自定义系列名称
}

// 3. 构建适配Google Charts的新数据
const formattedData = [headers];
Object.keys(dayValueMap).forEach(day => {
  const row = [day];
  for (let i = 0; i < maxSeriesNum; i++) {
    row.push(dayValueMap[day][i] || null);
  }
  formattedData.push(row);
});

// 4. 传入Google Charts生成表格
var data = google.visualization.arrayToDataTable(formattedData);

三、额外注意事项 #

确保初始化图表时没有设置isStacked: true——这个配置会让柱子堆叠而非并排，默认情况下Google Charts的Column Chart就是分组展示多系列数据的。

内容的提问来源于stack exchange，提问作者Tobbelowski