折线 ChartJS 空值/空值不会断线

Question

我想在值为 null 或空时断开图表的线条，但我做不到。也许我错过了什么？

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [ {
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,0.8)",
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(220,220,220,1)",
        data: [65, null, 80, 81, 56, 55, 40]
    }, {
        label: "My Second dataset",
        fillColor: "rgba(151,187,205,0.5)",
        strokeColor: "rgba(151,187,205,0.8)",
        highlightFill: "rgba(151,187,205,0.75)",
        highlightStroke: "rgba(151,187,205,1)",
        data: [28, 48, null, 19, null, 27, 90]
    } ]
};

代码如下：http://jsfiddle.net/YvanBarbaria/sLgefm04/31/

Answer 1

Chart.js 不直接支持这个。

您必须禁用默认的分段绘图和
改写你自己的

对于 1.，将笔画宽度设置为 0 不起作用，因为 canvas 忽略 0（和 NaN，undefined...），因此您将其设置为非常小的值以使线条不可见（有一个 datasetStroke 选项，但还没有代码作用于它）

也禁用填充是合乎逻辑的。但是，关闭数据集填充后，这些点会被黑色填充（Chart.js 错误？），因此请通过减小半径和增加笔划宽度来使这些点成为实体。

var myLineChart = new Chart(ctx).LineAlt(data, {
    datasetStrokeWidth: 0.01,
    datasetFill: false,
    pointDotRadius : 2,
    pointDotStrokeWidth: 3
});

请注意类型是 LineAlt - 这就是您如何处理 2. - 通过扩展折线图类型

Chart.types.Line.extend({
    name: "LineAlt",
    draw: function () {
        Chart.types.Line.prototype.draw.apply(this, arguments);

        // now draw the segments
        var ctx = this.chart.ctx
        this.datasets.forEach(function (dataset) {
            ctx.strokeStyle = dataset.strokeColor

            var previousPoint = {
                value: null
            };
            dataset.points.forEach(function (point) {
                if (previousPoint.value !== null && point.value !== null) {
                    ctx.beginPath();
                    ctx.moveTo(previousPoint.x, previousPoint.y);
                    ctx.lineTo(point.x, point.y);
                    ctx.stroke();
                }
                previousPoint = point;
            })
        })
    }
});

Fiddle - http://jsfiddle.net/sLgefm04/66/

Answer 2

也许这在 2015 年还不可用，但现在折线图有一个样式选项 spanGaps 如果为真，将在没有数据或数据为空的点之间绘制线条。如果为 false，具有 NaN 数据的点将在行中创建一个中断。

折线 ChartJS 空值/空值不会断线

Line ChartJS empty / null values doesn't break the line

javascript

null

chart.js

break