【问题标题】:How to sort stacked bar chart on certain value of bar in charts.js如何在charts.js中对某个条形值的堆积条形图进行排序
【发布时间】:2020-04-13 08:04:05
【问题描述】:

我使用了我在这里找到的关于堆栈溢出的脚本来对堆积条形图进行排序。唯一的问题是堆叠的条形图按总条形图的总和排序。我一直在努力使用下面的脚本,但找不到一种方法来根据堆栈的一个值而不是堆积条的总和对堆积条进行排序。这是我正在使用的代码:

Chart.plugins.register({    
    id:"p2",                                                                                                                                                         
    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;                                                                                                                                                                  
    },                                                                                                                                                                               
    beforeUpdate(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;                                                                                                                                 
            });                                                                                                                                                                      
        });                                                                                                                                                                          
    }                                                                                                                                                                                
});   

【问题讨论】:

标签: javascript chart.js


【解决方案1】:

排序函数当前使用求和:

.sort((a,b) => b.sum - a.sum)

所以用你想要排序的数据替换它:

.sort((a,b) => b.data[i] - a.data[i])

i 是您想要的行。

【讨论】:

  • 做到了。感谢您的帮助!
  • 还有一个问题。当我现在尝试对堆积条进行排序时,它可以工作,但是当我再次尝试对其进行排序时,我得到:“未捕获的类型错误:无法读取未定义的属性‘数据’”。有什么想法吗?提前谢谢。
猜你喜欢
  • 2018-12-21
  • 1970-01-01
  • 2018-09-30
  • 2021-10-10
  • 2020-06-04
  • 1970-01-01
  • 1970-01-01
  • 2014-10-02
  • 1970-01-01
相关资源
最近更新 更多