如何防止刻度标记从“跳楼”时ChartJS BeforeDraw绘制(How to prevent

这个问题建立在这里找到前面的问题： 蜱之间ChartJS地方y轴的标签 。

当与BeforeDraw插件绘制蜱，蜱/标签落得“跳”每个画布重绘时间。 如果您运行的代码片段，并期待在y轴的标签，你在徘徊和酒吧了，你就可以看到这种“跳跃”。

是否有办法防止这种“跳楼”，同时还绘制与BeforeDraw蜱？

 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, "userCallback" : function(t, i){ var mapping_function = [ "", "Critical", "Needs Work", "Good", "Needs Work", "Getting There", "Great Choices"]; //return t; return mapping_function[mapping_function.length - (i + 1)]; }, } }] } }, 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> 

Answer 1:

是! 有一种方法。 使用以下插件：

plugins: [{
   beforeDraw: function(chart) {
      // hide original tick
      chart.scales['y-axis-0'].options.ticks.fontColor = 'transparent';
   },
   afterDraw: function(chart) {
      var ctx = chart.ctx;
      var yAxis = chart.scales['y-axis-0'];
      var tickGap = yAxis.getPixelForTick(1) - yAxis.getPixelForTick(0);
      // 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();
      });
   }
}]

演示⧩

 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, "userCallback": function(t, i) { var mapping_function = ["", "Critical", "Needs Work", "Good", "Needs Work", "Getting There", "Great Choices"]; //return t; return mapping_function[mapping_function.length - (i + 1)]; }, } }] } }, plugins: [{ beforeDraw: function(chart) { // hide original tick chart.scales['y-axis-0'].options.ticks.fontColor = 'transparent'; }, afterDraw: function(chart) { var ctx = chart.ctx; var yAxis = chart.scales['y-axis-0']; var tickGap = yAxis.getPixelForTick(1) - yAxis.getPixelForTick(0); // 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> 

文章来源: How to prevent tick labels from “jumping” when drawn with ChartJS BeforeDraw