Chart.js使用更新功能后未根据插件重新排序行

Question

我正在页面上显示堆积的条形图。初始化表时，我对数据进行排序，以便在每个数据集中按总数的降序显示。

为此，我正在使用自定义插件

Chart.plugins.register({                                                                                                                                                             
    datasets: [],                                                                                                                                                                    
    getData(labels, datasets) {                                                                                                                                                      
        const sum = [];                                                                                                                                                              
        for (i = 0; i < datasets[0].length; i++) {                                                                                                                                   
            sum.push({                                                                                                                                                               
                label: labels[i],                                                                                                                                                    
                data: datasets.map(e => e[i]),                                                                                                                                       
                    get sum() { // ES6 - getter                                                                                                                                      
                        return this.data.reduce((a, b) => a + b);                                                                                                                    
                    }                                                                                                                                                                
            });                                                                                                                                                                      
        }                                                                                                                                                                            
        return sum;                                                                                                                                                                  
    },                                                                                                                                                                               
    beforeInit(chart) {                                                                                                                                                              
        chart.data.datasets.forEach((dataset, datasetIndex) => {                                                                                                                     
            this.datasets.push(dataset.data);                                                                                                                                        
        });                                                                                                                                                                          
        const data_store = this.getData(chart.data.labels, this.datasets).sort((a,b) => b.sum - a.sum);                                                                              

        data_store.forEach((d,i) => {                                                                                                                                                
            chart.data.labels[i] = d.label;                                                                                                                                          
            d.data.forEach((v, vi) => {                                                                                                                                              
                chart.data.datasets[vi].data[i] = v;                                                                                                                                 
            });                                                                                                                                                                      
        });                                                                                                                                                                          
    }                                                                                                                                                                                
});   

现在，每60秒我运行一些AJAX来获取更新的数据以刷新图表。

setInterval(function() {

    $.get("ajax?type=chart_update&id={{ @GET.id }}", function(data){
        var data = JSON.parse(data);

        data.datasets.forEach(function(value, key) {
            chart_data.datasets[key].data = value.data;
        });
        chart_data.labels = data.labels;

        myChart.update();
    });

}, 60000);

但是，当我运行更新功能时，数据不再排序。我尝试在插件中使用不同的钩子，而不是使用beforeInit，beforeUpdate和beforeRender之类的beforeDraw，但是这些没有什么区别，使图表呈现异常，或者出现错误] >

未捕获的TypeError：无法读取未定义的属性'data'

更新后如何重新排序数据？

我正在页面上显示堆积的条形图。初始化表时，我对数据进行排序，以便在每个数据集中按总数的降序显示。为此，我使用的是自定义插件...

Answer 1

排序非常复杂，因为您不能简单地更改数据，还需要知道标签的顺序。您可以在JSBin中找到我的代码。希望这就是您想要的。