ChartJS 在刻度之间放置 y 轴标签答案

【问题标题】：ChartJS place y-axis labels between ticksChartJS 在刻度之间放置 y 轴标签
【发布时间】：2017-12-27 16:40:30
【问题描述】：

我有以下图表：

但是，我想将 y 轴标签更改为以下内容：

是否可以使用 ChartJS 在刻度线之间移动 y 轴标签，如上图示例所示？

功能类似于options.scales.yAxes[].ticks.position 选项，除了目前它被定义为in the x direction for the y axis，因为我需要它在y 轴的y 方向。更好的是，自动居中。

【问题讨论】：

标签： javascript canvas graph charts chart.js

【解决方案1】：

不幸的是，目前 ChartJS 中没有内置方法。

您宁愿需要创建一个图表插件来实现这一点。

plugins: [{
   beforeDraw: function(chart) {
      var ctx = chart.ctx;
      var yAxis = chart.scales['y-axis-0'];
      var tickGap = yAxis.getPixelForTick(1) - yAxis.getPixelForTick(0);
      yAxis.options.ticks.fontColor = 'transparent'; // hide original tick
      // loop through ticks array
      Chart.helpers.each(yAxis.ticks, function(tick, index) {
         if (index === yAxis.ticks.length - 1) return;
         var xPos = yAxis.right;
         var yPos = yAxis.getPixelForTick(index);
         var xPadding = 10;
         // draw tick
         ctx.save();
         ctx.textBaseline = 'middle';
         ctx.textAlign = 'right';
         ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
         ctx.fillText(tick, xPos - xPadding, yPos + tickGap / 2);
         ctx.restore();
      });
   }
}]

^{注意：这将隐藏第一个刻度（从 0 开始）}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

var barChart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: ['Jan', 'Feb', 'Mar'],
      datasets: [{
         label: 'BAR',
         data: [10, 20, 30],
         backgroundColor: 'rgba(0, 119, 204, 0.5)'
      }]
   },
   options: {
      responsive: false,
      scales: {
         yAxes: [{
            ticks: {
               beginAtZero: true
            }
         }]
      }
   },
   plugins: [{
      beforeDraw: function(chart) {
         var ctx = chart.ctx;
         var yAxis = chart.scales['y-axis-0'];
         var tickGap = yAxis.getPixelForTick(1) - yAxis.getPixelForTick(0);
         yAxis.options.ticks.fontColor = 'transparent'; // hide original tick
         // loop through ticks array
         Chart.helpers.each(yAxis.ticks, function(tick, index) {
            if (index === yAxis.ticks.length - 1) return;
            var xPos = yAxis.right;
            var yPos = yAxis.getPixelForTick(index);
            var xPadding = 10;
            // draw tick
            ctx.save();
            ctx.textBaseline = 'middle';
            ctx.textAlign = 'right';
            ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
            ctx.fillText(tick, xPos - xPadding, yPos + tickGap / 2);
            ctx.restore();
         });
      }
   }]
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx" height="200"></canvas>

【讨论】：

这几乎是开箱即用的。惊人的。谢谢！
有什么办法可以让画布重绘时标签不“跳”？我在这里详细说明了这个问题：stackoverflow.com/questions/45356432/…

【解决方案2】：

我认为您可以使用：yAxes: [{gridLines: { offsetGridLines: true }}] 来执行此操作。标签值将是厚度之间的平均值。

【讨论】：