Многообразные линии / серии данных о файле JSON с Chart.js

Я увидел какие-то примеры в нескольких линиях в графике и сделал какие-то круговые графики и легких брусков файлов JSON в Chart.js.

В настоящее время, бруски и круговые легкие графики такие:

$(document).ready(function(){
        var chartColors =   {
            red: 'rgba(255, 99, 132, 1)',
            blue: 'rgba(54, 162, 235, 1)',
            yellow: 'rgba(255, 205, 86, 1)',
            green: 'rgba(75, 192, 192, 1)',
            purple: 'rgba(153, 102, 255, 1)',
            orange: 'rgba(255, 159, 64, 1)',
            darkgrey: 'rgba(102, 102, 102, 1)',
            maroon: 'rgba(200, 112, 91, 1)',
            khaki: 'rgba(190, 204, 200, 1)'
                             };

            $.ajax({ 
                url:'../graficas/contAvance.php',
                method: "GET",
                success: function(response){
                console.log(response);
                data = JSON.parse(response);
                var nombre = [];
                var porcentaje = [];
                var curso = [];

                for (var i in data){
                    nombre.push(data[i].nombre+" "+data[i].ap_p);
                    porcentaje.push(data[i].porcentaje);
                    curso.push(data[i].curso_nombre); 
                                    }

                var ctx2 = document.getElementById("chart2").getContext('2d');
                var myChart2 = new Chart(ctx2,{
                    type: 'horizontalBar',
                    data: 
                    {
                        labels: nombre,
                        datasets: [
                            {
                                label: 'Porcentaje %:',
                                backgroundColor: 
                                [
                                    chartColors.red,
                                    chartColors.blue,
                                    chartColors.yellow,
                                    chartColors.green,
                                    chartColors.purple,
                                    chartColors.orange,
                                    chartColors.darkgrey,
                                    chartColors.maroon,
                                    chartColors.khaki

                                ],
                                borderWidth: 1,
                                data: porcentaje
                                }
                                ]
                    },

                    options:{
                        responsive: true,


                        legend: {
                            display: false
                                },

                        scales: {
                            xAxes: [{
                                gridLines: {
                                    display: false
                                       }
                                    }],

                            yAxes:  [{
                               gridLines: {
                                    display: false
                                          },

                            ticks: {
                                beginAtZero:true,

                                   }
                                    }]
                                }
                            }
                            });

                        },
                    error: function() {
                            alert("Hay problemas al cargar la gráfica!");
                        }

                  });                       
            });

Но я не могу представлять, как инициализировать или форматировать мои файлы JSON для нескольких линий. Я нуждаюсь в том, чтобы иметь несколько файлов JSON, один для каждой линии? Если это так: как он бы это загрузил в моем canvas?

Или я могу форматировать мой файл JSON таким образом что он может использовать только файл для нескольких линий? Я увидел этот пример: https://codepen.io/k3no/pen/pbYGVa, но я все еще не уверен от как получать JSON и несколько объединенных линий

Мои данные (JSON encode) такие и то, что он показал бы в графике, было бы именем студента больше курс и процентное содержание продвижения:

[{
   "curso_id":"4",
   "curso_nombre":"Test",
   "nombre":"Estudiante",
   "ap_p":"A_P",
   "usuario_id":"2",
   "total_temas":"7",
   "temas_vistos":"3",
   "porcentaje":"42.8571"},

 {
     "curso_id":"5",
     "curso_nombre":"Excel",
     "nombre":"Estudiante",
     "ap_p":"A_P",
     "usuario_id":"2",
     "total_temas":"2",
     "temas_vistos":"2",
     "porcentaje":"100.0000"},

{
     "curso_id":"4",
     "curso_nombre":"Test",
     "nombre":"Estudiante No. 2",
     "ap_p":"AP",
     "usuario_id":"3",
     "total_temas":"7",
     "temas_vistos":"6",
     "porcentaje":"85.7143"}

]

0
задан 06.11.2019, 00:14
1 ответ

Ты можешь загружать файл JSON (Посредством неудара в лунку file например) и однажды загруженный создавать регулярное выражение, чтобы отделять каждый lГ-nea файла. DespuГ©s делить каждый lГ-nea на 3 части ("parte1" ":" "parte3") и использовать parte1 и parte3 , чтобы создавать таблицу.

 function crearTabla(contenidoJSON){
                //Creamos un array por cada linea del fichero JS
                var lineas=[];

                //Creamos una expresion regular que nos divida cada linea deseada del fichero.
                var patron = /".+":".+"/gmi;
                //Añadimos cada coincidencia al array de lineas:
                lineas = contenidoJSON.match(patron);                

                //Recorremos el array:
                for(var i =0;i<lineas.length;i++){
                    //Creamos una expresion regular para seprar cada elemento del array en 3 partes por cada linea.
                    var patron1 = /(".+")(:)(".+")/;
                    var linea = lineas[i].match(patron1);

                    //Cada linea está formada por "elemtno" ":" "valor"
                    var primerElemento = linea[1];
                    var segundoElemento = linea[3];

                    console.log(primerElemento + segundoElemento);

                    //Una vez aqui podrias crear la tabla utilizando cada elemento.                                
                }

Однажды в этой точке tendrГЎs отдельные элементы, и не надо иметь файл JSON из-за каждый lГ-nea, так как ты имеешь каждый lГ-nea в array, и потом отделенная в 3 частях, что podrГЎs использовать в твою целесообразность, чтобы создавать таблицу.

, выполнив фрагмент предыдущего кода, podrГ, - чтобы видеть из-за консоли вывод, serГ - во что-то похожее на следующее:

"curso_id""4"
"curso_nombre""Test"
"nombre""Estudiante"
"ap_p""A_P"
"usuario_id""2"
"total_temas""7"
"temas_vistos""3"
"porcentaje""42.8571"
"curso_id""5"
"curso_nombre""Excel"
"nombre""Estudiante"
"ap_p""A_P"
"usuario_id""2"
"total_temas""2"
"temas_vistos""2"
"porcentaje""100.0000"
"curso_id""4"
"curso_nombre""Test"
"nombre""Estudiante No.2"
"ap_p""AP"
"usuario_id""3"
"total_temas""7"
"temas_vistos""6"
"porcentaje""85.7143"

С каждым из этих strings podrГ-схвати создавать подмостки без необходимости иметь файл JSON из-за lГ-nea.

1
ответ дан 01.12.2019, 12:37
  • 1
    Спасибо, intentaré делать это. –  Enrique E. Molina 07.11.2019, 16:26
  • 2
    Если ответ помог тебе, не забывай пометить ее с зеленым tick. @EnriqueE.Molina –  Deivid_41 07.11.2019, 22:00