Chart.js堆叠折线图spanGaps属性无法正确跨接缺失数据问题咨询

我在绘制堆叠折线图时，因存在部分缺失数据，使用spanGaps属性处理，但发现该属性仅对顶部折线有效；若下方折线存在缺失数据（如data: [20, undefined, 21, 22, 25, 26, 24, 28, 30, 25, 22]），会导致上方堆叠出现异常。

请问这是Bug吗？除了生成临时虚拟值外，是否有其他解决办法？

另外，我不确定标注为“Working(?)...”的示例是否真的正常，因为其中的蓝色系列似乎也未正确跨接缺口。

代码示例 #

JavaScript #

var config_working = {
  type: 'line',

  data: {
    labels: ['01 May 2023', '02 May 2023', '03 May 2023', '04 May 2023', '05 May 2023', '06 May 2023', '07 May 2023', '08 May 2023', '09 May 2023', '10 May 2023'],

    datasets: [{
      label: 'Full History',
      borderColor: '#3182BD',
      backgroundColor: '#3182BD',
      data: [20, 15, 21, 22, 25, 26, 24, 28, 30, 25, 22],
      // Count is 11
      fill: true

    },{
      label: 'Gappy data',
      borderColor: '#2c6145',
      backgroundColor: '#2c6145',
      data: [15, 14, 12, undefined, undefined, undefined, undefined, 12, 10, 14, 15],
      // Count is 11
      fill: true

    }]
  },

  options: {
    type: 'line',
    spanGaps: true,
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      y: {
        stacked: true
      }
    }
  }
};

var config_problem = {
  type: 'line',

  data: {
    labels: ['01 May 2023', '02 May 2023', '03 May 2023', '04 May 2023', '05 May 2023', '06 May 2023', '07 May 2023', '08 May 2023', '09 May 2023', '10 May 2023'],

    datasets: [{
      label: 'History with one gap',
      borderColor: '#3182BD',
      backgroundColor: '#3182BD',
      data: [20, undefined, 21, 22, 25, 26, 24, 28, 30, 25, 22],
      // Count is 11
      fill: true

    },{
      label: 'Gappy data',
      borderColor: '#2c6145',
      backgroundColor: '#2c6145',
      data: [15, 14, 12, undefined, undefined, undefined, undefined, 12, 10, 14, 15],
      // Count is 11
      fill: true

    }]
  },

  options: {
    type: 'line',
    spanGaps: true,
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      y: {
        stacked: true
      }
    }
  }
};

window.onload = function() {
  var ctx = document.getElementById('cvs-working').getContext('2d');
  window.myLine = new Chart(ctx, config_working);
  
  var ctx = document.getElementById('cvs-problem').getContext('2d');
  window.myLine = new Chart(ctx, config_problem);
};

CSS #

h1 {
border-top:solid 1px black;
}

HTML #

<script type='text/JavaScript' src='https://cdn.jsdelivr.net/npm/chart.js'></script>


  <h1>
  Working(?)...
  </h1>
<div style='height:300px'>
  <canvas id='cvs-working'></canvas>
</div>

<h1>
Problem...
</h1>
<div style='height:300px'>
  <canvas id='cvs-problem'></canvas>
</div>

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