即时缩放时，如何从刻度中删除小数？

问题描述

我使用chart.js chartjs-plugin-zoom插件来缩放我的图表，但是我有一些刻度问题。当我进行缩放时，刻度会丢失小数点后的位置，怎么删除小数点后的位置？

我的刻度配置不包含小数，我有2个轴，其中1个代表总计（左），2个代表百分比，这是一个问题，并且我无法对缩放范围进行限制，因为我不知道会多大是数据

这是我的配置：

'    public bondadOptions2: (ChartOptions) ={
     responsive: false,tooltips:{
     titleFontSize:0,titleMarginBottom:0,bodyFontSize:12,callbacks: {
    label: function (tooltipItem,data) {
    var label = data.datasets[tooltipItem.datasetIndex].label || '';
    if (label) {
        label += ': ';
    }
    label += Number(tooltipItem.yLabel).toFixed(2);
    return label;
  }
 }
},scales: {
  yAxes: [{id:'y1',position: 'left',ticks: {
    fontColor: '#949494',display:true,padding: 5,fontSize: 10,min: 10,suggestedMax: 100,stepSize: 10
  },gridLines: {
    color: '#949494',drawTicks: false,zeroLineColor: '#949494',drawBorder:true
  }
},{ id:'y2',position: 'right',type: 'linear',min: 0,stepSize: 10,callback: function(value) {
      return value + "%"
  }
  },display:false,drawBorder:true
  }
}],xAxes: [{
  ticks: {
    beginAtZero: false,fontColor: '#949494',display: true,max:20,min:0,},drawBorder:true,offsetGridLines:true
  }
 }]
  },plugins: {
    zoom: {
      // Container for pan options
      pan: {
   
        enabled: true,drag:true,mode: 'xy ',rangeMin: {
            x: null,y: 0
        },rangeMax: {
            x: null,y: null
        }
    },zoom: {
        enabled: true,mode: 'xy',y: null
        }
      }
    }
  }
}'

解决方法

您可以尝试在ticks.callback函数中沿y轴百分比舍入值，如下所示：

{ 
  id:'y2',...
  callback: value => Math.round(value) + "%"
}