Traté de dibujar más de dos gráficos con Chart.js en la misma página y creé un div dinámico en un bucle con todos los datos para el gráfico como este:
<div class="col-4"> <canvas class="trend-chart" id="chart{{ p.sNo }}" width="500" height="100" role="img" data-pv="{{ p.recentPageViews }}"> </canvas> </div> El código JavaScript para crear dinámicamente gráficos basados en el nombre de la class :
const labels = [ '22-12-12', '22-12-13', '22-12-14', '22-12-15', '22-12-16', '22-12-17', '22-12-18', '22-12-19', '22-12-20', '22-12-21' ]; const config = { type: 'line', animation: true, options: {} }; var charts = document.getElementsByClassName("trend-chart"); for (var i = 0; i < charts.length; i++) { pv = charts[i].getAttribute('data-pv'); id = charts[i].getAttribute('id'); window['config' + id] = config; window['data' + id] = { labels: labels, datasets: [{ backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: JSON.parse(pv), }] }; window['config' + id]['data'] = window['data' + id]; window['ctx' + id] = document.getElementById(id).getContext('2d'); window['myChart' + id] = new Chart( window['ctx' + id], window['config' + id] ); }Todo funciona bien, excepto la información sobre herramientas cuando paso el mouse sobre los puntos de datos del gráfico. No veo la información sobre herramientas y aparece el siguiente error:
Uncaught TypeError: Cannot read properties of null (reading 'getLabelAndValue') at Eo (chart.js:13) at Ho._createItems (chart.js:13) at Ho.update (chart.js:13) at Ho.handleEvent (chart.js:13) at Object.afterEvent (chart.js:13) at Q (chart.js:13) at Vs._notify (chart.js:13) at Vs.notify (chart.js:13) at hn.notifyPlugins (chart.js:13) at hn._eventHandler (chart.js:13)*Agregue la propiedad de la etiqueta en los conjuntos de datos según el código a continuación.
datasets: [{ label: 'Some text', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: JSON.parse(pv), }]Hola, descubra cómo solucionarlo, el problema principal es que el contexto no se está configurando correctamente, así que me gustó a continuación para solucionarlo.
window.addEventListener('load', function() { var charts = document.getElementsByClassName("trend-chart"); for (var i = 0; i < charts.length; i++) { pv = charts[i].getAttribute('data-pv'); id = charts[i].getAttribute('id'); new Chart( document.getElementById(id).getContext('2d'), { type: 'line', animation: true, data: { labels: JSON.parse(charts[i].getAttribute('data-pvd')), datasets: [{ backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: JSON.parse(pv), }] }, options: {plugins: {......},scales: {......}} } ); }});