Soy nuevo en javascript y trato de trazar múltiples gráficos de la longitud del diccionario en javascript usando Canvasjs y matraz . Tengo un diccionario con una lista de tuplas que pasan del matraz a mi plantilla aquí está mi diccionario.
{'923114566780479 (1).xlsx': [('181112949', 1), ('156860', 1), ('3007322293014', 3), ('3007789510214', 2)], 'Copy of 9231645678120167 (1).xlsx': [(383362396260316, 1), ('0310566103033882', 13), ('0315311456791689', 1), ('0315826247894310', 1)]}En este diccionario, tengo dos claves porque he subido dos archivos y ahora quiero dos gráficos, si el usuario subió 5 o 6, entonces quiero 5 o 6 gráficos.
aquí está el código que he probado
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script> <script> {%for key in first%} var myvar = '{{key}}'; console.log(myvar); {%endfor%} </script> <script> window.onload = function () { {% for key in first %} $('#piechart').append('<div id="draw_chart'+myvar+'"></div>'); chart = new CanvasJS.Chart(myvar, { animationEnabled: true, exportEnabled: false, theme: "light1", // "light1", "light2", "dark1", "dark2" backgroundColor: "transparent", data: [{ type: "doughnut", startAngle: 20, //innerRadius: 10, indexLabelFontSize: 17, indexLabelFontColor: "black", indexLabel: "#percent%", toolTipContent: "<b>{label}:</b> {y}", dataPoints: [ {%for b in first[key]%} { y: {{[b][0][1]}}, label: "{{[b][0][0]}}" }, {%endfor%} ] }] }); var container = document.getElementById('draw_chart'+myvar).appendChild(document.createElement('div')); chart.render(); {%endfor%} } </script> <body> <div class="card-body"> <div class="row"> <div class="col-md-6"> <div class="card-body" id="piechart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 90%;"> </div> </div> </div> </div> </body>Cualquier ayuda será apreciada.
Gracias de antemano.
El contenedor de gráficos que está pasando para crear un gráfico no es adecuado. Además, myvar apuntará a la clave del último elemento en su diccionario. Por lo tanto, la identificación del contenedor debe ser id="draw_chart'+{{key}}+'" y debe pasar el mismo valor al crear un gráfico como new CanvasJS.Chart("draw_chart'+'{{key}}', {}) .
Eche un vistazo a este fragmento de código para obtener un código de muestra.
window.onload = function() { var charts = []; { % for key in first % } $('#piechart').append('<div id="draw_chart' + '{{key}}' + '" style="height: 300px;width: 100%;"></div>'); charts.push(new CanvasJS.Chart("draw_chart" + '{{key}}', { animationEnabled: true, exportEnabled: false, theme: "light1", // "light1", "light2", "dark1", "dark2" backgroundColor: "transparent", data: [{ type: "doughnut", startAngle: 20, //innerRadius: 10, indexLabelFontSize: 17, indexLabelFontColor: "black", indexLabel: "#percent%", toolTipContent: "<b>{label}:</b> {y}", dataPoints: [ { % for b in first[key] % } { y: { { [b][0][1] } }, label: "{{[b][0][0]}}" }, { % endfor % } ] }] })); { % endfor % } charts.forEach(chart => chart.render()) }