需要帮助样式图表JS雷达图

Question

我正在尝试将背景设置为下面的链接雷达图，并希望能够进行

• 设置雷达线的颜色
• 设置厚度
• 设置0-100的刻度
• 设置字体大小

我认为这必须通过"选项"来完成(因为这与数据集无关(，但在尝试了几个小时后，我对JS的掌握还不够。

此处打开代码此处为图表JS雷达说明

new Chart(document.getElementById("radar-chart"), {
type: 'radar',
data: {
labels: ["Business", "Brand", "Marketing", "Stakeholders", "Clients"],
datasets: [
{
label: "",
fill: true,
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)", 
pointBorderColor: "#fff",
pointBackgroundColor: "rgba(255,99,132,1)",
pointBorderColor: "#fff",
data: [25.48,54.16,7.61,8.06,4.45]
}
]
},  
options: {
legend: {
display: false    
},
borderWidth: 10,
}
});

Answer 1

为了获得您想要的内容，您可以在options.scale中定义ticks、gridLines和pointLabels。

new Chart(document.getElementById("radar-chart"), {
type: 'radar',
data: {
labels: ["Business", "Brand", "Marketing", "Stakeholders", "Clients"],
datasets: [{
data: [25.48, 54.16, 7.61, 8.06, 4.45],
fill: true,
backgroundColor: "rgba(255,99,132,0.2)",
borderColor: "rgba(255,99,132,1)",
pointBorderColor: "#fff",
pointBackgroundColor: "rgba(255,99,132,1)"
}]
},
options: {
legend: {
display: false
},
borderWidth: 10,
scale: {
ticks: {
fontSize: 18,
max: 100
},
gridLines: {
lineWidth: 2,
color: "lightgreen"
},
pointLabels: {
fontSize: 18,
fontStyle: "bold"
}
}  
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<canvas id="radar-chart" height="200"></canvas>