javascript - ¿Cuál es la forma más efectiva de implementar una gráfica de radar con 50 puntos en ubicaciones arbitrarias utilizando chart.js?

radar-chart

Question

Considere una secuencia de datos a lo largo de las siguientes líneas:

data = [{angle:1.2,value:1.2},...,{angle:355.2: value:5.6}];

Me gustaría mostrar estos datos en un gráfico de escala radial (es decir, bandas circulares que indican qué tan alto es el valor de cada punto) para mostrar el ángulo frente al valor. Los ángulos cambiarán en una cantidad pequeña pero incontrolable para cada conjunto de datos, pero siempre habrá ~ 50 de ellos espaciados de manera bastante uniforme alrededor del gráfico.

Parece que chart.js tiene dos opciones que no encajan del todo:

• Un gráfico de radar que parece requerir una etiqueta por punto pero sin una forma obvia de controlar dónde se aplican esas etiquetas.
• Una dispersión xy para la cual podría calcular las coordenadas x / y pero que no tiene la escala radial para ayudar a visualizar el valor de cada punto.

¿Hay alguna manera de combinar las dos opciones, tal vez o alguna opción que no haya podido controlar para lograr el resultado que estoy buscando aquí?

Editar: por ejemplo, esto muestra los datos pero carece de una escala radial:

https://jsfiddle.net/7d7ghaxx/4/

** Edit2 - Este es el tipo de cosa que esperaría ver como resultado:

Answer 1

Demostración y código:

https://stackblitz.com/edit/js-jp4xm4?file=index.js

Explicación:

1. Utiliza un gráfico de scatter para trazar puntos
2. Agregó (escribió) un plugin chartjs que convierte los puntos de polar a cartesiano en beforeUpdate de la beforeUpdate para que no tenga que preocuparse por la conversión antes de cada actualización.
3. La cuadrícula x & y hecha (no los ejes a través del origen) se oculta agregando gridLines : { color: ''transparent'' } y ticks : { display: false }
4. Las mínimas y max (opciones en ticks ) de ambos ejes son iguales para que la organización esté en el centro
5. Se agregó una escala radialLinear para la rejilla polar.

(Actualización 1)

6. Se agregó una devolución de llamada de etiqueta de información sobre herramientas para mostrar información sobre herramientas como (r, θ) en lugar de predeterminado (x, y)

(Actualización 2)

7. Agregó (escribió) un plugin beforeDraw para llenar el ctx con un color azul claro como el OP quería

PS: (Señalando solo para ser un poco competitivo) He usado chartjs (a diferencia de otras respuestas) porque el OP quiere una solución de chartjs como está claramente escrito en la pregunta: "using chart.js". Puede haber soluciones mejores que chartjs pero eso es irrelevante.

Answer 2

Puede usar los gráficos D3 js. Es útil para el gráfico de radar. Verifique el siguiente enlace de ejemplo:

////////////////////////////////////////////////////////////// 
        //////////////////////// Set-Up ////////////////////////////// 
        ////////////////////////////////////////////////////////////// 

        var margin = {top: 100, right: 100, bottom: 100, left: 100},
            width = Math.min(700, window.innerWidth - 10) - margin.left - margin.right,
            height = Math.min(width, window.innerHeight - margin.top - margin.bottom - 20);

        ////////////////////////////////////////////////////////////// 
        ////////////////////////// Data ////////////////////////////// 
        ////////////////////////////////////////////////////////////// 

        var data = [
                  [//Yourchart values
                    {axis:"",value:0.052},
                    {axis:"",value:0.052},
                    {axis:"",value:0.012},
                    {axis:"",value:0.012},
                    {axis:"",value:0.022},
                    {axis:"",value:0.052},
                    {axis:"",value:0.052},
                    {axis:"",value:0.021}           
                  ]
                ];
        ////////////////////////////////////////////////////////////// 
        //////////////////// Draw the Chart ////////////////////////// 
        ////////////////////////////////////////////////////////////// 

        var color = d3.scale.ordinal()
            .range(["#6cbb69","#CC333F","#00A0B0"]);

        var radarChartOptions = {
          w: 500,
          h: 300,

          maxValue: 0.15,
          levels: 5,
          roundStrokes: true,
          color: color
        };
        //Call function to draw the Radar chart
        RadarChart(".radarChart", data, radarChartOptions);

https://codepen.io/Nighamza/pen/bKmjGE