Javascript ChartJ在刻度之间放置y轴标签

我有以下图表：

但是，我希望将y轴标签移到以下位置：

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

---

功能类似于

options.scales.yAxes[].ticks.position

选项，不同的是当前它被定义为y轴x方向的

，其中我需要y轴y方向的
。更好的是，自动居中。
不幸的是，目前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条形图=新图表（ctx{
类型：'bar'，
数据：{
标签：['一月'，'二月'，'三月']，
数据集：[{
标签：“酒吧”，
数据：[10,20,30]，
背景颜色：“rgba（0，119，204，0.5）”
}]
},
选项：{
回答：错，
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
},
插件：[{
绘制前：函数（图表）{
var ctx=chart.ctx；
var yAxis=图表刻度['y轴-0']；
var tickGap=yAxis.getPixelForTick（1）-yAxis.getPixelForTick（0）；
yAxis.options.ticks.fontColor='透明'；//隐藏原始记号
//循环通过滴答数组
图表.helpers.each（yAxis.ticks，函数（tick，索引）{
if（index==yAxis.ticks.length-1）返回；
var xPos=yAxis.right；
var yPos=yAxis.getPixelForTick（索引）；
var=10；
//划勾
ctx.save（）；
ctx.textb基线='中间'；
ctx.textAlign='right'；
ctx.fillStyle='rgba（0,0,0,0.8）'；
ctx.fillText（勾号，xPos-XPAdd，yPos+tickGap/2）；
ctx.restore（）；
});
}
}]
});
不幸的是，目前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条形图=新图表（ctx{
类型：'bar'，
数据：{
标签：['一月'，'二月'，'三月']，
数据集：[{
标签：“酒吧”，
数据：[10,20,30]，
背景颜色：“rgba（0，119，204，0.5）”
}]
},
选项：{
回答：错，
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
},
插件：[{
绘制前：函数（图表）{
var ctx=chart.ctx；
var yAxis=图表刻度['y轴-0']；
var tickGap=yAxis.getPixelForTick（1）-yAxis.getPixelForTick（0）；
yAxis.options.ticks.fontColor='透明'；//隐藏原始记号
//循环通过滴答数组
图表.helpers.each（yAxis.ticks，函数（tick，索引）{
if（index==yAxis.ticks.length-1）返回；
var xPos=yAxis.right；
var yPos=yAxis.getPixelForTick（索引）；
var=10；
//划勾
ctx.save（）；
ctx.textb基线='中间'；
ctx.textAlign='right'；
ctx.fillStyle='rgba（0,0,0,0.8）'；
ctx.fillText（勾号，xPos-XPAdd，yPos+tickGap/2）；
ctx.restore（）；
});
}
}]
});

我想你可以使用：
yAxes:[{gridLines:{offsetGridLines:true}}]
来做这件事。标签值将是厚度之间的平均值。
我认为您可以使用：
yAxes:[{gridLines:{offsetGridLines:true}}]
来执行此操作。标签值将是厚度之间的平均值。
这几乎是现成的。令人惊叹的非常感谢。有没有办法使画布重新绘制时标签不会“跳转”？我在这里详细说明了这个问题：这几乎是开箱即用的。令人惊叹的非常感谢。有没有办法使画布重新绘制时标签不会“跳转”？我在这里详述了这个问题：