如何设置ChartJS x轴标题

Question

我们正在使用Chartjs绘制图表，但是没有给出x轴标题，here中有y轴标题的解决方案，但对于x轴我可以添加x轴名称但无法在图表下方创建空间以正确放置它，使用y作为this.chart.height将文本与x轴标题重叠。

我看过chartjs v2.0，但它也不支持x-Axis标题。

Answer 1

我们根据x轴标签所需的高度设置图表的高度，然后在该空间中写入。

我们不需要在get覆盖中执行任何操作，因为画布清除也会根据高度（我们调整过）发生

预览

<强>脚本

draw

然后

Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function (data) {
        this.chart.height -= 30;

        Chart.types.Line.prototype.initialize.apply(this, arguments);

        var ctx = this.chart.ctx;
        ctx.save();
        // text alignment and color
        ctx.textAlign = "center";
        ctx.textBaseline = "bottom";
        ctx.fillStyle = this.options.scaleFontColor;
        // position
        var x = this.chart.width / 2;
        var y = this.chart.height + 15 + 5;
        // change origin
        ctx.translate(x, y)
        ctx.fillText("My x axis label", 0, 0);
        ctx.restore();
    }
});

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