Google Visualization堆叠BarChart区间堆叠问题及解决方法

问题现象 #

使用Google Visualization绘制带最小/最大区间的堆叠BarChart时，区间值会与数据点被错误堆叠，不符合预期效果。

临时替代方案 #

曾尝试通过调整数组，从最小/最大区间值中减去“Available”数据来临时实现预期效果，代码如下：

dataOrig.addRows([
    ['PART 123', 100, 10, 50-100, 150-100],    
]);

但该方法仅适用于测试场景，无法适配实际业务需求，推测此错误堆叠行为是图表的潜在Bug。

最终解决方案 #

将两个interval角色的列放置在第一个数据点列之后，即可让图表正常绘制区间，避免堆叠问题。

完整代码示例 #

JavaScript 代码 #

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

google.charts.setOnLoadCallback(gChart0);

function gChart0() {
  drawDashboard()
}

function drawDashboard() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Material'); 
  data.addColumn('number', 'Available');
  data.addColumn('number', 'Blocked');
  data.addColumn({
    type: 'number',
    role: 'interval'
  });
  data.addColumn({
    type: 'number',
    role: 'interval'
  });
  data.addRows([
    ['PART 123', 100, 10, 50, 150],     
  ]);

  var chart = new google.visualization.BarChart(
    document.getElementById('chart'));

  var options = {
    width: 800, height: 600, title: 'MIN MAX Board',
    intervals: {
      style: 'boxes',
      lineWidth: 2,
      barWidth: 0.5,
      color: "#ff0000",
    },
    tooltip: { isHtml: true },
    isStacked: true,
  }
  chart.draw(data, options);
}

HTML 代码 #

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

官方文档参考 #

Google可视化官方文档中关于柱状图区间的说明：在堆叠柱状图中使用区间时，区间列需紧跟在对应的主数据列之后，确保区间基于整体数据范围计算，而非堆叠后的数值，以此避免区间与数据点错误堆叠的问题。

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