【问题标题】：How to add an empty data point to a linechart on Chart.js?如何将空数据点添加到 Chart.js 上的折线图？
【发布时间】：2015-06-01 09:51:48
【问题描述】：

我正在尝试使用 Chart.js 在整个折线图中添加空数据点。我有这个：

var data = {
            labels: [
                "1","2","3","4","5","6","7","8","9","10"
            ],
            datasets: [
                {
                    label: "Traffic",
                    data: null,null,20,40,null,null,null,10,20,null
                }
            ]
        };

问题在于折线图仅将前两个“null”识别为空数据点并且不显示它们。但是，对于后面的空值，会显示一条线（连接前一个和下一个有效数据点），这使得“空”数据点看起来好像确实存在。有没有办法不在折线图中显示空值？（类似于 Canvas.js 提供的：http://canvasjs.com/docs/charts/basics-of-creating-html5-chart/empty-null-data-points-chart/）

我通读了 Chart.js 文档和 stackoverflow，但找不到答案。谁能帮帮我？

【问题讨论】：

因为 0 推断出有效的数据点，也就是 0。Null 将推断出根本没有数据点。
stackoverflow.com/questions/30462042/…也有类似问题

标签： javascript html charts chart.js

【解决方案1】：

我阅读了line documentation，发现了一个名为spanGaps的布尔选项

这是一段代码，我用来显示这个：

{
    'type': 'line',
    'data': {
        'labels': [1, 2, 3, 4, 5],

        'datasets': [{
            'label': 'example',
            'data': [4, 1, null, 3],

            // These are style properties, there is no need to copy them
            'borderColor': 'rgba(255,99,132,1)',
            'borderWidth': 1,
            'fill': false,
            tension: 0.2,
        }]
    },

    'options': {
        spanGaps: true // this is the property I found
     }
}

图表与spanGaps = false:

图表与spanGaps = true

【讨论】：

【解决方案2】：

在Line ChartJS empty / null values doesn't break the line 上发布答案摘要，并对上述问题进行（轻微）更正

扩展折线图

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

你必须这样调用 LineAlt

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

针对您的问题所做的其他更改 - 数据应该是一个数组，而不是逗号分隔的一组值

小提琴 - http://jsfiddle.net/zu3p2nky/

2016 年 8 月编辑

现在无需扩展即可开箱即用，只需使用 null 作为数据点。

【讨论】：