Question

关于如何使用chart.js将数据从高到低排序存在一些问题？我当时使用laravel，并使用chart.js来显示我的数据，但是我不知道如何在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] }}。现在的问题是，我需要对以下数据进行排序以使其从最高到最低。我怎样才能做到这一点？有没有人可以帮助我或指导我解决问题的最佳方法？对不起，我的英语不好。非常感谢

Answer 1

这是将数据和标签合并在一起并对其进行排序的方法。首先对它们进行排序，然后将newArrayData分配给配置对象的data属性，并将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);

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

1 个答案: