Hey，我帮你捋捋Google Charts堆叠柱状图的问题——你遇到的堆叠失效、小数据集显示窄水平柱、X轴日期不对这几个坑，我都帮你整理了排查点和修复方案：

1. 堆叠失效+小数据集显示窄水平柱：图表类型和堆叠配置错了 #

你提到小数据集显示窄幅水平柱，十有八九是用了BarChart（水平柱状图）而非ColumnChart（垂直柱状图），而且堆叠开关没开对。

要搞垂直堆叠柱状图，得注意这两点：

• 实例化google.visualization.ColumnChart，别用BarChart（那是水平方向的）
• 必须在配置里加isStacked: true，这是堆叠的核心开关，比如：

var options = {
  isStacked: true, // 没这行，堆叠绝对出不来
  title: '每日堆叠数据',
  // 其他配置...
};

如果用了BarChart，就算开了堆叠也是水平堆的，小数据集自然会显得很窄，先把图表类型换对再说。

2. 数据格式不对，堆叠和日期都要崩 #

Google Charts对DataTable格式要求很严，这是很多人踩坑的地方：

• 第一列必须是Date对象，不能是字符串（比如用new Date('2024-05-01')，别直接写'2024-05-01'）
• 后面的系列列必须是数值类型，不能混字符串

举个正确的数据初始化例子：

var data = google.visualization.arrayToDataTable([
  ['日期', '系列A', '系列B', '系列C'],
  [new Date('2024-05-01'), 100, 200, 150],
  [new Date('2024-05-02'), 150, 250, 200],
]);

如果日期是字符串，X轴不仅显示乱，堆叠逻辑也可能识别错系列，直接全崩。

3. X轴日期显示修复：格式+强制显示 #

日期显示异常无非这几个原因，挨个调：

• 先确保日期是Date对象（上面说的）
• 给hAxis加日期格式，比如format: 'MM/dd'，不然会显示完整时间戳
• 日期多了会重叠，开倾斜文本+强制显示每个日期：

hAxis: {
  title: '日期',
  format: 'MM/dd', // 自定义显示格式，比如仅显示月日
  slantedText: true, // 倾斜文本避免重叠
  slantedTextAngle: 45, // 调整倾斜角度
  showTextEvery: 1, // 强制显示每个日期，不自动跳过
  ticks: data.getDistinctValues(0) // 手动把所有日期设为刻度，确保全显示
}

完整可运行示例 #

把这些点整合起来，给你一个能直接跑的例子，对照着改你的代码就行：

google.charts.load('current', { packages: ['corechart'] }).then(function () {
  // 构造合规的DataTable，日期用Date对象
  var data = google.visualization.arrayToDataTable([
    ['日期', '系列1', '系列2', '系列3'],
    [new Date('2024-05-01'), 200, 150, 100],
    [new Date('2024-05-02'), 250, 200, 150],
    [new Date('2024-05-03'), 180, 120, 80],
    [new Date('2024-05-04'), 300, 220, 180]
  ]);

  var options = {
    isStacked: true, // 核心堆叠开关
    title: '每日堆叠数据统计',
    width: 800,
    height: 400,
    hAxis: {
      title: '日期',
      format: 'MM/dd',
      slantedText: true,
      slantedTextAngle: 45,
      showTextEvery: 1,
      ticks: data.getDistinctValues(0)
    },
    vAxis: {
      title: '累计数值'
    },
    legend: { position: 'top' }
  };

  // 用ColumnChart垂直柱状图，不是BarChart
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

替代方案：Material Charts（可选） #

如果原生CoreChart的样式不合心意，可以试试Material版本的柱状图，配置略有不同，堆叠用stacking: 'absolute'：

google.charts.load('current', { packages: ['bar'] }).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['日期', '系列1', '系列2', '系列3'],
    [new Date('2024-05-01'), 200, 150, 100],
    [new Date('2024-05-02'), 250, 200, 150]
  ]);

  var options = {
    chart: { title: '每日堆叠数据统计' },
    bars: 'vertical', // 指定垂直柱状图
    stacking: 'absolute', // 堆叠开关
    hAxis: { format: 'MM/dd', slantedText: true }
  };

  var chart = new google.charts.Bar(document.getElementById('chart_div'));
  // Material图表需要转换配置，别忘这步
  chart.draw(data, google.charts.Bar.convertOptions(options));
});

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