折线图JS空/空值不会中断 [英] 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，undefined ...)，因此您将其设置为一个很小的值以使线不可见(有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错误?)，因此，请通过减小半径和增加笔划宽度来使这些点变实.

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/

这篇关于折线图JS空/空值不会中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！