本文介绍了ChartJS在ticks之间放置y轴标签的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有以下图表:



然而,我想将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();
});

}]

ᴡᴏʀᴋɪɴɢ ᴇ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轴标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-22 12:59