chart.js - ChartJS 将轴标签对齐到顶部

Question

ChartJS /中有没有办法react-chartjs-2将 Y 轴标题与轴的顶部对齐，而不是默认的垂直对齐？

换句话说，而不是这样：

我要这个：

我对 Y 轴的基本配置如下：

yAxes: [
  {
    scaleLabel: {
      display: true,
      labelString: '$ USD'
    }
  }
]

标签： chart.jsreact-chartjs

Answer 1

我不确定 Chart.js 中是否有对此要求的内置支持，但是您可以ctx使用下面显示的代码中的任何值填充。请根据您的需要调整xOffset和值。yOffset小提琴-> http://jsfiddle.net/Lzo5g01n/8/

animation: {
      duration: 1,
      onComplete: function() {
        var controller = this.chart.controller;
        var chart = controller.chart;
        var yAxis = controller.scales['y-axis-0'];
        var xOffset = chart.width - (chart.width - 5);
        var yOffset = chart.height - (chart.height - 18);
        ctx.fillText('$USD', xOffset, yOffset);
      }
    }

使用上面的代码，有一个问题是标签在悬停在栏上时消失。

这个新代码可能有助于解决问题-> http://jsfiddle.net/moz73qep/3/

var myBarExtend = Chart.controllers.bar.prototype.draw;

Chart.helpers.extend(Chart.controllers.bar.prototype, {
    draw: function () {
      myBarExtend.apply(this, arguments);   
      var controller = this.chart.controller;
        var chart = controller.chart;
        var yAxis = controller.scales['y-axis-0'];
        var xOffset = chart.width - (chart.width - 5);
        var yOffset = chart.height - (chart.height - 18);
        ctx.fillText('$USD', xOffset, yOffset);
    } });