Estoy siguiendo un tutorial de Youtube en chart.js ( https://www.youtube.com/watch?v=sE08f4iuOhA 9:05 punto de error en mi código) cuando miran su página web con el gráfico que aparece sin errores, sin embargo, cuando intento recrear esto, me encuentro con "Error de tipo no detectado: el gráfico no es un constructor". No estoy seguro de dónde me equivoqué aquí.
Intenté cambiar var a let, agregar dimensiones en la etiqueta del lienzo y revertir la versión de Chart.js a una versión más baja, posiblemente más estable, como lo recomendaron muchas publicaciones del foro, pero fue en vano. me está llevando a creer que es un error pasado por alto en mi código. Cual es la siguiente:
<!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"> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <title>Graph</title> </head> <body> <div class="container"> <canvas id="myChart" width="600" height="600"></canvas> </div> <script> let Chart = document.getElementById('myChart').getContext('2d'); let line = new Chart(myChart, { type:'line', data:{ labels:[], datasets:[ 1, 2, 3, 4, 5, 99, ], }, options:{} }); </script> </body> </html> Este es el segundo tutorial en el que me encontré con este problema, estaba siguiendo la guía de introducción de chart.js pero mi gráfico no aparecía (asumiendo el mismo problema o similar, no pensé en la depuración f12 (vergonzosamente hasta los segundos vez que tuve el problema), así que pasé a un video tutorial solo para encontrarme con que mi gráfico no volvía a aparecer. Estoy tratando de aprender a usar gráficos de esta manera para un proyecto en la escuela y comienza a ser muy frustrante.
Estoy ejecutando esto en Flask Server en una Raspberry Pi.
¡Espero que alguien pueda darme una idea de lo que estoy haciendo mal (soy muy nuevo en la creación de páginas web)!
¡Salud!
Hay un conflicto de nombres en su código. Definió una variable Chart , que también es el nombre de la clase principal de Chart.js. Podría cambiar el nombre de su variable a ctx , por ejemplo.
Además, data.labels debe tener la misma cantidad de entradas que data.datasets.data . Además, tenga en cuenta que data.datasets es una matriz de objetos. Información adicional está disponible aquí .
new Chart('myChart', { type: 'line', data: { labels: ['A', 'B', 'C', 'D', 'E', 'F'], datasets: [{ data: [1, 2, 3, 4, 5, 99] }] } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script> <canvas id="myChart"></canvas>