点之间的Chart.js间隙

Question

我不知道如何(或者是否可能)在chart.js的折线图中创建间隙。

示例：

我有一些每年的数据：

2010|20.3
2011|-1
2012|21.4
2013|26.5

-1表示没有数据的年份。在这种情况下，应该只有一条连接2012和2013的线。

这是怎么做到的呢？我已经设法隐藏了点，但我不能隐藏连接2011的线，而不删除连接其他点的整个线。

Answer 1

编辑:这是一个带有fill working http://jsfiddle.net/leighking2/sLgefm04/6/的版本

因此，一种方法是扩展折线图。唯一的问题是，您必须覆盖整个initialise方法，以便正确地存储所有点。下面是一个小提琴，它显示了一个自定义折线图，它完成了您所描述的http://jsfiddle.net/leighking2/sLgefm04/

我在原始折线图上放置了较大的注释块，因此这里是亮点，在示例中，o使用null表示间隙，但这可以替换为-1。

在初始化方法中，对数据进行处理并将其转换为点，这是需要进行更改的位置，以便仍然包含丢失的数据

helpers.each(dataset.data, function(dataPoint, index) {
    /**
     *
     * Check for datapoints that are null
     */
    if (helpers.isNumber(dataPoint) || dataPoint === null) {
        //Add a new point for each piece of data, passing any required data to draw.
        datasetObject.points.push(new this.PointClass({
            /**
             * add ignore field so we can skip them later
             *
             */
            ignore: dataPoint === null,
            value: dataPoint,
            label: data.labels[index],
            datasetLabel: dataset.label,
            strokeColor: dataset.pointStrokeColor,
            fillColor: dataset.pointColor,
            highlightFill: dataset.pointHighlightFill || dataset.pointColor,
            highlightStroke: dataset.pointHighlightStroke || dataset.pointStrokeColor
        }));
    }
}, this);

然后，在draw方法中，每当我们在想要忽略的数据点或只是超过一个数据点时，我们就移动画笔而不是绘图

    helpers.each(dataset.points, function(point, index) {

    /**
     * no longer draw if the last point was ignore (as we don;t have anything to draw from)
     * or if this point is ignore
     * or if it's the first
     */
    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);
        }
    } else if (index === 0 || dataset.points[index - 1].ignore) {
        ctx.moveTo(point.x, point.y);
    }

}, this);

唯一的问题是填充看起来很时髦，所以我把它注释掉了，现在它只是一个折线图。

Answer 2

现在可以通过将dataset数组中的spanGaps属性设置为true来实现此目的。

http://www.chartjs.org/docs/latest/charts/line.html