Estoy usando chart.js para hacer un gráfico simple. No hay problema para producir el gráfico, pero ahora he agregado una función de eliminación de datos según la documentación , pero recibo un error de tipo. Supongo que es porque estoy accediendo incorrectamente a los datos.
El error es el siguiente, y vincularé un archivo de violín JS para que pueda ver todo sin que yo lo descargue en una pared de texto.
"main.js: 49 TypeError no detectado: no se pueden leer las propiedades de undefined (leyendo 'etiquetas')"
Tengo entendido que este error tiende a aparecer debido a problemas de alcance, pero he definido los datos globalmente para que la función pueda acceder a ellos. También pensé que tal vez estaba accediendo mal ya que tiene algunas matrices anidadas, así que probé btn.onclick = removeData(chart[0]); para acceder al primer elemento en el objeto del gráfico (la variable de datos), pero eso produjo un error similar al anterior, pero cambió 'datos' por 'etiquetas'. ¡Gracias por cualquier ayuda/entrada!
Primero, no puso el gráfico en una variable, por lo que no tenía forma de hacer nada con él. Segunda parte, no pasaste la función al onclick sino que la ejecutaste y pusiste el resultado en el onClick.
La forma en que se describe en los documentos solo funciona si pasa una variable de gráfico a la función y no lo hace con un botón.
También está utilizando una versión muy desactualizada de chart.js con sintaxis para la última. Debe actualizar su versión o usar los documentos V2
var data = { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"], datasets: [ { label: "Dataset #1", backgroundColor: "rgba(255,99,132,0.2)", borderColor: "rgba(255,99,132,1)", borderWidth: 2, hoverBackgroundColor: "rgba(255,99,132,0.4)", hoverBorderColor: "rgba(255,99,132,1)", data: [65, 59, 20, 81, 56, 55, 40], }, ], }; var options = { maintainAspectRatio: false, }; const chart = new Chart("chart", { type: "pie", options: options, data: data, }); function removeData() { chart.data.labels.pop(); chart.data.datasets.forEach((dataset) => { dataset.data.pop(); }); chart.update(); } let btn = document.createElement("button"); btn.innerHTML = "Remove data"; btn.onclick = removeData; document.body.appendChild(btn); body { background: #1d1f20; padding: 16px; } canvas { border: 1px dotted red; } .chart-container { position: relative; margin: auto; height: 80vh; width: 80vw; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Chart.js tutorial</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="chart-container"> <canvas id="chart"></canvas> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script> </body> </html>