如何防止刻度线标签“跳”？用ChartJS BeforeDraw绘制时 [英] How to prevent tick labels from "jumping" when drawn with ChartJS BeforeDraw

问题描述

此问题基于此处找到的上一个问题： ChartJS放置y轴刻度之间的标签。

This question builds on the previous question found here : ChartJS place y-axis labels between ticks.

使用BeforeDraw插件绘制刻度时，每次重新绘制画布时刻度/标签最终都会跳跃。如果您运行代码段并在栏上上下移动时查看y轴标签，您将能够看到此跳跃。

When drawing the ticks with a BeforeDraw plugin, the ticks/labels end up "jumping" every time the canvas is redrawn. If you run the code snippet and look at the y-axis labels as you hover on and off of the bars, you will be able to see this "jumping".

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>

推荐答案

是！。使用以下插件：

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>

这篇关于如何防止刻度线标签“跳”？用ChartJS BeforeDraw绘制时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！