Chart.js – 根据某个y值绘制水平线
我指的是Stack Overflow上的这篇文章：
Chart.js – 绘制水平线
本文中提到的代码根据图表上某点的位置创建一条水平线。 所以说我在42点和44点有一个点，然后我可以选择在其中任何一个上加一条线。
但是在我目前的场景中，我想要一个43点（例如），并且这很难绘制，因为此点没有“最高值”（其他两个在Chart.js中计算出最高值）。 有没有办法在Chart.js中执行此操作，例如，通过计算该行所需的“最高值”？ 在我的实际图表中，我不会有像42和44这样的点，我可以平均找到43，我会有更像39和55的东西，其中我需要在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值在那里绘制文本。
如果您的图表数据点不会导致比例足够伸展（例如，比例从0到10，但您想在12处绘制一条线），请使用chart.js选项覆盖比例。