• <i id='RsG6D'><tr id='RsG6D'><dt id='RsG6D'><q id='RsG6D'><span id='RsG6D'><b id='RsG6D'><form id='RsG6D'><ins id='RsG6D'></ins><ul id='RsG6D'></ul><sub id='RsG6D'></sub></form><legend id='RsG6D'></legend><bdo id='RsG6D'><pre id='RsG6D'><center id='RsG6D'></center></pre></bdo></b><th id='RsG6D'></th></span></q></dt></tr></i><div id='RsG6D'><tfoot id='RsG6D'></tfoot><dl id='RsG6D'><fieldset id='RsG6D'></fieldset></dl></div>

      <bdo id='RsG6D'></bdo><ul id='RsG6D'></ul>

    <small id='RsG6D'></small><noframes id='RsG6D'>

    1. <tfoot id='RsG6D'></tfoot>

      <legend id='RsG6D'><style id='RsG6D'><dir id='RsG6D'><q id='RsG6D'></q></dir></style></legend>
      1. 如何在chart.js中从最高到最低对数据进行排序

        时间:2023-11-01

          1. <small id='LTiwh'></small><noframes id='LTiwh'>

              <legend id='LTiwh'><style id='LTiwh'><dir id='LTiwh'><q id='LTiwh'></q></dir></style></legend>

            • <tfoot id='LTiwh'></tfoot>
                  <tbody id='LTiwh'></tbody>
                  <bdo id='LTiwh'></bdo><ul id='LTiwh'></ul>
                • <i id='LTiwh'><tr id='LTiwh'><dt id='LTiwh'><q id='LTiwh'><span id='LTiwh'><b id='LTiwh'><form id='LTiwh'><ins id='LTiwh'></ins><ul id='LTiwh'></ul><sub id='LTiwh'></sub></form><legend id='LTiwh'></legend><bdo id='LTiwh'><pre id='LTiwh'><center id='LTiwh'></center></pre></bdo></b><th id='LTiwh'></th></span></q></dt></tr></i><div id='LTiwh'><tfoot id='LTiwh'></tfoot><dl id='LTiwh'><fieldset id='LTiwh'></fieldset></dl></div>
                • 本文介绍了如何在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);

                  这篇关于如何在chart.js中从最高到最低对数据进行排序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

                  上一篇:隐藏分组堆积条形图中的空条 - chart.js 下一篇:如何在chartjs中悬停时呈现垂直线

                  相关文章

                • <small id='kmFuq'></small><noframes id='kmFuq'>

                  <tfoot id='kmFuq'></tfoot>
                    <bdo id='kmFuq'></bdo><ul id='kmFuq'></ul>
                  <i id='kmFuq'><tr id='kmFuq'><dt id='kmFuq'><q id='kmFuq'><span id='kmFuq'><b id='kmFuq'><form id='kmFuq'><ins id='kmFuq'></ins><ul id='kmFuq'></ul><sub id='kmFuq'></sub></form><legend id='kmFuq'></legend><bdo id='kmFuq'><pre id='kmFuq'><center id='kmFuq'></center></pre></bdo></b><th id='kmFuq'></th></span></q></dt></tr></i><div id='kmFuq'><tfoot id='kmFuq'></tfoot><dl id='kmFuq'><fieldset id='kmFuq'></fieldset></dl></div>
                  <legend id='kmFuq'><style id='kmFuq'><dir id='kmFuq'><q id='kmFuq'></q></dir></style></legend>