Как установить ChartJS по оси x

Question

Мы используем Chartjs для построения диаграмм. Однако нет никаких оснований для оси x. Существует решение для названия y-Axis в here, но для оси x I может добавить имя оси x, но не может создать пространство под диаграммой, чтобы правильно разместить его, используя y, как this.chart.height перекрыл текст с заголовком оси x.

Я посмотрел chartjs v2.0, но у него также нет поддержки названия x-Axis.

Answer 1

Мы устанавливаем высоту диаграммы в зависимости от того, какую высоту мы хотим для метки оси x, а затем пишем в этом пространстве.

Мы не должны делать ничего в 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(); 
    } 
}); 

, а затем

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

---

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