我正在使用chart.js v3.2.0,我想禁用网格线和x轴标签。我已经尝试了其他堆栈溢出帖子中的各种示例,但似乎都不起作用。
https://jsfiddle.net/gcp95hjf/1/
超文本标记语言
<div style = "width: 600px; height: 400px;">
<canvas id="chartJSContainer" width="1" height="400"></canvas>
</div>
日本
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132,1)'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)'
}
]
},
options: {
scales: {
xAxes: [{
display: false,
ticks: {
display: false //this will remove only the label
}
}],
yAxes: [{
display:false
}]
},
responsive: true,
maintainAspectRatio: false
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
有人知道怎么做吗?
谢谢
2条答案
按热度按时间gxwragnw1#
Chart.js v3有多处重大更改,其中之一是如何定义刻度,迁移指南中对此进行了说明,并在许多示例(https://www.chartjs.org/docs/3.2.1/getting-started/v3-migration.html)中进行了显示
您必须将
scales: { yAxes: [], xAxes: []}
更改为scales: { y: {}, x: {}}
工作提琴:https://jsfiddle.net/Leelenaleee/r26h71fm/2/
q3qa4bjr2#
隐藏两个坐标轴上的网格线-
ChartJS v2(旧版本)-
较新版本ChartJS v3 -