Chart.js - 绘制水平线 [英] Chart.js - draw horizontal line

问题描述

我想使用 Chart.js 在图表中绘制一条水平线。但我无法做到。

I would like to draw a horizontal line in a chart using Chart.js. But I'm not able to do it.

我读过这个问题 - Chart.js - 绘制任意垂直线 - 但我无法转换代码以绘制水平线不垂直。

I've read this question - Chart.js — drawing an arbitrary vertical line - but I can't transform the code for drawing horizontal lines not vertical.

我希望你能帮助我（尤其是potatopeelings :)。

I hope you can help me (especially potatopeelings :)).

推荐答案

以下是绘制水平线的JavaScript代码。

Here is the JavaScript code to draw a horizontal line.

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("LineWithLine").getContext("2d");

Chart.types.Line.extend({
    name: "LineWithLine",
    initialize: function () {
        Chart.types.Line.prototype.initialize.apply(this, arguments);
    },
    draw: function () {
        Chart.types.Line.prototype.draw.apply(this, arguments);

        var point = this.datasets[0].points[this.options.lineAtIndex]
        var scale = this.scale
        console.log(this);

        // draw line
        this.chart.ctx.beginPath();
        this.chart.ctx.moveTo(scale.startPoint+12, point.y);
        this.chart.ctx.strokeStyle = '#ff0000';
        this.chart.ctx.lineTo(this.chart.width, point.y);
        this.chart.ctx.stroke();

        // write TODAY
        this.chart.ctx.textAlign = 'center';
        this.chart.ctx.fillText("TODAY", scale.startPoint + 35, point.y+10);
    }
});

new Chart(ctx).LineWithLine(data, {
    datasetFill : false,
    lineAtIndex: 2
});

http://jsfiddle.net/7a4hhzge/455/

这是基于用于绘制任意垂直线的代码，它可能不完美但你应该能够调整它以满足您的需求。

This is based off of the code used to draw an arbitrary vertical line, it may not be perfect but you should be able to adjust it to fit your needs.

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