我一直在使用Plotly js在html中绘制雷达图，但遇到了一些问题。
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<script src="https://cdn.plot.ly/plotly-2.8.3.min.js"></script>
<style>
#radar {
position: absolute;
}
</style>
</head>
<body>
<div id="radar"></div>
<script>
WS = document.getElementById('radar')
Plotly.newPlot( WS,
[{
type: 'scatterpolar',
r: [35,20,20,20,30],
theta: ["A", "B", "C", "D", "E"],
fill: "none",
name: "Band 1",
line: {
color: "red"
}
},{
type: 'scatterpolar',
r: [25,12,12,15,35],
theta: ["A", "B", "C", "D", "E"],
fill: "toself",
name: "Band 2",
line: {
color: "blue"
}
}],
{
polar: {
radialaxis: {
showticklabels: false,
range: [0, 40]
}
},
margin: {t:0}
}
)
</script>
</body>
</html>我主要关心的是能否在变量E和A之间进行最后一行连接。在Plotly提供的示例中，这似乎是默认行为，但我不知道我是否添加了禁用此功能的选项，或者我使用的Plotly的分发版本不允许此功能。我在这里使用Plotly推荐的确切版本。
我还想找出一种方法，从当前r&theta值到类似于value&变量，如果您有解决方案，请告诉我。
感谢的帮助
我通过以下编辑解决了这两个问题：
为了在第一个点和最后一个点之间建立最终连接，我们将第一个点的坐标附加到"r"one_answers"theta"元素的末尾。所以，
r: [35,20,20,20,30],
theta: ["A", "B", "C", "D", "E"]
成为
r: [35,20,20,20,30,35],
theta: ["A", "B", "C", "D", "E", "A"]
要更改theta和r的悬停标签，我们使用悬停模板元素。因此，在行中添加：
hovertemplate: 'Variable: %{theta}, Value: %{r}'
最终产品：
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<script src="https://cdn.plot.ly/plotly-2.8.3.min.js"></script>
<style>
#radar {
position: absolute;
}
</style>
</head>
<body>
<div id="radar"></div>
<script>
WS = document.getElementById('radar')
Plotly.newPlot( WS,
[{
type: 'scatterpolar',
r: [35,20,20,20,30, 35],
theta: ["A", "B", "C", "D", "E", "A"],
fill: "none",
name: "Band 1",
line: {
color: "red"
},
hovertemplate: 'Variable: %{theta}, Value: %{r}'
},{
type: 'scatterpolar',
r: [25,12,12,15,35,25],
theta: ["A", "B", "C", "D", "E", "A"],
fill: "toself",
name: "Band 2",
line: {
color: "blue"
},
hovertemplate: 'Variable: %{theta}, Value: %{r}'
}],
{
polar: {
radialaxis: {
showticklabels: false,
range: [0, 40]
}
},
margin: {t:0}
}
)
</script>
</body>
</html>