0
155
ViewsMostrar datos usando kendoChart
Me pregunto por qué no puedo mostrar mi consulta de resultados usando kendoChart. cuando probé esto
series: [{ type: "pie", data: [{ category: "Available", value: 24 }] }],¡Funciona!
pero cuando traté de poner el resultado de mi consulta (vea la imagen a continuación)
series: [{ type: "pie", data: [{ category: status, value: counts }] }],sin visualización de registro
mi código actual:
<script> const createChart = async () =>{ const { status, counts } = await getConditions(); console.log(status, counts) $("#chart1").kendoChart({ title: { text: "All Books" }, legend: { position: "top" }, seriesDefaults: { labels: { template: "#= category # - #= kendo.format('{0:P}', percentage)#", position: "outsideEnd", visible: true, background: "transparent" } }, series: [{ type: "pie", data: [{ category: status, value: counts }] }], tooltip: { visible: true, template: "#= category # - #= kendo.format('{0:P}', percentage) #" } }); } $(document).ready(()=>{ createChart(); }); </script>los datos de resultados de console.log (estado, recuentos)
·
Juan Pablo Isaza
1 answers
Answer question0
Como status y los counts son matrices, deberá convertirlo en una matriz de objetos (con campos de category y value ) que Kendo pueda entender. Vea el ejemplo a continuación y pruébelo en Telerik DOJO.
<!DOCTYPE html> <html> <head> <base href="https://demos.telerik.com/kendo-ui/pie-charts/index"> <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> <title></title> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.default-main.min.css" /> <script src="https://kendo.cdn.telerik.com/2022.1.301/js/jquery.min.js"></script> <script src="https://kendo.cdn.telerik.com/2022.1.301/js/kendo.all.min.js"></script> </head> <body> <div id="chart1"> </div> <script> const createChart = async () =>{ //const { status, counts } = await getConditions(); //console.log(status, counts) // better ensure that status and counts are of the same length! let status = ["Not Available", "Not Available", "Not Available", "Not Available", "Available", "Available", "Available"]; let counts = [7, 7, 7, 7, 7, 7, 7]; let data = []; for (let a = 0; a < status.length; a++) { data.push({ category: status[a], value: counts[a] }); } $("#chart1").kendoChart({ title: { text: "All Books" }, legend: { position: "top" }, seriesDefaults: { labels: { template: "#= category # - #= kendo.format('{0:P}', percentage)#", position: "outsideEnd", visible: true, background: "transparent" } }, series: [{ type: "pie", data: data, }], tooltip: { visible: true, template: "#= category # - #= kendo.format('{0:P}', percentage) #" } }); } $(document).ready(()=>{ createChart(); }); </script> </div> </body> </html>
·
Juan Pablo Isaza
Report
Answer question