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

问题描述

我指的是有关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选项覆盖比例尺./p>

---

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

I am referring to this post on Stack Overflow:

Chart.js - draw horizontal line

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.

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.

解决方案

Drawing a Horizontal Line at a Specific Y Value

Just utilize the scale.calculateY to do this

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
});

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.

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.

---

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

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