javascript - 如何在 chartJS 中定位 yAxes 标签

Question

我想在 chartJS 中将 y 轴刻度标签对齐 的刻度。

这是我到目前为止所得到的:

我想要刻度标签 0M、20M 和 40M 位于刻度标签上方。像这样:

这是我的图表配置:

new Chart(ctx, {
    type: 'bar',
    data,
    options: {
      ...
      scales: {
        xAxes: [{ ... }],
        yAxes: [{
          stacked: true,
          position: 'right',
          gridLines: {
            drawBorder: false
          },
          ticks: {
            maxTicksLimit: 3
          }
        }]
      }
    }
  })

我无法在图表选项中找到任何选项来执行此类操作。请帮忙

Answer 1

你可以通过在 options 配置中添加一个 animation 来做到这一点:

options: {
    animation: {
        duration: 1,
        onComplete: function() {
            var controller = this.chart.controller;
            var chart = controller.chart;
            var yAxis = controller.scales['y-axis-0'];

            yAxis.ticks.forEach(function(value, index) {
                var xOffset = chart.width - 40;
                var yOffset = ((chart.height - 60) / 2 * index) + 15;
                ctx.fillText(value + 'M', xOffset, yOffset);
            });   
        }
    }
}

JSFiddle 演示:https://jsfiddle.net/m5tnkr4n/1/

您可能需要调整 xOffset 和 yOffset 中的硬编码数字。这些数字将取决于图表的高度和宽度，以及您在 Canvas 区域中显示的功能。例如，如果您删除 xAxes 刻度标签，您可能需要减少 -60，因为这会使图表稍微变短。 /2 有效，因为您将 maxTicksLimit 设置为 3。