[英]How to hide grid lines and x-axis labels in chart.js?
我正在使用 chart.js v3.2.0,我想禁用網格線和 x 軸標簽。 我嘗試了其他堆棧溢出帖子中的各種示例,但似乎沒有一個有效。
https://jsfiddle.net/gcp95hjf/1/
html
<div style = "width: 600px; height: 400px;">
<canvas id="chartJSContainer" width="1" height="400"></canvas>
</div>
js
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);
有誰知道該怎么做?
謝謝
Chart.js v3 有多個重大更改,其中之一是您如何定義比例,遷移指南中對此進行了說明,並在許多示例中顯示( https://www.chartjs.org/docs/3.2.1/getting -started/v3-migration.html )
您必須將scales: { yAxes: [], xAxes: []}
改為scales: { y: {}, x: {}}
在兩個軸上隱藏網格線 -
ChartJS v2(舊版本)-
scales: {
x: [
{
gridLines: {
display: false,
},
},
],
y: [
{
gridLines: {
display: false,
},
},
],
},
較新版本 ChartJS v3 -
scales: {
x: {
grid: {
display: false,
},
},
y: {
grid: {
display: false,
},
},
},
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.