如何使用 ChartJs 访问函数中的所有数据？

Question

考虑以下代码。

 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>

因为我在不同的图表中使用onAnimationComplete中的函数，所以我喜欢创建一个 JavaScript 文件，在其中收集所有函数并使用它们。 例如

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);
        });
    })
}

在这段代码中，问题是在函数中我无法访问来自chart.data.datasets的dataset的point 。 另外，我无法访问font和textColor的scale 。

有没有办法从一个通用函数中访问这些值？

Answer 1

Chart.js动画onComplete回调函数必须在图表options中定义。

options: {
  animation: {
    onComplete: ctx => {
      // do your stuff
    }
  }
}

请在下面查看您修改后的代码，看看它是如何工作的。

 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>