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

Question

我正在使用 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,
    display:true,
    zeroLineColor: '#949494',
    drawBorder:true
  }
}, 
{ id:'y2',
  position: 'right',
  type: 'linear',
  ticks: {
    fontColor: '#949494',
    display:true,
    padding: 5,
    fontSize: 10,
    min: 0,
    suggestedMax: 100,
    stepSize: 10,
    callback: function(value) {
      return value + "%"
  }
  },
  gridLines: {
    color: '#949494',
    drawTicks: false,
    display:false,
    zeroLineColor: '#949494',
    drawBorder:true
  }
}],
xAxes: [{
  ticks: {
    beginAtZero: false,
    fontColor: '#949494',
    padding: 5,
    display: true,
    
    max:20,
    min:0,
  },
  gridLines: {
    color: '#949494',
    drawTicks: false,
    display:true,
    zeroLineColor: '#949494',
    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',
        rangeMin: {
            x: null,
            y: 0
        },
        rangeMax: {
            x: null,
            y: null
        }
      }
    }
  }
}'

Answer 1

您可以尝试在ticks.callback 函数中对百分比 y 轴上的值进行四舍五入，如下所示：

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