以特定Y值绘制水平线

Question

我指的是关于Stack Overflow的这篇文章：

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

但在我目前的情况下，我想要一个43点（例如），这很难画，因为没有＆＃34;最高值＆＃34;对于这一点（另外两个具有在Chart.js中计算的最高值）。有没有办法在Chart.js中执行此操作，例如，通过计算＆＃34;最高值＆＃34;这条线需要什么？在我的实际图表中，我不会得到像42和44这样的点，我可以平均得到43，我会得到更像39和55的东西，其中我需要在43处绘制一条线。 / p>

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选项覆盖比例。 / p>

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

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

1 个答案:

以特定Y值绘制水平线