javascript - Chart.js - 根据某个 y 值绘制水平线

Question

我指的是 Stack Overflow 上的这篇文章:

Chart.js - draw horizontal line

本文中提到的代码根据图形上某个点的位置创建了一条水平线。假设我在 42 处有一个点，在 44 处有一个点，那么我可以选择在其中一个点上画一条线。

但在我当前的场景中，我想要一个 43 点(例如)，这很难绘制，因为该点没有“最高值”(其他两个在 Chart.js 中计算出最高值).有没有办法在 Chart.js 中执行此操作，例如，通过计算该行所需的“最高值”？在我的实际图表中，我不会有像 42 和 44 这样的点，我可以用它们求平均并找到 43，我会有更像 39 和 55 的点，我需要在其中画一条线在 43。

Answer 1

在特定的 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 值在那里绘制文本。

如果您的图表数据点不会导致刻度足够大(例如，刻度从 0 到 10，但您想在 12 处画一条线)使用 chart.js 选项覆盖刻度。

---

fiddle - http://jsfiddle.net/gywzg9e4/