如何在ChartJS中向下移动题字垂直线

时间:2019-04-01 10:44:02

标签: javascript canvas charts graphics chart.js

有一个已绘制的chartjs图表,并且通过prototype.draw绘制了一条垂直线。如果垂直线的文本超出了画布并且没有显示,如何将其向下移动?

Chart.elements.Line.prototype.draw = function () {
    this._chart.ctx.save();
    this._chart.ctx.strokeStyle = '#808080';

    var points = this._chart.getDatasetMeta(0).data,
        point_x = points[points.length - 1]._model.x,
        point_y = points[points.length - 1]._model.y,
        bottom = this._chart.scales['y-axis-0'].bottom;

    this._chart.ctx.beginPath();
    this._chart.ctx.lineWidth = 3;
    this._chart.ctx.moveTo(point_x, point_y);
    this._chart.ctx.lineTo(point_x, bottom);

    this._chart.ctx.textAlign = 'right';
    this._chart.ctx.fillStyle = '#808080';
    if ($(window).width() < 420) {
        this._chart.ctx.font = '500 14px "Montserrat", sans-serif';
        this._chart.ctx.fillText("Payback", point_x - 2, bottom - 14);
    } else {
        this._chart.ctx.font = '500 16px "Montserrat", sans-serif';
        this._chart.ctx.fillText("Payback", point_x - 5, bottom + 24);
    }

    this._chart.ctx.stroke();
    this._chart.ctx.restore();
}

chart preview

need

0 个答案:

没有答案