【问题标题】：Chart.js - draw horizontal line based on a certain y-valueChart.js - 根据某个 y 值绘制水平线
【发布时间】：2015-11-14 04:17:47
【问题描述】：

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

Chart.js - draw horizontal line

本文中提到的代码根据图表上某个点的位置创建一条水平线。所以假设我有一个点在 42 和一个点在 44，然后我可以选择在其中任何一个上画一条线。

但在我目前的情况下，我想要一个 43 的点（例如），这将很难绘制，因为该点没有“最高值”（另外两个在 Chart.js 中计算出最高值)。有没有办法在 Chart.js 中做到这一点，例如，通过计算该行所需的“最高值”？在我的实际图表中，我不会有像 42 和 44 这样的点，我可以用它们平均并找到 43，我会有更像 39 和 55 的点，我需要在 43 处画一条线。

【问题讨论】：

标签： javascript jquery chart.js

【解决方案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 选项来覆盖刻度。

小提琴 - http://jsfiddle.net/gywzg9e4/

【讨论】：