Question

我正在使用chart.js，并且在我的图表中的某些点的多天条目之间我有一些缺失的数据。我已将这些值指定为null，但希望图表在缺失点之间绘制连接线。这就是我所拥有的：

enter image description here

有没有办法连接chart.js中的点？或者也许有人可以指向我可以的图表库。谢谢。

Answer 1

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

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

Documentation here

Answer 2

我遇到了同样的问题，并且我修改了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);

为了更好的结构，我为数据集设置了一个名为＆＃34; skipNullValues＆＃34;的属性：

            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 3

对于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循环的双重不太兴奋。这可能更有效。也许还有更合适的钩子可供使用。但是，这应该做你需要的。

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

Answer 4

对于Charts.js v2，您只需在数据集中定义它即可。

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

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

4 个答案: