Line ChartJS 空/空值不会断行

2022-01-22 00:00:00 null break javascript chart.js

当值为 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 不起作用，因为画布忽略了 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 错误?)，因此通过减小半径和增加笔画宽度来使点成为实心.

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/

相关文章