Chart.js 动画仅在悬停时触发？

erikthered65

我试图在 animation.onComplete 中执行一个新动画。效果是第二个动画仅在图表悬停时开始。是否可以让它独立于悬停启动？

Chart.plugins.register({
   beforeUpdate: function (chart) {
       if (chart.options.sort) {

           let dataArray = chart.data.datasets[0].data;
           let dataIndexes = dataArray.map((d, i) => i);
           dataIndexes.sort((a, b) => {
                return dataArray[b] - dataArray[a]; 
           });

           dataArray.sort((a, b) => b - a); 

           let meta = chart.getDatasetMeta(0);
           let newMeta = [];
           let labels = chart.data.labels;
           let newLabels = [];
           let newColors = [];

           meta.data.forEach((bar, i) => {
                let newIndex = dataIndexes.indexOf(i);
                newMeta[newIndex] = bar;
                newLabels[newIndex] = chart.data.labels[i];
                newColors[newIndex] = chart.data.datasets[0].backgroundColor[i];
           });

           meta.data = newMeta;
           chart.data.labels = newLabels;
           chart.data.datasets[0].backgroundColor = newColors;

         }
     }                  
});

chart = JSON.parse(url); //url is a text loaded from DB containing chart defaults

chart.options.animation = new Object();
chart.options.animation.onComplete = function (animation) {
    this.options.animation.onComplete = null; //disable after first render
    this.options.sort = true;
    this.update();
    this.options.sort = false; 
}

var ctx = $("#myChart");
var myChart = new Chart(ctx, chart);

erikthered65

最后我解决了一个解决方法..使用 Window setTimeout() 方法：

 var ctx = $("#myChart");
var myChart = new Chart(ctx, chart);

function AlertFunc (chart) {
    chart.options.sort = true;
    chart.update();
    chart.options.sort = false;  
}

window.setTimeout(function () { AlertFunc(myChart); }, 2000)

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。