javascript画布在一个不寻常的场景中没有绘制线

Question

抱歉我的英文。我根本不会说得好。 我正在设计一个用于练习画布的图表库。我发送了一个带有数据的json来绘制和配置选项。我在下面插入了json：

function drawChart() {
    let canvas = document.querySelector("#canvas")
    var chart = new Chartest(canvas, {
        chart: {
            type: Chartest.Line,
            style: {
                background: "#fff",
                barBackground: "#456"
            },
            title: "Unidades"
        },
        data: [{
                val: 10600,
                label: "Unidad 1"
            }, {
                val: 6000,
                label: "Segunda Unidad"
            }, {
                val: 4000,
                label: "Unidad numero tres"
            }, {
                val: 4005,
                label: "u4"
            }, {
                val: 0,
                label: "u5"
            }, {
                val: 50,
                label: "u6"
            }, {
                val: 3400,
                label: "u7"
         }]
    })
}

我从当前点到前一点画一条线等等。一切正常，除非我发送一个值为0的点。然后带有前一点的线不会绘制。我记录了绘图点，一切似乎都正确。在这里，您可以看到已记录的信息和最终结果，这是一条缺失的行，我无法理解原因：

Img: Logged info and final result

我在绘制以下行时插入了部分代码：

for (let i = 0; i < this.config.data.length; i++) {
                // line type
                ctx.beginPath()
                let scaledPointVal = this.config.data[i].val * scaledUnitVal
                let gradient = ctx.createLinearGradient(0, absoluteGridTop - scaledPointVal, 0, absoluteGridTop)
                gradient.addColorStop(0, 'rgba(10, 20, 200, .85)')
                gradient.addColorStop(.7, 'rgba(10, 20, 200, .7)')
                ctx.strokeStyle = gradient
                ctx.lineWidth = 2
                ctx.closePath()
                let x = scaleSpaceWidth + spaceForEachOne * i
                if (i != 0
                    && !isNaN(parseFloat(this.config.data[i - 1].val)) && isFinite(this.config.data[i - 1].val)
                    && !isNaN(parseFloat(this.config.data[i].val)) && isFinite(this.config.data[i].val)) {
                    // last and current point available
                    // draw current point
                    let pointYPos = headerHeight + chartContainerHeight - scaledPointVal
                    ctx.beginPath()
                    ctx.rect(x + spaceForEachOne / 2 - 2, pointYPos - 2, 4, 4)
                    ctx.fill()
                    /////////////////////////////////////////////////
                    // line from last point to current
                    /////////////////////////////////////////////////
                    ctx.closePath()
                    ctx.beginPath()
                    ctx.moveTo(this.fixPixelPos(x + spaceForEachOne / 2), this.fixPixelPos(pointYPos))
                    ctx.lineTo(this.fixPixelPos(x - spaceForEachOne / 2),
                        this.fixPixelPos(headerHeight + chartContainerHeight - this.config.data[i - 1].val * scaledUnitVal))
                    console.log(`from ${this.fixPixelPos(x + spaceForEachOne / 2)}, ${this.fixPixelPos(pointYPos)}. to ${this.fixPixelPos(x - spaceForEachOne / 2)}, ${this.fixPixelPos(headerHeight + chartContainerHeight - this.config.data[i - 1].val * scaledUnitVal)}`);
                    ctx.stroke()
                    ctx.closePath()
                    //////////////////////////////////////////////////
                    //////////////////////////////////////////////////
                }
                else if (!isNaN(parseFloat(this.config.data[i].val)) && isFinite(this.config.data[i].val)) {
                    // first point or last not valid or empty. just draw current point
                    let pointYPos = headerHeight + chartContainerHeight - scaledPointVal
                    ctx.beginPath()
                    ctx.rect(x + spaceForEachOne / 2 - 2, pointYPos - 2, 4, 
                      4)
                    ctx.fill()
                    ctx.closePath()
                }
                ctx.beginPath()
                ctx.font = "12.5px Barlow"
                ctx.textAlign = "center"
                let text = this.config.data[i].label
                while (ctx.measureText(text).width > spaceForEachOne - 15)
                text = text.slice(0, text.length - 1)
                if (text.length < this.config.data[i].label.length)
                text += "..."
                ctx.fillText(text, x + spaceForEachOne / 2, headerHeight + 
                     chartContainerHeight + 20)
}

请帮帮我。