Google ColumnChart柱状图hAxis日期显示错误，如何让柱形仅对齐指定日期

问题原因 #

Google Chart的日期类型横轴默认采用自动计算刻度范围的逻辑，当数据集仅存在单个日期点时，图表会自动向前后扩展约半年的跨度来填充横轴空间，且会跟随容器宽度自适应调整范围，导致单根柱子无法对齐到对应日期位置。

解决方案 #

通过动态计算数据集内的日期极值，自定义横轴显示范围即可解决，无需硬编码配置，也无需修改date列类型，同时适配1~N个日期的所有场景：

实现逻辑 #

1. 从已生成的DataTable中提取所有日期值，拿到最小、最大日期
2. 根据日期数量动态计算左右偏移量：单日期时适当加大偏移量保证柱子有足够显示空间，多日期时采用小偏移即可
3. 强制指定横轴的显示范围为计算后的偏移区间

完整修改后代码 #

var arr = eval("[[new Date(2010, 0, 1), 0,1]]");
var data = new google.visualization.DataTable();

data.addColumn('date', 'Dt');
data.addColumn('number', 'Open');
data.addColumn('number', 'Closed');
data.addRows(arr);

// ===== 新增逻辑：动态计算横轴范围 start =====
// 获取所有日期并排序取极值
const dateRowIndexes = data.getSortedRows([{column: 0}]);
const allDates = dateRowIndexes.map(idx => data.getValue(idx, 0));
const minDate = allDates[0];
const maxDate = allDates[allDates.length - 1];

// 动态计算偏移天数，可按需调整
let offsetDays = 3;
// 单日期场景加大偏移保证柱子显示正常
if (minDate.getTime() === maxDate.getTime()) {
  offsetDays = 10;
}

// 计算实际显示的起止日期
const viewMin = new Date(minDate);
viewMin.setDate(viewMin.getDate() - offsetDays);
const viewMax = new Date(maxDate);
viewMax.setDate(viewMax.getDate() + offsetDays);
// ===== 新增逻辑：动态计算横轴范围 end =====

var options_stacked = {
  isStacked: true,
  height: 300,
  colors: ['#111', '#a00'],
  hAxis: {
    slantedText: false,
    format: 'd/MMM/yy',
    // 新增配置：强制使用自定义横轴范围
    viewWindowMode: 'explicit',
    viewWindow: {
      min: viewMin,
      max: viewMax
    }
  },
  legend: {
    position: 'top',
  },
  vAxis: {
    minValue: 0
  }
};

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

可调参数说明 #

• 单日期场景的偏移天数offsetDays = 10可根据你需要的柱子宽度调整，值越大柱子越细，值越小柱子越粗
• 多日期场景的默认偏移天数offsetDays = 3也可根据实际显示效果调整，不会影响日期对齐逻辑

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