如何在chart.js中从最高到最低对数据进行排序

2022-01-22 00:00:00 charts javascript laravel chart.js

关于如何使用 chart.js 将数据从高到低排序，我遇到了一些问题?我正在使用 laravel 并使用 chart.js 来显示我的数据，但是我不知道如何进行操作以将我的最高值排序为 chart.js 中的最低值(数据)

I'm having some sort of problems regarding on how to sort your data highest to lowest using chart.js? I was using laravel and I used chart.js to display my data, However I don't have any idea how to make an operation to sort my highest value to lowest value (data) in chart.js

我的代码

var ctx_1 = document.getElementById('non_200_pages').getContext('2d');
var myChart_1 = new Chart(ctx_1, {
type: 'horizontalBar',
data: {
    labels: ["Total","301 Redirect","Broken Pages (4xx Errors)","Uncategorised HTTP Response Codes","5xx Errors","Unauthorised Pages","Non-301 Redirects"],
    datasets: [{

        data: [ {{ $array_non_200_pages[0] }}, {{ $array_non_200_pages[1] }}, {{ $array_non_200_pages[2] }}, {{ $array_non_200_pages[3] }}, {{ $array_non_200_pages[4] }}, {{ $array_non_200_pages[5] }}, {{ $array_non_200_pages[6]}} ],
        backgroundColor: [ 
            'rgba(237, 56, 98, 1.0)',
            'rgba(237, 56, 98, 1.0)',
            'rgba(237, 56, 98, 1.0)',
            'rgba(237, 56, 98, 1.0)',
            'rgba(237, 56, 98, 1.0)',
            'rgba(237, 56, 98, 1.0)',
            'rgba(237, 56, 98, 1.0)'
        ]

    }]
},
options: {
    showAllTooltips: true,
    tooltips: {
          enabled: true,
          displayColors: false,
          yPadding: 20,
          xPadding: 30,
          caretSize: 10,
          backgroundColor: 'rgba(240, 240, 240, 1)',
          bodyFontSize: 16,
          bodyFontColor: 'rgb(50, 50, 50)',
          borderColor: 'rgba(0,0,0,1)',
          borderWidth: 1,
          cornerRadius: 0,
          yAlign: 'bottom',
          xAlign: 'center',
          position: 'custom',
          custom: function(tooltip) {
            if (!tooltip) return;
            // disable displaying the color box;
            tooltip.displayColors = false;
          },
          callbacks: {
            // use label callback to return the desired label
            label: function(tooltipItem, data) {
              return tooltipItem.yLabel + " : " + tooltipItem.xLabel ;
            },
            // remove title
            title: function(tooltipItem, data) {
              return;
            }
        }
    },
    responsive: false,
    legend: { display: false },
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true,
            },
            gridLines: {
                display: false
            },
        }],
        xAxes: [{
            ticks: {
                stepSize:5,
                display: false
            },
            gridLines: {
                drawBorder: false,
            }
        }],
    },
    plugins: {
        datalabels: {
    align: 'end',
    anchor: 'end',        
    backgroundColor: function(context) {
      return context.dataset.backgroundColor;
    },
    borderRadius: 4,
    color: 'white',
    formatter: Math.round
  }
}
}
});

我的输出

我的预期输出

根据图片，我想要我的总数，并且值为 {{$array_non_200_pages[0] }} 现在的问题是我需要对以下数据进行排序以使其最高到最低.我怎样才能做到这一点?有没有人可以帮助我或指导我解决问题的最佳方法?对不起，我的英语不好.非常感谢

Base on the picture I want my total just like that and have a value of {{$array_non_200_pages[0] }} Now the problem is I need to sort the following data to make it highest to lowest. How can I do that? Is there someone can help me or guide me the best way to resolve my problem? Sorry for my bad English. Thank you so much

推荐答案

以下是如何将数据和标签合并和排序.首先对它们进行排序，然后将 newArrayData 分配给数据属性，将 newArrayLabel 分配给配置对象的标签属性.

Here is how you can merge and sort data and labels together. first sort them then assign newArrayData to data property and newArrayLabel to labels property of your config object.

arrayLabel = ["Total", "301 Redirect", "Broken Pages (4xx Errors)", "Uncategorised HTTP Response Codes", "5xx Errors", "Unauthorised Pages", "Non-301 Redirects"]

arrayData = [16, 1, 14, 0, 0, 0, 1];

arrayOfObj = arrayLabel.map(function(d, i) {
  return {
    label: d,
    data: arrayData[i] || 0
  };
});

sortedArrayOfObj = arrayOfObj.sort(function(a, b) {
  return b.data>a.data;
});

newArrayLabel = [];
newArrayData = [];
sortedArrayOfObj.forEach(function(d){
  newArrayLabel.push(d.label);
  newArrayData.push(d.data);
});

console.log(newArrayLabel);
console.log(newArrayData);

相关文章