如何设置ChartJS的x轴标题 [英] How to set ChartJS x-axis title

问题描述

我们使用Chartjs绘制图表，但没有给出x轴标题，在

---

脚本

  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（）; 
 //文本对齐和颜色
 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; 
 //改变原点
 ctx.translate（x，y）
 ctx.fillText（My x axis label，0，0）; 
 ctx.restore（）; 
} 
}）; 
  

，然后

  ... 
 new Chart（ctx）.LineAlt（data）; 
  

---

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

We are using Chartjs to plot the charts ,However there is no to give the x-axis titles,There is a solution for y-Axis title in here , But for x-Axis I could add the x axis name but could not create the space below the chart to properly place it , using y as this.chart.height overlapped the text with x axis title.

I have looked the chartjs v2.0 but it also does not have support for x-Axis title.

解决方案

We set the height of the chart depending on how much height we want for the x axis label and then write in that space.

We don't have to do anything in the draw override because the canvas clearing too happens based on the height (that we adjusted)

Preview

---

Script

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

and then

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

---

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

这篇关于如何设置ChartJS的x轴标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！