Chart.js点之间的差距

Question

我无法弄清楚如何(或者是否可能)在chart.js中的折线图中创建间隙.

例:

我每年都有一些数据:

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

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

怎么做的？我设法隐藏了点,但我不能隐藏连接2011的线,而不删除连接其他点的整条线.

Answer 1

spanGaps现在可以通过在数据集数组中将该属性设置为 true 来实现。

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

Answer 2

编辑:这是一个填充工作的版本http://jsfiddle.net/leighking2/sLgefm04/6/

因此,一种方法是扩展折线图.唯一的问题是您必须覆盖整个初始化方法,只是为了允许正确存储所有点.这是一个小提琴,显示了一个自定义线图,它可以完成您所描述的内容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);

然后在绘制方法中,每当我们处于数据点时我们想要忽略或者只是过去一个我们移动笔而不是绘图

    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);

唯一的问题是填充看起来适当的时髦,所以我评论它,现在只是一个线图.