Chart.js Js-指定要显示的x个标签,这在步长选项中是不可能的
我需要创建一个Chart.js,默认情况下只显示X轴上的标签0.1、0.3和0.5。如果需要绘制值0.013,则该值应介于0和0.1之间,但不显示其特定标签。值0.389也一样,需要在0.3和0.4之间显示,行为相同 当前我的图形显示如下: 期望的结果如下所示: 注意:即使某些“区域”没有值,也应显示标签0.1、0.3和0.5Chart.js Js-指定要显示的x个标签,这在步长选项中是不可能的,chart.js,Chart.js,我需要创建一个Chart.js,默认情况下只显示X轴上的标签0.1、0.3和0.5。如果需要绘制值0.013,则该值应介于0和0.1之间,但不显示其特定标签。值0.389也一样,需要在0.3和0.4之间显示,行为相同 当前我的图形显示如下: 期望的结果如下所示: 注意:即使某些“区域”没有值,也应显示标签0.1、0.3和0.5 config = { type: 'bar', data: { labels: [], datasets: [{
config = {
type: 'bar',
data: {
labels: [],
datasets: [{
data: [],
borderWidth: 0,
borderColor:'#E16972',
fill: true,
backgroundColor: "#E16972"
}]
},
options: {
animation: {
duration: false, //remove animation
},
responsive: true,
tooltips: {
enabled: false
},
title: {
display: false
},
legend: {
display: false
},
elements: {
point:{
radius: 0
}
},
scales: {
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'PSD (Hz/s²)'
},
ticks: {
beginAtZero: true,
suggestedMax: 0.2
}
}],
xAxes: [{
display: false,
},
{
gridLines : {
display : false
},
scaleLabel: {
display: false
},
type: 'linear',
ticks: {
beginAtZero: true,
autoSkip: false,
min: 0,
max: 0.5,
stepSize: 0.1,
}
}]
}
}
}
我通过一个回调函数解决了这个问题
ticks: {
beginAtZero: true,
autoSkip: false,
min: 0,
max: 0.5,
stepSize: 0.1,
callback: function(label, index, labels) {
if(label == 0 || label == 0.1 || label == 0.3 || label == 0.5){
return label;
}else{
return '';
}
}
}