Google BarChart百万级数值下单条水平条形图无法显示

使用Google BarChart组件绘制水平条形图时，若单条数据的数值达到百万量级，对应的水平条形条目无法正常渲染。
可复现问题的代码如下：

HTML 代码 #

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="barChart" />

JavaScript 代码 #

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string');
  data.addColumn('number');
  data.addColumn({ 'type': 'string', 'role': 'style' });
  data.addRows([
    ['name1', 3442222, 'color: #fcba03'], // 该条数据对应的条形无法显示
    // ['name2', 34422, 'color: #fcba03'], // 取消注释该行、注释掉上一行后，图表可正常渲染
  ]);

  // 实例化并绘制图表
  var chart = new google.visualization.BarChart(document.getElementById('barChart'));
  chart.draw(data, null);
}

调用chart.draw()时第二个配置参数传入null，会触发Google Charts的自动范围计算逻辑缺陷：当数据集仅包含1条百万级及以上的大数值数据时，组件无法正确推导水平坐标轴的取值区间，错误将条形的渲染宽度计算为0，最终导致条形不可见。
如果数据量级较小、或数据集包含多条数据，自动范围计算逻辑可正常运行，不会触发该问题。

不要传入null作为draw方法的配置参数，可选择以下两种方式修复：

• 最简修复：将传入的null替换为空对象{}，即可让组件走正确的默认渲染流程，自动计算适配的坐标轴范围，修改后的绘制代码如下：

chart.draw(data, {});

• 稳妥修复：显式配置水平坐标轴的取值范围，从根源上避免自动计算逻辑的异常，可根据自身业务数据的量级调整最大值，示例配置如下：

chart.draw(data, {
  hAxis: {
    viewWindow: {
      min: 0,
      // 最大值设置为比当前数据最大值稍大即可
      max: 4000000
    }
  }
});

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