chart.js中缺失数据之间的连接点

我使用的是chart.js，在我的图表中的某些点上，在多天条目之间缺少一些数据。我已将这些值赋值为空，但希望图表在缺少的点之间绘制一条连接线。以下是我所拥有的：

---

在chart.js中有没有连接点的方法？或者也许有人可以给我指一个可以的图表库。谢谢

我也遇到了同样的问题，我修改了如下版本：

                    var lastPoint = null;
                helpers.each(dataset.points, function (point, index) {

                    if (!point.ignore && dataset.skipNullValues && lastPoint) {
                        ctx.beginPath();
                        ctx.moveTo(lastPoint.x, lastPoint.y);

                        if (this.options.bezierCurve) {
                            ctx.bezierCurveTo(
                                lastPoint.controlPoints.outer.x,
                                lastPoint.controlPoints.outer.y,
                                point.controlPoints.inner.x,
                                point.controlPoints.inner.y,
                                point.x,
                                point.y
                            );
                        } else {
                            ctx.lineTo(point.x, point.y);
                        }
                        ctx.stroke();
                    }

                    if (index > 0 && !dataset.points[index - 1].ignore && !point.ignore) {
                        if (this.options.bezierCurve) {
                            ctx.bezierCurveTo(
                                dataset.points[index - 1].controlPoints.outer.x,
                                dataset.points[index - 1].controlPoints.outer.y,
                                point.controlPoints.inner.x,
                                point.controlPoints.inner.y,
                                point.x,
                                point.y
                            );
                        }
                        else {
                            ctx.lineTo(point.x, point.y);
                        }

                        lastPoint = point;
                    }
                    else if (index === 0 || !point.ignore) {
                        ctx.moveTo(point.x, point.y);

                        if (!point.ignore) {
                            lastPoint = point;
                        }
                    }

                }, this);

为了获得更好的结构，我为数据集设置了一个名为“skipNullValues”的属性：

是完整的工作版本

也许有更好的解决方案，但对于我来说，它是有效的

让我知道它是否对你有效

用于charts.js v2

使用插件挂钩。 对于返回null的数据，下面的代码似乎工作得很好。它将画出一条没有点的线。它通过空值连接点

Chart.pluginService.register({
        beforeDatasetsDraw: function(chart) {
            for (dataset of chart.config.data.datasets) {
                for(data of dataset._meta[chart.id].data) {
                    data._model.skip = false;
                    data._model.tension = 0;
                }
            } 
        }
    });

我对一个双for循环不太兴奋。这可能更有效。也许还有更合适的钩子可以使用。但是，这应该满足您的需要

看

---

新版本支持跳过丢失的数据。 您可以在选项中设置spanGaps:true。 然后，如果缺少数据的值为null或NaN，它将跳过该值并连接到下一个点

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

---

对于charts.js v2，您只需在数据集中定义它：

var data = {
labels: labels,
datasets: [ {
    backgroundColor: "#94b5c244",
    borderColor: "#94b5c2",
    data: data,
    label: "AAPL",
    spanGaps: true
}]
};    

---

美好的这正是我需要的。我将致力于实现它。这是对Chart.js的一个很好而且非常需要的补充，他们应该将它添加到主代码库中。干得好！你知道这项功能在Chart JS v2中是否可用吗？此插件将覆盖所有图表的设置（张力）。只需添加spanGaps：在我工作的数据集中为true。嗨，你知道如何将线更改为间隙间虚线吗？嗨，你知道如何将线更改为间隙间虚线吗？嗨@Ian，有一个问题有待解决：github.com/chartjs/Chart.js/issues/5956事实上，你可以为跨距做破折号，但这需要技巧。诀窍是提供同一数据集的两个副本，一个是带边框的短划线（chartjs.org/docs/latest/charts/line.html#line styleing），另一个是带边线的span gaps true，它将用短划线绘制整个图表，然后是不带边框的同一数据集，它将在短划线上绘制一条实线，除了间隙区域。因此，最终结果将与您想要的结果相似。

var data = {
labels: labels,
datasets: [ {
    backgroundColor: "#94b5c244",
    borderColor: "#94b5c2",
    data: data,
    label: "AAPL",
    spanGaps: true
}]
};