Chart.js如何在不显示xaxis和yaxis标签的情况下显示折线图



如何在不显示xaxis和yaxis标签的情况下显示折线图?

您可以将ticks显示设置为false,如下所示:

options: {
scales: {
y: {
ticks: {
display: false
}
},
x: {
ticks: {
display: false
}
}
}
}

示例:

var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 0],
borderWidth: 1,
backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
},
{
label: '# of Counts',
data: [1, 2, 3, 4, 5, 2],
borderWidth: 1,
backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
}
]
},
options: {
scales: {
y: {
ticks: {
display: false
}
},
x: {
ticks: {
display: false
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = 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.0/chart.js" integrity="sha512-LlFvdZpYhQdASf4aZfSpmyHD6+waYVfJRwfJrBgki7/Uh+TXMLFYcKMRim65+o3lFsfk20vrK9sJDute7BUAUw==" crossorigin="anonymous"></script>
</body>

如果你有一个带记号的标签,你可以使用

options: {
scales: {
y: {
ticks: {
display: false
},
scaleLabel: {
display: false,
labelString: 'Yaxes scaleLabel text'                                
}
},
x: {
ticks: {
display: false
},
scaleLabel: {
display: false,
labelString: 'Xaxes scaleLabel text'                                
}
}
}
}

最新更新