javascript - 如何设置ChartJS x轴标题

Question

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

我查看了 ChartJS v2.0，但它也不支持 x 轴标题。

Answer 1

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

我们不必在 draw 覆盖中执行任何操作，因为 Canvas 清除也是根据高度(我们调整的)进行的

预览

---

脚本

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

然后

...
new Chart(ctx).LineAlt(data);

---

fiddle - http://jsfiddle.net/ct2h2wde/