创建后为Chart.js附加onAnimationComplete

Question

我正在创建一个Blazor组件作为ChartJs的外观。我在微软论坛上提出了一个问题，想了解如何为组件调用JavaScript函数。

我的问题是如何在创建之前向图表添加一些事件。因此，我从Blazor页面传递一个名为config的模型，该模型包含图表的所有配置。

然后，我在JavaScript中创建图表，如

var ctx = document.getElementById(id).getContext('2d');
var chart = new Chart(ctx, eval(config));

现在，我想添加一个事件并向Blazor发送一个事件。例如，我为事件onHover添加了以下代码，它可以工作。

chart.options.onHover = function () {
DotNet.invokeMethodAsync('PSC.Blazor.Components.Chartjs', 'ChartHover');
}

与onClick是工作太。

chart.options.onClick = function (event, array) {
var rtn = 0;
if (array !== undefined && array.length > 0)
rtn = array[0].index;
DotNet.invokeMethodAsync('PSC.Blazor.Components.Chartjs', 'ChartClick', rtn);
};

现在，我想对onAnimationComplete做同样的事情。

chart.onAnimationComplete = window["AnimationComplete1"];

在这种情况下，函数没有被调用。如果我写这段代码

chart.onAnimationComplete = function () {
console.log('onAnimationComplete animation completed');
};

如何修复代码?

Answer 1

没有可以在图表上直接配置的onAnimationComplete事件。这必须在选项中完成，就像你对onHover所做的那样，名称必须不同:

chart.options.animation.onComplete = function () {}