Google Charts Y轴单值（双图表堆叠柱形图）实现及代码测试

嘿，我给你整理好了可以直接在jsfiddle测试的完整代码，完美实现Y轴单值的堆叠柱形图需求，一起来看看：

完整可运行代码 #

google.load('visualization', '1.1', { 'packages': ['bar'] });
google.setOnLoadCallback(drawStuff);

function drawStuff() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', '年份');
  data.addColumn('number', 'Nescafe Instant');
  data.addColumn('number', 'Folgers Instant');
  data.addColumn('number', 'Nescafe Beans');
  data.addColumn('number', 'Folgers Beans');
  data.addRows([
    ['2001', 500, 1200, 816, 200],
    ['2002', 163, 231, 539, 590],
    ['2003', 125, 810, 200, 360],
    ['2004', 420, 320, 600, 450]
  ]);

  var options = {
    width: 800,
    height: 500,
    title: '咖啡产品年度销量',
    bars: 'vertical',
    isStacked: true, // 核心：开启堆叠模式
    vAxis: {
      title: '总销量',
      format: 'decimal', // Y轴单值统一格式化
      viewWindow: { min: 0 } // 确保Y轴从0起始，单值刻度更清晰直观
    },
    legend: { position: 'top', maxLines: 2 }
  };

  var chart = new google.charts.Bar(document.getElementById('chart_div'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
}

关键细节说明 #

• 堆叠核心配置：isStacked: true是实现堆叠柱形的关键，它会把同分类下的多个系列数据叠加显示
• Y轴单值控制：通过vAxis.format统一数值格式，viewWindow.min: 0避免Y轴刻度偏移，保证所有柱形的高度都对应统一的Y轴单值刻度
• 数据结构要求：第一列是分类维度（这里是年份），后续列是需要堆叠的数值型系列数据，确保数据类型匹配才能正常渲染

把这段代码复制到jsfiddle后，记得在HTML区域添加<div id="chart_div"></div>的容器元素，就能直接看到运行效果啦！

内容的提问来源于stack exchange，提问作者I am the Most Stupid Person