[英]how can i remove the decimals from the tick when im zooming?
我使用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
}
}
}
}
}'
您可以尝试在ticks.callback
函数中对百分比 y 轴上的值进行ticks.callback
,如下所示:
{
id:'y2',
...
callback: value => Math.round(value) + "%"
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.