Javascript 如何在chartJS中定位Yax标签_Javascript_Charts_Chart.js

Javascript 如何在chartJS中定位Yax标签

javascript charts chart.js

Javascript 如何在chartJS中定位Yax标签,javascript,charts,chart.js,Javascript,Charts,Chart.js,我想在chartJS中将y轴记号标签与记号上方对齐以下是到目前为止我得到的信息：我想要勾号标签0M，20M和40M在勾号标签上方。大概是这样的：这是我的图表配置： new Chart(ctx, { type: 'bar', data, options: { ... scales: { xAxes: [{ ... }], yAxes: [{ stacked: true,

我想在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
          }
        }]
      }
    }
  })

我在图表选项中找不到任何选项来做这样的事情。请帮助

您可以通过向

选项

配置中添加

动画

来完成此操作：

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

JSFIDLE演示：

您可能需要调整

xOffset

和

yOffset

中的硬编码数字。这些数字将取决于图表的高度和宽度，以及在画布区域中显示的功能。例如，如果删除

xAxes

勾号标签，则需要减少

-60

，因为这将使图表略短<代码>/2有效，因为您将

maxTicksLimit

设置为3