Question

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

示例：

我每年都有一些数据：

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

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

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

Answer 1

编辑：这是填充工作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);

唯一的问题是填充看起来很合适，所以我对它进行了评论，现在它只是一个折线图。

Answer 2

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

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

Chart.js点之间的差距

2 个答案: