Line ChartJS空/空值不会破坏该行 [英] Line ChartJS empty / null values doesn't break the line

问题描述

我希望在值为null或为空时断开图表的行，但我不能。也许我错过了什么？

I want to break the line of the chart when values is null or empty, but I can't. Perhaps I miss something?

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/

推荐答案

Chart.js不直接支持此功能。

Chart.js doesn't support this directly.

1. 您必须禁用默认的细分图和


2. 编写您自己的

对于1.，将笔触宽度设置为0不起作用，因为canvas忽略0（和NaN，未定义...），所以你设置它到一个非常小的值，使该行不可见（有一个datasetStroke选项，但没有代码作用于它）

For 1., setting the stroke width to 0 does not work because canvas ignores 0 (and NaN, undefined...), so you set it to a very small value to make the line invisible (there is a datasetStroke option, but there is no code that acts on it yet)

这也是合乎逻辑的禁用填充。但是，在关闭数据集填充的情况下，点会填充黑色（Chart.js bug？），因此通过减小半径并增加笔触宽度来使点变为实心。

It would be logical to also disable the fill. However, with dataset fill turned off, the points get filled with black color (Chart.js bug?), so make the points solid by reducing the radius and increasing the strokewidth.

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

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

Notice that the type is LineAlt - which is how you take care of the 2. - by extending the Line chart type

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

小提琴 - http://jsfiddle.net/sLgefm04/66/

这篇关于Line ChartJS空/空值不会破坏该行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！