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 itemCuriosamente, 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.
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) }