ChartJS在ticks之间放置y轴标签 [英] ChartJS place y-axis labels between ticks

问题描述

我有以下图表：

然而，我想将y轴标签如下所示：

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

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

解决方案

遗憾的是，ChartJS目前没有内置的方法。

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

 插件：[{
 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'; //隐藏原始记号
 //循环读取数组
 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; 
 //绘制勾号
 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（）; 
}）; 
 
}] 
  

^{注意： strong>这会隐藏第一个勾号（从0开始）}

ᴡᴏʀᴋɴɢɴɢᴇ

snippet-current-hidden）> 数据集：[{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'; //通过tick数组隐藏原始的tick //循环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,0）'; 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 =ctxheight =200> < / canvas>

I have the following graph:

However, i'd like to shift the y axis labels to be the following:

Is it possible to move the y axis labels in between the tick marks with ChartJS, like shown in the example image above?

Functionality is similar to the options.scales.yAxes[].ticks.position option, except currently it is defined as in the x direction for the y axis, where as I need it in the y direction for the y axis. And better yet, automatically centered.

解决方案

Unfortunately, there is no built-in method in ChartJS for this, at the moment.

You would rather need to create a chart plugin to achieve that.

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();
      });
   }
}]

^{note: this will hide the first tick (which begins at 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>

这篇关于ChartJS在ticks之间放置y轴标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！