无论如何隐藏 ChartJS 中刻度线和 chartArea 之间的网格线?
Is there anyway to hide the gridlines between ticks and chartArea in ChartJS?
有没有办法删除网格线的这个溢出部分?
这正是我要找的:
几年前我见过一些 post 人提出这个问题,其中 none 确实得到了任何结果。那些是很久以前的事了,我祈祷从那时起就发生了修复。
干杯!
您可以在网格选项中将 tickLength
设置为 0。要使刻度看起来仍然有点远离刻度,您可以使用填充选项:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange'
}
]
},
options: {
scales: {
y: {
ticks: {
padding: 4,
crossAlign: 'far'
},
grid: {
tickLength: 0
}
},
x: {
grid: {
tickLength: 0
}
}
}
}
}
const 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.7.1/chart.js"></script>
</body>
有没有办法删除网格线的这个溢出部分?
这正是我要找的:
几年前我见过一些 post 人提出这个问题,其中 none 确实得到了任何结果。那些是很久以前的事了,我祈祷从那时起就发生了修复。
干杯!
您可以在网格选项中将 tickLength
设置为 0。要使刻度看起来仍然有点远离刻度,您可以使用填充选项:
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'orange'
}
]
},
options: {
scales: {
y: {
ticks: {
padding: 4,
crossAlign: 'far'
},
grid: {
tickLength: 0
}
},
x: {
grid: {
tickLength: 0
}
}
}
}
}
const 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.7.1/chart.js"></script>
</body>