Question

我最近开始将 Chartjs 库专门用于雷达图，但我有一个疑问。

我正在处理来自在谷歌表单中进行的调查并导出到 Excel 的数据，我已经对其进行了处理和过滤以获得我将要使用的相关数据，这些数据是问题及其答案，这些数据是多个选择（3 个独特的答案，可以是“1、2 或 3”“A、B、C”等）如图 1 所示。

我的问题是，库如何显示属于同一属性的数据？（如图 2 所示），我需要做的是根据每个答案中的数据量来增加圆圈的大小。

基本上我想要的是能够控制圆圈的大小但不知道可以在调查中生成多少数据，我不知道如何解决这个问题，我可以看到图书馆显然已经这样做了在图 2 中，它显示了，有没有如何查看图书馆在哪里执行此操作？并通过此访问每个贡品的数据以解决 n 个问题。

image1.survey exported to Excel

image2.photo of the graph with data 3

image3.photo of the graph with data 1

在 excel 的第一行，它说 P1 P2 P3 和 P4 将对应于问题，在它们各自的列中对应于答案。（la底漆 columna no es de mi interes asi qeu la Pretty con splice() ）。

图 2 显示“dato: 3”中有 3 个数据。

和图 3 显示“dato: 1”中有 2 个数据。

（如果我们看到 excel 我们可以验证这是真的）。

这个想法是“dato：3”的圆圈比“dato：1”的圆圈大，只是我不清楚我该怎么做这部分，因为如果我做一个循环答案，我如何识别相同问题的答案？

是否可以访问库执行的函数或方法来确定属于特定属性的数据，如图像 2 和图像 3 所示？并以此修改圆的半径？

$(document).ready(function(){                
$.ajax({
    //Importar archivos como CSV cambiar para que la persona seleccione el archivo correspondiente
    url: 'RespuestasC.csv',
    dataType: "text",
    contentType: "charset-utf-8"
}).done(grafica);

    function grafica(data) 
    {       
            /* recibe los datos del excel y los muestra en consola*/
            //console.log(data);
            //quitar saltos de linea
            var datos= data.split(/\r?\n|\r/); /* pone los datos del excel en un lista*/
            
           
            
            var datosPreguntas = [];
            var Preguntas =[];
            var DatosPorColumna = [];
            var TodasLasRespuestas = [];

            //CICLO PARA SACAR PREGUNTAS CON I=0 TRAE LA PREGUNTA  
            for(var i=0; i < datos.length-1 ;i++){
                
                var datosSinComas= datos[i].split(';');
                var SinMarca = datosSinComas.splice(1);//Para que comienze a mostrar datos apartir del valor 1 en el arreglo ya que el primero es una marca que no nos sirve
                

                Preguntas.push(SinMarca);
                
            
        }

            //CICLO PARA SACAR PREGUNTAS CON I=0 TRAE LA PREGUNTA Y SUS RESPUESTAS CON I=1 SOLO LAS RESPUESTAS 
            for(var i=1; i < datos.length-1 ;i++){
                
                var datosSinComas= datos[i].split(';');
                var SinMarca = datosSinComas.splice(1);

                datosPreguntas.push(SinMarca);
            
        }

      
      
        for(var i=1; i < datos.length-1 ;i++){
                
            var datosSinComas= datos[i].split(';');
            var SinMarca = datosSinComas.splice(1).shift();
            DatosPorColumna.push(SinMarca);
      
            }

            // datosPreguntas es un arreglo bidimensional, con lo cual si queremos leer cada uno de los datos, toca convertirlo en unidimensional de la siguiente manera
            function ConvertirArreglo2D_en_1D (){
                for(var i = 0; i < datosPreguntas.length; i++)
                {
                    TodasLasRespuestas = TodasLasRespuestas.concat(datosPreguntas[i]);
                }
            }


            //console.log(datos.length);//
            // console.log("Preguntas: "+Preguntas[0]);
            // console.log("Respuestas: "+datosPreguntas);
            // console.log("Tamaño: "+datosPreguntas.length);
            // console.log("Respuestas: "+DatosPorColumna);

        ConvertirArreglo2D_en_1D(TodasLasRespuestas);


                                //Configuracion de la grafica
                    var config = {
                        type: 'radar',
                        data: {

                            labels: Preguntas[0] ,
          
                            datasets: [{

                                label: 'Dato',
                                borderColor: "rgba(0, 0, 255, 0)",
                                backgroundColor: "rgba(0, 0, 255, 0)",
                                pointBackgroundColor: "rgba(255, 255,255, 0)", 
                                
                               
                    
                                radius: 10,
                                borderWidth:2,
                                pointBorderColor: "rgba(255, 0, 0, 1)",
                                pointHoverRadius:20,
                                pointHoverBackgroundColor: "rgba(255, 0, 0, 0.2)" ,

                                //AL ENVIAR UN DATA SET QUE TIENE UNA POSICION +1 DE LOS LABEL, ESE NUEVO DATO COMIENZA EN EL PRIMER LABEL (pregunta)
                                data: TodasLasRespuestas
                            },]
                        },
                        options: {
                            responsive: true,
                            title: {
                                display: true,
                                text: 'Anillos de frecuencia'
                            },

                            scale: {
                                ticks: {
                                    beginAtZero: true,
                                    maxTicksLimit:3,
                                    display:false
                                }
                            }
                        }

                        
                    };
                        
                            window.myRadar = new Chart(document.getElementById('canvas'), config);
                        
                        var colorNames = Object.keys(window.chartColors);    
                    }   

            });

雷达图如何在 chartjs 中工作

0 个答案: