如何使用Chart.js在yAxis上有条件地显示/隐藏网格线

Question

我第一次使用Chart.js，我使用的是雷达图，我希望yA轴线(从0到100，步长为10(只显示在偶数上，并将网格线颜色更改为灰色和更厚，如果值为奇数，则根本不显示网格线，这就是我目前所得到的，我知道我必须使用回调来访问我要瞄准的对象，但我无法访问它：

buildChart = () => {
const myChartRef = this.chartRef.current.getContext("2d");
myLineChart = new Chart(myChartRef, {
type: "radar",
data: {
labels: ["Fifa20", "CS:GO", "Dota 2", "LOL", "Overwatch", "Fortnite"],
datasets: [
{
label: "Games",
data: [40, 45, 53, 45, 100, 13],
backgroundColor: [
"transparent",
"transparent",
"transparent",
"transparent",
"transparent",
"transparent"
],
borderColor: [
"rgba(203,166,255,1)",
"rgba(203,166,255,1)",
"rgba(203,166,255,1)",
"rgba(203,166,255,1)",
"rgba(203,166,255,1)",
"rgba(203,166,255,1)"
],
borderWidth: 5,
pointBorderWidth: 0,
pointBorderColor: "transparent"
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scale: {
ticks: {
min: 0,
max: 100,
fontSize: 7,
callback: function(value, index, values) {
switch (value) {
case 20:
return value;
case 40:
return value;
case 60:
return value;
case 80:
return value;
case 100:
return value;
default:
return "";
}
}
},
angleLines: {
display: true
},
gridLines: {
display: true,
color: "#cac7c7",
callback: function(value, index, values) {
if (value % 2 === 0) {
Chart.defaults.global.options.gridLines.display = false;
}
}
},
pointLabels: {
fontSize: 16,
fontStyle: "bold"
}
}
}
});
};
render() {
console.log(Chart.defaults.global);
return (
<div style={{ height: "100%", width: "100%" }}>
<canvas id="myChart" ref={this.chartRef} />
</div>
);
}
}

Answer 1

我不明白你为什么要使用回调来实现你想要的。

为了只显示20、40、60等的网格线，可以定义scale.ticks.stepSize: 20。要使网格线更粗，请定义例如scale.gridLines.lineWidth: 5。

new Chart(document.getElementById('myChart'), {
type: "radar",
data: {
labels: ["Fifa20", "CS:GO", "Dota 2", "LOL", "Overwatch", "Fortnite"],
datasets: [{
label: "Games",
data: [40, 45, 53, 45, 100, 13],
backgroundColor: [
"transparent",
"transparent",
"transparent",
"transparent",
"transparent",
"transparent"
],
borderColor: [
"rgba(203,166,255,1)",
"rgba(203,166,255,1)",
"rgba(203,166,255,1)",
"rgba(203,166,255,1)",
"rgba(203,166,255,1)",
"rgba(203,166,255,1)"
],
borderWidth: 5,
pointBorderWidth: 0,
pointBorderColor: "transparent"
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scale: {
ticks: {
display: true,
min: 0,
max: 100,
stepSize: 20,
fontSize: 7,
callback: function(value, index, values) {
switch (value) {
case 20:
return value;
break;
case 40:
return value;
break;
case 60:
return value;
break;
case 80:
return value;
break;
case 100:
return value;
break;
default:
return "";
}
}
},
angleLines: {
display: true
},
gridLines: {
display: true,
lineWidth: 5,
color: "#cac7c7"
},
pointLabels: {
fontSize: 16,
fontStyle: "bold"
}
}
}
});

canvas {
min-width: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" width="100" height="100"></canvas>