Chart.js - draw horizontal line based on a certain y-value(Chart.js - 根据某个 y 值绘制水平线)

问题描述

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

I am referring to this post on Stack Overflow:

Chart.js - 绘制水平线

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

The code mentioned in this post creates a horizontal line based on the location of a point on the graph. So say I had a point at 42 and a point at 44, then I could choose to put a line at either of those.

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

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 值在那里绘制文本.

If you want to draw a label, you can adjust the line end position to leave space. Then use the same y value to draw text there.

如果您的图表数据点无法使刻度拉伸足够大(例如，刻度是从 0 到 10，但您想在 12 处绘制一条线)，请使用 chart.js 选项来覆盖刻度.

If your chart data points don't cause the scale to stretch enough (eg. the scale is from 0 to 10, but you want to draw a line at 12) use the chart.js options to override the scale.

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

这篇关于Chart.js - 根据某个 y 值绘制水平线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！