问题描述
我使用 chart.js 创建了一个图表,它按预期工作。问题是我不需要 x 轴标签(速度)。我查看了与此类似的问题,但没有一个有效。如何在不删除或更改 chart.js v3 中的任何其他内容的情况下隐藏 x 轴标签?
解决方法
你可以做两件事,要么提供一个带有空字符串的标签数组,要么使用tick回调来提供空标签
scales: {
x: {
ticks: {
// Include a dollar sign in the ticks
callback: function(value,index,values) {
return '';
}
}
}
}
示例:
var options = {
type: 'line',data: {
// option 1,provide empty strings for labels array
labels: ["","",""],datasets: [{
label: '# of Votes',data: [12,19,3,5,2,3],borderWidth: 1
},{
label: '# of Points',data: [7,11,8,7],borderWidth: 1
}
]
},options: {
scales: {
x: {
ticks: {
//option 2,use callback to change labels to empty string
callback: () => ('')
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx,options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js" integrity="sha512-aWx9jeVTj8X49UzUnUHGIlo6rNne1xNsCny/lL0QwUTQK2eilrHXpSk9xbRm4FJ4eLi2XBmnFlRkWPoChSx8bA==" crossorigin="anonymous"></script>
</body>
简单地通过一个标志禁用 x 轴标签,如下所示:
options: {
scales: {
x: {
ticks: {
display: false
}
}
}
}