如何在 Chart.js V3.7.0 中使用原始数据集格式在 Y 轴上显示“Null”值数据？

Question

我想知道是否有办法在 Primitive Dataset 中显示或附加 Null 值。

到目前为止，这是一个简短的代码解释，说明我的代码实际做了什么，以及我如何尝试实现同样的事情，但没有成功。

PHP代码（我使用php根据 Primitive dataset documentation):

<?php
    //The Variable below is being appended with data.
    $values .= "$value_I_want_to_append ,";
?> 
// In the end the $values variable looks like this if printed:
   0.456 ,0,424 ,0.223 etc...

我使用这个变量的图表脚本：

 const data = {
   datasets: [{
      data: [ <? echo $values; ?> ],
   }],
 };

问题:

如何在图表上附加 of type 等于 Null 的数据，而不破坏图表？（通过术语中断，我的意思是当我有至少一个空值时图表根本不显示值）。

提前感谢您的时间和精力。该库名为 Chart.js，库的版本为 3.7.0。

Answer 1

您可以在数据集上定义 spanGaps: true。

spanGaps: If true, lines will be drawn between points with no or null data.

For further details, consult the Line Styling section of the Chart.js documentation.

new Chart('chart', {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
    datasets: [{
      data: [15, null, 13, 8, null, 9, 10],
      backgroundColor: 'rgba(255, 0, 0, 0.5)',
      borderColor: 'rgb(255, 0, 0)',
      tension: 0.2,
      spanGaps: true
    }],
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<canvas id="chart"></canvas>

如何在 Chart.js V3.7.0 中使用原始数据集格式在 Y 轴上显示“Null”值数据？

How can I display `Null` value data on Y Axis using the Primitive dataset format in Chart.js V3.7.0?

javascript

chart.js

chart.js3