如何连接 Plotly JS 雷达图线？

Question

我一直在使用 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 provides, this seems to be the default behavior, but I can't figure out if I have added an option that disables this or if the distribution version of Plotly I'm using doesn't allow this. I'm using the exact version recommended by Plotly here.

我还想找出一种方法来操纵每个点的标签，从当前的 r & theta 值到某些东西像 value & variable，如果你对此有解决方案，请告诉我。

感谢帮助

Answer 1

我已经通过以下编辑解决了我的两个问题：

为了在第一个点和最后一个点之间建立最终连接，我们将第一个点的坐标附加到 'r' 和 '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 元素. 所以，在行中添加：

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>

如何连接 Plotly JS 雷达图线？

How to Connect Plotly JS Radar Chart Lines?

javascript

radar-chart

plotly

plotly.js