chart.js 中缺失数据之间的连接点 [英] Connecting points between missing data in chart.js

问题描述

我正在使用 chart.js，但在我的图表中某些点的多天条目之间存在一些缺失数据.我已将这些值分配为空，但希望图表在缺失点之间绘制一条连接线.这是我所拥有的:

I'm using chart.js and I have some missing data between multiple day entries at certain points in my chart. I've assigned these values null, but would like the chart to draw a connection line between the missing points. Here is what I have:

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

Is there a way to connect the dots in chart.js? Or perhaps someone could point me towards a chart library that can. Thanks.

推荐答案

我遇到了同样的问题，我已经修改了 这个版本是这样的:

I had the same problem and i've modified this version like 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"的属性:

For a better structure i have set a property for the dataset called "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
            };

这里是完整的工作版本！

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

Maybe there is a better solution, but for my uses it works.

让我知道它是否适合你！

Let me know if it is working for you!

这篇关于chart.js 中缺失数据之间的连接点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！