如何调整堆叠Google Chart的缩放规则适配移动端显示？

核心修改点 #

• 给hAxis配置项添加viewWindow: {max: 4500}，强制限制水平轴刻度上限，避免移动端自动计算出现10000的异常值
• 移除写死的固定高度，改为根据屏幕宽度动态计算图表高度，适配不同尺寸屏幕
• 将resize事件监听移出绘图函数，避免重复绑定导致的性能问题
• 调整chartArea宽度比例，避免小屏下轴标签挤压导致的刻度计算偏差

修改后的完整代码 #

HTML #

<div id="chart">
  <div id="soc_chart"></div>
</div>

CSS #

#chart {
  border: 1px solid #AAA;
  min-height: 800px;
  width: 100%;
}

JavaScript #

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(() => {
  drawStacked();
  // 仅绑定一次resize监听
  window.addEventListener('resize', drawStacked, false);
});

function drawStacked() {
  var data = google.visualization.arrayToDataTable([
    ['SOC', 'GEEKBENCH 5 SINGLE', 'GEEKBENCH 5 MULTI'],
    ['SNAPDRAGON 870', 914, 3161],
    ['MEDIATEK DIMENSITY 900 (MT6877)', 731, 2203],
    ['SNAPDRAGON 845', 504, 2028],
    ['MEDIATEK DIMENSITY 700 (MT6833V)', 544, 1695],
    ['MEDIATEK G95', 501, 1599],
    ['UNISOC TIGER T618', 392, 1441],
    ['UNISOC TIGER T310', 360, 708],
    ['MEDIATEK MT8176', 314, 644],
    ['MEDIATEK HELIO P60 (MT6771)', 288, 1272],
    ['ROCKCHIP RK3399', 269, 615],
    ['BROADCOM BCM2711', 234, 672],
    ['ROCKCHIP RK3326', 86, 272],
    ['MEDIATEK MT6580A', 69, 227],
    ['ROCKCHIP RK3288', 10, 20]
  ]);

  // 动态适配高度：移动端用800px，大屏用1000px
  const chartHeight = window.innerWidth < 768 ? 800 : 1000;

  var options = {
    chartArea: {
      width: '85%',
      height: '90%'
    },
    legend: {
      position:'top', 
      textStyle: {color: 'black', fontName: 'Lato', fontSize: 14, bold: true, italic: false}
    },
    height: chartHeight,
    isStacked: true,
    hAxis: {
      title: 'GEEKBENCH 5 SCORE',
      // 强制限制刻度上限，彻底解决移动端刻度异常问题
      viewWindow: {
        max: 4500
      },
      textStyle: {color: 'black', fontName: 'Lato', fontSize: 12, bold: true, italic: false}, 
      titleTextStyle: {color: '#940000', fontName: 'Lato', bold: true, italic: false}
    }, 
    series: {
      0:{color:'#F75200'},
      1:{color:'#940000'}
    },
    vAxis: {
      title: 'SOC NAME', 
      textStyle: {color: 'black', fontName: 'Lato', fontSize: 12, bold: true, italic: false},
      titleTextStyle: {color: '#940000', fontName: 'Lato', bold: true, italic: false}
    }
  };

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

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