Considere el siguiente código.
var chartData = { labels: ["January", "February", "March", "April", "May", "June"], datasets: [{ fillColor: "#79D1CF", strokeColor: "#79D1CF", data: [60, 80, 81, 56, 55, 40] }] }; var ctx = document.getElementById("myChart1").getContext("2d"); var myLine = new Chart(ctx, { type: "line", data: chartData, showTooltips: false, onAnimationComplete: function() { var ctx = this.chart.ctx; ctx.font = this.scale.font; ctx.fillStyle = this.scale.textColor ctx.textAlign = "center"; ctx.textBaseline = "bottom"; this.datasets.forEach(function(dataset) { dataset.points.forEach(function(points) { ctx.fillText(points.value, points.x, points.y - 10); }); }) } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script> <canvas id="myChart1" height="300" width="500"></canvas> Debido a que uso la función en onAnimationComplete en diferentes gráficos, me gusta crear un archivo JavaScript donde recopilo todas las funciones y las uso. Por ejemplo
var chart = new Chart(ctx, eval(config)); chart.options.animation.onComplete = function () { window["AnimationComplete1"](chart); } function AnimationComplete1(chart) { var ctx = chart.ctx; ctx.textAlign = "center"; ctx.textBaseline = "bottom"; chart.data.datasets.forEach(function (dataset) { dataset.points.forEach(function (points) { ctx.fillText(points.value, points.x, points.y - 10); }); }) } En este código, el problema es que en la función no tengo acceso al point desde el conjunto de dataset de chart.data.datasets . Además, no tengo acceso a la scale de font y textColor .
¿Hay alguna forma de acceder a esos valores desde una función común?
La función de devolución de llamada Chart.js la animación onComplete debe definirse dentro de las options del gráfico.
options: { animation: { onComplete: ctx => { // do your stuff } } }Eche un vistazo a su código modificado a continuación y vea cómo funciona.
var chartData = { labels: ["January", "February", "March", "April", "May", "June"], datasets: [{ fillColor: "#79D1CF", strokeColor: "#79D1CF", data: [60, 80, 81, 56, 55, 40] }] }; new Chart('myChart1', { type: "line", data: chartData, options: { animation: { onComplete: ctx => { console.log(ctx.chart.data.datasets); console.log(ctx.chart.options.scales.x); } } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script> <canvas id="myChart1" height="300" width="500"></canvas>