Desde que actualicé ChartJS a 3.5, no puedo adaptar el complemento BeforeDraw correctamente. Intenté buscar en Internet un ejemplo, pero no he visto a nadie que proporcione la actualización de beforeDraw. Pongo mi código abajo y agradecería cualquier guía, ayuda o enlace para solucionar el problema.
Chart.register({ beforeDraw: function(chart,args,options) { if(chart.chart.chart.config.type=='doughnut'){ const width = chart.chart.width; const height = chart.chart.height; const ctx = chart.chart.ctx; var text; ctx.restore(); ctx.clearRect(0, 0, 3000, 3000); fontSize = (height / sizeLabel1).toFixed(2); //250 ctx.fillStyle = colorLabel1; //"#FFFEFE" ctx.font = '400 ' + fontSize * 13 + 'px "Titillium Web"'; text = chart.config.options.elements.center.text1; //"CICLE " + currentCicle + "/" + totalCicles; textX = Math.round((width - ctx.measureText(text).width) / 2); textY = (height / positionLabel1) ; //3.30 ctx.fillText(text, textX, textY); fontSize = (height / sizeLabel2).toFixed(2); //90 ctx.fillStyle = colorLabel2; //"#FFFEFE" ctx.font = 'Bold ' + fontSize * 13 + 'px "Titillium Web"'; text = chart.config.options.elements.center.text2; //"1"+"' "+"30"+"''"; textX = Math.round((width - ctx.measureText(text).width) / 2); textY = (height / positionLabel2) ; //2.70 ctx.fillText(text, textX, textY); fontSize = (height / sizeLabel3).toFixed(2); //150 ctx.fillStyle = colorLabel3; //"#FFFEFE" ctx.font = '100 ' + fontSize * 13 + 'px "Titillium Web"'; text = chart.config.options.elements.center.text3; textX = Math.round((width - ctx.measureText(text).width) / 2); textY = (height / positionLabel3) ; //1.90 ctx.fillText(text, textX, textY); fontSize = (height / sizeLabel4).toFixed(2); //200 ctx.fillStyle = colorLabel4; //"#FFFEFE" ctx.font = '400 ' + fontSize * 13 + 'px "Titillium Web"'; text = chart.config.options.elements.center.text4; textX = Math.round((width - ctx.measureText(text).width) / 2); textY = (height / positionLabel4); //1.50 ctx.fillText(text, textX, textY); ctx.save(); } } });2 cosas principales, los complementos necesitan una identificación. También es posible que desee registrar cada línea o poner puntos de interrupción para ver qué está pasando porque, en realidad, el gráfico ya no contiene una referencia circular a sí mismo.
Entonces, en su primera declaración if, debería ser simplemente: if(chart.config.type === 'doughnut') .
Entonces, básicamente, sus primeras líneas deben cambiarse a esto:
Chart.register({ id: 'customText', beforeDraw: function(chart,args,options) { if(chart.config.type=='doughnut')Esto probablemente solucionará su problema, si no, intente registrar las variables que está utilizando y verifique si aún las llama de la manera correcta.