laravel 如何在chart.js中从高到低对数据进行排序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52785769/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I sort data from highest to lowest in chart.js
提问by Christian Gallarmin
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
我在如何使用chart.js 将数据从高到低排序方面遇到了一些问题？我正在使用 laravel 并使用 chart.js 来显示我的数据，但是我不知道如何进行操作将我的最高值排序为 chart.js 中的最低值（数据）
My code
我的代码
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
}
}
}
});
My Output
我的输出
My Expected Output
我的预期输出
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
根据图片，我想要我的总数就像那样并且值为{{$array_non_200_pages[0] }}现在问题是我需要对以下数据进行排序以使其从最高到最低。我怎样才能做到这一点？有人可以帮助我或指导我解决问题的最佳方法吗？对不起，我的英语不好。非常感谢
采纳答案by Aagam Jain
Here is how you can merge and sort data and labels together.
first sort them then assign newArrayDatato data property and newArrayLabelto labels property of your config object.
以下是将数据和标签合并和排序的方法。首先对它们进行排序，然后分配newArrayData给newArrayLabel配置对象的数据属性和标签属性。
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);