ChartJS 雷达图雷达线颜色?
ChartJS Radar Chart radar lines color?
所以我一直在研究这个问题,但还没有找到解决办法,我想改变雷达线的颜色,如下所示:
有办法吗?
这是我当前的代码:
new Chart(document.getElementById("result_chart"), {
"type": "radar",
"data": {
"labels": ["Idea", "Timing", "Skills", "Concept", "Market Plan", "MVP", "Revenue Potential", "Competition", "Team", "BMC", "Financial Model"],
"datasets": [{
"label": "Your Results",
"data": [
10,
20,
30,
40,
50,
60,
70,
80,
90,
100,
110
],
"fill": true,
"backgroundColor": "rgba(165, 211, 164, 0.2)",
"borderColor": "rgb(165, 211, 164)",
"pointBackgroundColor": "rgb(165, 211, 164)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgb(255, 99, 132)"
}]
},
"options": {
"elements": {
"line": {
"tension": 0,
"borderWidth": 3
}
}
}
});
您可以通过将这些道具添加到图表的比例规范中来轻松做到这一点:
scale: {
gridLines: {
color: 'red'
},
angleLines: {
color: 'red'
}
},
视觉输出将是您所要求的
希望对您有所帮助! :)
似乎库的配置已更改,现在应该如下所示:
...
scales: {
r: {
grid: {
color: "lightgreen",
},
}
}
options: {
scales: {
r: {
max: 100,
min: 0,
ticks: {
stepSize: 20,
textStrokeColor: 'rgb(54, 162, 235)',
color: 'rgba(240, 240, 240, 0.5)',
backdropColor: 'rgb(47, 56, 62)'
},
angleLines: {
color: 'rgba(240, 240, 240,0.5)',
},
grid: {
color: "lightgreen",
},
},
},
enter image description here
所以我一直在研究这个问题,但还没有找到解决办法,我想改变雷达线的颜色,如下所示:
有办法吗?
这是我当前的代码:
new Chart(document.getElementById("result_chart"), {
"type": "radar",
"data": {
"labels": ["Idea", "Timing", "Skills", "Concept", "Market Plan", "MVP", "Revenue Potential", "Competition", "Team", "BMC", "Financial Model"],
"datasets": [{
"label": "Your Results",
"data": [
10,
20,
30,
40,
50,
60,
70,
80,
90,
100,
110
],
"fill": true,
"backgroundColor": "rgba(165, 211, 164, 0.2)",
"borderColor": "rgb(165, 211, 164)",
"pointBackgroundColor": "rgb(165, 211, 164)",
"pointBorderColor": "#fff",
"pointHoverBackgroundColor": "#fff",
"pointHoverBorderColor": "rgb(255, 99, 132)"
}]
},
"options": {
"elements": {
"line": {
"tension": 0,
"borderWidth": 3
}
}
}
});
您可以通过将这些道具添加到图表的比例规范中来轻松做到这一点:
scale: {
gridLines: {
color: 'red'
},
angleLines: {
color: 'red'
}
},
视觉输出将是您所要求的
希望对您有所帮助! :)
似乎库的配置已更改,现在应该如下所示:
...
scales: {
r: {
grid: {
color: "lightgreen",
},
}
}
options: {
scales: {
r: {
max: 100,
min: 0,
ticks: {
stepSize: 20,
textStrokeColor: 'rgb(54, 162, 235)',
color: 'rgba(240, 240, 240, 0.5)',
backdropColor: 'rgb(47, 56, 62)'
},
angleLines: {
color: 'rgba(240, 240, 240,0.5)',
},
grid: {
color: "lightgreen",
},
},
},
enter image description here