• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

297
Vistas
No se puede crear un gráfico usando Chart.JS @ 2.9.4

Estoy tratando de crear un gráfico usando Chart.JS (v2.9.4) pero no puedo. Aquí está el HTML relevante

 <canvas id="groupPerformanceChart" class="lineClass" width="340" height="220" style="margin-top: 2px; height: 220px; width: 340px;" ></canvas>

y aquí está el JS relevante

 var ctx = $("#groupPerformanceChart"); if (!ctx) { console.log("Context not available"); return } else { console.log("Context available", ctx) } let myChart = new Chart(ctx, { type: "line", data: { labels: currLabels, datasets: dataSet, }, options: { responsive: true, scales: { yAxes: [ { ticks: { beginAtZero: true, max: 10, }, }, ], }, }, });

y esto es lo que dice en la consola:

 Context available jQuery.fn.init {context: document, selector: '#groupPerformanceChart'} Failed to create chart: can't acquire context from the given item

Curiosamente, el gráfico aparece a veces si activo HMR en el entorno de desarrollo, pero obviamente esto no funcionará para la producción. También tengo otros gráficos en otros lugares que se crean de la misma manera y funcionan bien, así que este me tiene perplejo.

about 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Lo más probable es que tenga el gráfico dentro de una plantilla, lo que hace que no se represente en el momento en que ejecuta el selector de jQuery y construye el gráfico.

jQuery siempre devolverá un valor incluso si no se han encontrado objetos. Entonces su cheque siempre dirá que se ha encontrado un contexto. Para solucionar esto, debe verificar la length del resultado de jQuery:

 var ctx = $("#groupPerformanceChart"); if (ctx.length <= 0) { console.log("Context not available"); return; } else { console.log("Context available", ctx) }
about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda