[英]How to prevent tick labels from “jumping” when drawn with ChartJS BeforeDraw
This question builds on the previous question found here : ChartJS place y-axis labels between ticks . 该问题基于此处找到的上一个问题: ChartJS在刻度之间放置y轴标签 。
When drawing the ticks with a BeforeDraw plugin, the ticks/labels end up "jumping" every time the canvas is redrawn. 当使用BeforeDraw插件绘制刻度时,每次重新绘制画布时刻度/标签最终都会“跳跃”。 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".
如果您运行代码段并在栏上上下移动时查看y轴标签,您将能够看到此“跳跃”。
Is there a way to prevent this "jumping" while still drawing the ticks with BeforeDraw? 有没有办法在仍然使用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>
Yes! 是! there is a way.
有一种方法。 Use the following plugin :
使用以下插件:
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();
});
}
}]
demo ⧩ 演示⧩
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.