如何用Google Visualization创建带目标线的多组堆叠柱状图？

针对你需要实现两组及以上带对应目标线的堆叠柱状图的需求，结合你之前尝试遇到的问题，最优方案是使用ComboChart，通过调整数据结构+自定义series配置+占位列分隔来实现——既能支持多组堆叠、对应目标线，也能解决堆叠重叠的视觉问题，同时具备良好的扩展性。

核心思路 #

1. 数据分组+占位列分隔：把每组堆叠的柱状图列、对应目标线列归为一组，组与组之间插入值为0的占位列，用来在视觉上分隔不同组的堆叠，避免重叠。
2. ComboChart多类型配置：全局设置seriesType: 'bars'，将目标线对应的series单独设为type: 'line'，同时给同组的堆叠列设置相同的坐标轴索引（如果需要双轴可以分开）。
3. 视觉优化：通过groupWidth控制每组堆叠的宽度，配合占位列实现自然的左右偏移效果。
4. 扩展性：新增堆叠组时，只需要添加对应的堆叠列、目标线列和占位列，扩展series配置即可，无需大幅修改代码。

完整实现代码 #

google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawVisualization);

function drawVisualization() {
  // 调整后的数据结构：每组堆叠+目标线+占位列分隔
  var data = google.visualization.arrayToDataTable([
    ['Month', 
     // 第一组堆叠：Stack1的两个列 + 对应目标线
     'Stack1-1', 'Stack1-2', 'Stack1 Goal', 
     // 占位列：用于分隔两组堆叠
     'Placeholder', 
     // 第二组堆叠：Stack2的两个列 + 对应目标线
     'Stack2-1', 'Stack2-2', 'Stack2 Goal',
     // 如果要加第三组，继续按这个结构添加：Stack3列+目标线+占位列（最后一组不需要占位）
    ],
    ['2004/05', 110, 210, 300, 0, 810, 910, 1600],
    ['2005/06', 120, 220, 320, 0, 820, 920, 1650],
    ['2006/07', 130, 230, 350, 0, 830, 930, 1700],
    ['2007/08', 140, 240, 360, 0, 840, 940, 1750],
    ['2008/09', 150, 250, 380, 0, 850, 950, 1800]
  ]);

  var options = {
    title: '多组堆叠柱状图+对应目标线',
    vAxis: { title: '数值' },
    hAxis: { title: '时间' },
    seriesType: 'bars', // 默认是柱状图
    isStacked: true, // 同坐标轴的柱状图自动堆叠
    groupWidth: '60%', // 控制每组堆叠的宽度，留出占位列的空间实现偏移
    series: {
      // 第一组堆叠：同属坐标轴0
      0: { targetAxisIndex: 0 },
      1: { targetAxisIndex: 0 },
      // 第一组目标线：设为line类型，同坐标轴0
      2: { type: 'line', targetAxisIndex: 0, color: '#ff0000', lineWidth: 2 },
      // 占位列：隐藏图例和标签，不显示在图表中
      3: { visibleInLegend: false, enableInteractivity: false },
      // 第二组堆叠：如果需要双轴可以设为targetAxisIndex:1，这里用同一个轴示例
      4: { targetAxisIndex: 0 },
      5: { targetAxisIndex: 0 },
      // 第二组目标线：line类型
      6: { type: 'line', targetAxisIndex: 0, color: '#0000ff', lineWidth: 2 }
    },
    height: 500,
    width: 900
  };

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

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

针对你之前问题的解决方案说明 #

1. 解决ComboChart单组堆叠限制：通过数据分组+占位列的方式，把多组堆叠拆分到不同的列组中，配合isStacked: true，同坐标轴的列会自动堆叠，不同组之间通过占位列分隔，实现多组堆叠效果。
2. 堆叠重叠问题：占位列的值为0，且设置为不可交互、隐藏图例，视觉上会在两组堆叠之间留出空隙，模拟左右偏移的效果，比手动计算偏移更简单可靠。
3. 目标线对应问题：每组的目标线series和对应堆叠列使用相同的坐标轴索引，确保目标线和堆叠组对齐，同时可以自定义颜色、线宽区分不同组的目标线。
4. 扩展性：如果需要新增第三组堆叠，只需要在数据中添加Stack3-1、Stack3-2、Stack3 Goal列（以及前面的占位列，如果不是最后一组），然后在series配置中新增对应的设置即可，非常灵活。

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