But in my current scenario, I want a point at 43 (for example), and this would be hard to draw as there is no "top value" for this point (the other two have top values calculated inside Chart.js). Is there a way to do this in Chart.js, for example, by calculating the "top value" needed for that line? In my actual graph I won't have points like 42 and 44 with which I can average and find 43, I'll have something more like 39 and 55, in which I need to draw a line at 43.

推荐答案

在特定 Y 值处绘制水平线

只需使用 scale.calculateY 即可完成此操作

var data = {
    labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
    datasets: [{
        data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
    }]
};

var ctx = document.getElementById("myChart").getContext("2d");
Chart.types.Line.extend({
    name: "LineWithYLine",
    draw: function () {
        Chart.types.Line.prototype.draw.apply(this, arguments);

        var scale = this.scale
        var ctx = this.chart.ctx;
        // calculate using the scale
        var y = scale.calculateY(this.options.lineAtValue);

        // draw line
        ctx.save();
        ctx.strokeStyle = '#ff0000';
        ctx.beginPath();
        ctx.moveTo(Math.round(scale.xScalePaddingLeft), y);
        ctx.lineTo(this.chart.width, y);
        ctx.stroke();
        ctx.restore();
    }
});

new Chart(ctx).LineWithYLine(data, {
    datasetFill: false,
    lineAtValue: 7.5
});

如果要绘制标签，可以调整行尾位置留出空间.然后使用相同的 y 值在那里绘制文本.