He estado trazando gráficos de radar en html usando Plotly js y tengo algunos problemas.
<!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>Mi principal preocupación es poder conectar la línea final entre la Variable E y A. En los ejemplos que proporciona Plotly, este parece ser el comportamiento predeterminado, pero no puedo averiguar si he agregado una opción que deshabilita esto o si la versión de distribución de Plotly que estoy usando no lo permite. Estoy usando la versión exacta recomendada por Plotly aquí .
También me gustaría encontrar una manera de manipular la etiqueta de cada punto desde los valores actuales de r & theta a algo como value & variable , avíseme si tiene una solución para esto.
Agradezco la ayuda
He resuelto mis dos preguntas con las siguientes ediciones:
Para hacer la conexión final entre el primer y el último punto, agregamos las coordenadas del primer punto al final de los elementos 'r' y 'theta'. Asi que,
r: [35,20,20,20,30], theta: ["A", "B", "C", "D", "E"]se convierte
r: [35,20,20,20,30,35], theta: ["A", "B", "C", "D", "E", "A"]Para cambiar la etiqueta flotante de theta y r , usamos el elemento hovertemplate . Entonces, agregue en la línea:
hovertemplate: 'Variable: %{theta}, Value: %{r}'El producto final:
<!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>