chart.js - 不使用 chart.js 绘制空值

Question

我正在使用 Chart.js 绘制图表..
我的数据集有一些空值，
实际上，chart.js 以这种方式在空值的前一个点和后一个点之间绘制一条线:



红色箭头指示空值在哪里

我想知道如何才能不绘制这些空值


我使用的配置就这么简单:

var lineChartData = {
            "datasets": [{
                "label": "defi score",
                "data": data,
                "pointStrokeColor": "#fff",
                "fillColor": "rgba(220,220,220,0.5)",
                "pointColor": "rgba(220,220,220,1)",
                "strokeColor": "rgba(220,220,220,1)",
            }],
            "labels": labels
        };


        var ctx = document.getElementById("chart_per_week").getContext("2d");
        var myLine = new Chart(ctx).Line(lineChartData, {
            responsive: true,
            scaleFontColor: "#FF5972",
            bezierCurve: false
        });

感谢您的帮助

Answer 1

如果您仍然到达此页面，新版本支持跳过丢失的数据。 .
如果您希望通过跳过丢失的数据来连接线，您可以在选项中设置 spanGaps: true 。

然后，如果您有 null 或 NaN 丢失数据，它将跳过它并连接到下一个点。

.....
 showTooltips: true,
        options: {
             spanGaps: true,
  ......

Documentation here