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

【问题标题】：How can I display `Null` value data on Y Axis using the Primitive dataset format in Chart.js V3.7.0?如何使用 Chart.js V3.7.0 中的原始数据集格式在 Y 轴上显示“空”值数据？
【发布时间】：2022-01-23 23:07:22
【问题描述】：

我想知道是否有办法在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。

【问题讨论】：

图表不会因添加空值而中断，它仍然显示值：jsfiddle.net/Leelenaleee/4w0stLpk
嗯，这是我试图在数据变量中回显的数据： ( 0.214 , NULL ,NULL ,NULL ,0.21 , NULL ,NULL ,NULL ,0.447 , NULL ,NULL ,NULL ,0.337 , NULL ,NULL ,NULL ,NULL ,NULL ,NULL ,NULL ,NULL ,NULL ,NULL ,NULL ,NULL ）但这会破坏图表并且图表没有被初始化。
当两个数据点之间有一个null 值时，有没有办法用一条线连接它们？
是的，但是您需要使用对象表示法，请在此处查看我的答案：stackoverflow.com/a/68863515/8682983

标签： javascript chart.js chart.js3

【解决方案1】：

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

spanGaps：如果true，将在没有数据或null 数据的点之间画线。

有关详细信息，请参阅 Chart.js 文档的 Line Styling 部分。

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>

【讨论】：