Chart.js 堆叠条根据值排序

Question

我有一个堆积条，但我想根据我的两个数据集的总和值对这些条进行排序。有没有人知道如何使用 chart.js 功能来做到这一点？

见here

data: {
        labels: stores,
        datasets: [
        {
            label: 'Rev',
            data: dataPack1,
                        backgroundColor: "rgba(55, 160, 225, 0.7)",
                        hoverBackgroundColor: "rgba(55, 160, 225, 0.7)",
                        hoverBorderWidth: 2,
                        hoverBorderColor: 'lightgrey'
        },
        {
            label: 'Tax1',
            data: dataPack2,
                        backgroundColor: "rgba(225, 58, 55, 0.7)",
                        hoverBackgroundColor: "rgba(225, 58, 55, 0.7)",
                        hoverBorderWidth: 2,
                        hoverBorderColor: 'lightgrey'
        },
        ]
    },

Answer 1

这可以使用以下图表插件更有效地实现：

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),
            sorted = data_store.map(e => e.sum).sort((a, b) => b - a);
      sorted.forEach((n, ni) => {
         data_store.forEach(d => {
            if (d.sum === n) {
               chart.data.labels[ni] = d.label;
               d.data.forEach((v, vi) => {
                  chart.data.datasets[vi].data[ni] = v;
               });
            }
         });
      });
   }
});

^{* 在脚本的开头添加此插件。}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ⧩

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),
          sorted = data_store.map(e => e.sum).sort((a, b) => b - a);
      sorted.forEach((n, ni) => {
         data_store.forEach(d => {
            if (d.sum === n) {
               chart.data.labels[ni] = d.label;
               d.data.forEach((v, vi) => {
                  chart.data.datasets[vi].data[ni] = v;
               });
            }
         });
      });
   }
});

var numberWithCommas = function(x) {
   return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
};

var dataPack1 = [21000, 22000, 26000, 35000, 55000, 55000, 56000, 59000, 60000];
var dataPack2 = [1000, 1200, 1300, 140000, 1060, 2030, 2070, 4000, 4100];
var stores = ["A", "B", "C", "D", "E", "F", "G", "H", "I"];

var bar_ctx = document.getElementById('bar-chart');
var bar_chart = new Chart(bar_ctx, {
   type: 'bar',
   data: {
      labels: stores,
      datasets: [{
         label: 'Rev',
         data: dataPack1,
         backgroundColor: "rgba(55, 160, 225, 0.7)",
         hoverBackgroundColor: "rgba(55, 160, 225, 0.7)",
         hoverBorderWidth: 2,
         hoverBorderColor: 'lightgrey'
      }, {
         label: 'Tax1',
         data: dataPack2,
         backgroundColor: "rgba(225, 58, 55, 0.7)",
         hoverBackgroundColor: "rgba(225, 58, 55, 0.7)",
         hoverBorderWidth: 2,
         hoverBorderColor: 'lightgrey'
      }]
   },
   options: {
      animation: {
         duration: 10,
      },
      tooltips: {
         mode: 'label',
         callbacks: {
            label: function(tooltipItem, data) {
               return data.datasets[tooltipItem.datasetIndex].label + ": " + numberWithCommas(tooltipItem.yLabel);
            }
         }
      },
      scales: {
         xAxes: [{
            stacked: true,
            gridLines: {
               display: false
            },
         }],
         yAxes: [{
            stacked: true,
            ticks: {
               callback: function(value) {
                  return numberWithCommas(value);
               },
            },
         }],
      },
      legend: {
         display: true
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script>
<canvas id="bar-chart" width="600" height="350"></canvas>

Answer 2

如果您遇到多个堆叠条具有相同总和的情况，则另一个答案将重复标签。

这不会重复标签：

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