const cases = document.querySelector('coronovirus-input'); const deaths = document.querySelector('deaths-input'); const recovered =document.querySelector('recovered-input'); const ctx = document.getElementById('mychart').getContext("2d"); let mychart = new CharacterData(ctx , { type:'pie', data: { labels : ['Active Cases','Deaths','Recovered'], datasets : [ { label:'# of votes', data : [0,0,0], backgroundColor:['#2adece','#dd3b79','#ff766b'], borderWidth:1 } ] } }); const updateChartValue = (input, dataOrder) => { input.addEventListener ('change', e => { mychart.data.datasets[0].data[DataOrder] = e.target.value; mychart.update(); }); }; updateChartValue(cases,0); updateChartValue(deaths,1); updateChartValue(recovered,2);Hola chicos, no puedo resolver este problema... quiero hacer un gráfico circular pero no puedo. Soy novato para compartir cualquier publicación en este sitio web. Lo siento si cometí algún error. Este error .
Veo varios problemas en el código que publicaste, pero lo más notable es que el constructor para inicializar mychart debería ser el new Chart() en lugar del new CharacterData() (¿posible error tipográfico debido a la finalización automática en tu editor?).
En segundo lugar, tenga en cuenta que los selectores de identificadores de elementos deben tener el prefijo #.
Finalmente, updateChartValue muestra una discrepancia en el caso del argumento dataOrder y dónde se usa ('D' mayúscula).
Ver solución aquí https://codepen.io/beezital/pen/zYEmKRG
const cases = document.querySelector('#coronovirus-input'); const deaths = document.querySelector('#deaths-input'); const recovered =document.querySelector('#recovered-input'); const ctx = document.getElementById('mychart').getContext("2d"); let mychart = new Chart(ctx , { type:'pie', data: { labels : ['Active Cases','Deaths','Recovered'], datasets : [ { label:'# of votes', data : [10,20,30], backgroundColor:['#2adece','#dd3b79','#ff766b'], borderWidth:1 } ] } }); const updateChartValue = (input, dataOrder) => { input.addEventListener ('change', e => { mychart.data.datasets[0].data[dataOrder] = e.target.value; mychart.update(); }); }; updateChartValue(cases,0); updateChartValue(deaths,1); updateChartValue(recovered,2);