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

Question

我使用chart.js之，我必须在某些点多天条目之间缺少一些数据，我的图表。我分配这些值零，而是想图表绘制缺少点之间的连接线。以下是我有：

有没有连点在chart.js之的方法吗？或许有人能指出我朝着图表库，可以。谢谢。

Answer 1

我有同样的问题，我已经修改this的版本是这样的：

                    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”数据集的属性：

            var datasetObject = {
                label: dataset.label || null,
                fillColor: dataset.fillColor,
                strokeColor: dataset.strokeColor,
                pointColor: dataset.pointColor,
                pointStrokeColor: dataset.pointStrokeColor,
                tooltip: dataset.tooltip,
                line: dataset.line,
                fill: dataset.fill,
                points: [],
                skipNullValues: dataset.skipNullValues
            };

Here是完整的工作版本！

也许有更好的解决方案，但我使用它的工作原理。

让我知道，如果它是为你工作！

Answer 2

新版本支持跳过丢失的数据。在选择正确的：你可以设置spanGaps。然后，如果你有null或NaN的缺失数据，它会跳过它，并连接到下一个点。

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

Documentation here

Answer 3

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

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

Answer 4

对于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;
                }
            } 
        }
    });

我不是太兴奋了循环双。这可以可能更有效。也许还有更合适的挂钩来使用。然而，这应该做您的需要。

见https://github.com/chartjs/Chart.js/blob/master/docs/09-Advanced.md