由于文档似乎不太清楚，所以被困在chart.js项上。
只需尝试从图表中删除网格线。我尝试了Stack overflow中引用的两种旧语法：
options: {
scales: {
xAxes: [{
gridLines: {
display: false,
}
}]
}
}
新语法：
options: {
scales: {
y: {
grid: {
drawBorder: false
}
}
}
}
两者都不起作用。。。
这是我的代码段：
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 10, 5, 8, 11]
}]
},
options: {
scales: {
xAxes: [{
gridLines: {
display: false,
}
}],
y: {
grid: {
drawBorder: false
}
},
}
}
});.myChartDiv {
max-width: 600px;
max-height: 400px;
}<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"></canvas>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</html>您要查找的属性被称为display而不是drawBorder，而且您的xAxes的定义方式错误，您使用的是v2语法而不是v3
示例：
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 10, 5, 8, 11]
}]
},
options: {
scales: {
x: {
grid: {
display: false,
}
},
y: {
grid: {
display: false
}
},
}
}
});.myChartDiv {
max-width: 600px;
max-height: 400px;
}<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"></canvas>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</html>这是解决方案。
新版本中的配置似乎发生了很大变化。
此处的文档参考。
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 10, 5, 8, 11]
}]
},
options: {
scales: {
x: {
grid: {
drawOnChartArea:false
}
},
y: {
grid: {
drawOnChartArea:false
}
}
}
}
});.myChartDiv {
max-width: 600px;
max-height: 400px;
}<html>
<body>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"></canvas>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</html>我遇到了同样的问题，我通过将网格线的颜色设置为白色来解决它，如下所示：
scales: {
xAxes: [{
gridLines: {
color: '#ffffff'
}
}]
}