堆叠条形图js从高值到低顺序排列堆叠条形

Question

我有一个使用chartjs的堆积条形图。我想知道如何从高价值到低价值订购堆叠的酒吧。例如下面的堆叠栏

我当前的堆叠条形图看起来像这样

我试图环顾四周，我发现了一些数组很少的示例，但是没有用。我不确定如何重新排列堆叠的条形，标签会与重新排列后的堆叠条相对应。 我正在使用Chart.js v2.9.3 这是我的脚本。数组基本上来自mysqli json。

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

    var bar_chart = new Chart(bar_ctx, {
        type: 'bar',
        data: {
            labels: dates,
            datasets: [
            {
                label: labelel[0],
                data: dataProcessCnt1,
                            backgroundColor: color[0],
                            hoverBackgroundColor: color[0],
                            hoverBorderWidth: 0
            },
            {
                label: labelel[1],
                data: dataProcessCnt2,
                            backgroundColor: color[1],
                            hoverBackgroundColor: color[1],
                            hoverBorderWidth: 0
            },
            {
                label: labelel[2],
                data: dataProcessCnt3,
                            backgroundColor: color[2],
                            hoverBackgroundColor: color[2],
                            hoverBorderWidth: 0
            },
            {
                label: labelel[3],
                data: dataProcessCnt4,
                            backgroundColor: color[3],
                            hoverBackgroundColor: color[3],
                            hoverBorderWidth: 0
            },
            {
                label: labelel[4],
                data: dataProcessCnt5,
                            backgroundColor: color[4],
                            hoverBackgroundColor: color[4],
                            hoverBorderWidth: 0
            },
            {
                label: labelel[5],
                data: dataProcessCnt6,
                            backgroundColor: color[5],
                            hoverBackgroundColor: color[5],
                            hoverBorderWidth: 0
            },
            {
                label: labelel[6],
                data: dataProcessCnt7,
                            backgroundColor: color[6],
                            hoverBackgroundColor: color[6],
                            hoverBorderWidth: 0
            },
            {
                label: labelel[7],
                data: dataProcessCnt8,
                            backgroundColor: color[7],
                            hoverBackgroundColor: color[7],
                            hoverBorderWidth: 0
            },
            {
                label: labelel[8],
                data: dataProcessCnt9,
                            backgroundColor: color[8],
                            hoverBackgroundColor: color[8],
                            hoverBorderWidth: 0
            },
            {
                label: labelel[9],
                data: dataProcessCnt10,
                            backgroundColor: color[9],
                            hoverBackgroundColor: color[9],
                            hoverBorderWidth: 0
            },
            {
                label: labelel[10],
                data: dataProcessCnt11,
                            backgroundColor: color[10],
                            hoverBackgroundColor: color[10],
                            hoverBorderWidth: 0
            },
            {
                label: labelel[11],
                data: dataProcessCnt12,
                            backgroundColor: color[11],
                            hoverBackgroundColor: color[11],
                            hoverBorderWidth: 0
            },
            ]
        },
        options: {
                animation: {
                duration: 10,
            },

            scales: {
                xAxes: [{
                    stacked: true,
                    beginAtZero: true,
                    scaleLabel: {
                        labelString: 'Month'
                    },
                    ticks: {
                        autoSkip: false
                    }
                }],
              yAxes: [{ 
                stacked: true, 
                beginAtZero:true,
                userCallback: function(label, index, labels) {
                     if (Math.floor(label) === label) {
                         return label;
                     }

                 },
                ticks: {
                        callback: function(value) { return numberWithCommas(value); },
                        }, 
                }],
            },
            legend: {display: true}
        } // options
       }
    );