Блог

как отсортировать значение всплывающей подсказки в Chart.js

Я использую itemSort, но он не работает, и я не вижу никакого журнала в своей консоли.лог , я не знаю почему.

Я проверил другие темы, но не нашел хороших ответов, чтобы решить свою проблему.

мой Chart.js конфигурация-это:

 var bCtx = document.getElementById('bChart');
        
var data = {
          labels: ['a','b','c'],
          datasets: [{
           label: 'test',
           data: [10,19,5]
          },{
           label: 'test',
           data: [9,17,3]
          },{
           label: 'test',
           data: [15,18,4]
          }]
        };

        var bChart = new Chart(bCtx, {
        type: 'line',
        data: data,
        options: {
            responsive: true,
            interaction: {
              mode: 'index',
              intersect: false,
            },
            stacked: false,
            plugins: {
              tooltip: {
                      itemSort: function(a, b) {
                         console.log(a);// dont work
                         return b.raw - a.raw;
                      }
              },
              title: {
                display: false,
              }
            },
            scales: {
              y: {
                type: 'linear',
                display: true,
                position: 'left',
              },
              y1: {
                type: 'linear',
                display: true,
                position: 'right',
        
                // grid line settings
                grid: {
                  drawOnChartArea: false, // only want the grid lines for one axis to show up
                },
              },
            }
          },
    });
 

Кажется, это работает, когда я заменяю tooltips на tooltip . Стопор шоу может быть console.log(a) тем, что пытается зарегистрировать действительно большой объект, попробуйте a.raw вместо этого войти.

 var bCtx = document.getElementById('bChart');

var data = {
  labels: ['a', 'b', 'c'],
  datasets: [{
    label: 'test',
    data: [10, 19, 5]
  }, {
    label: 'test',
    data: [9, 17, 3]
  }, {
    label: 'test',
    data: [15, 18, 4]
  }]
};

var bChart = new Chart(bCtx, {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    interaction: {
      mode: 'index',
      intersect: false,
    },
    stacked: false,
    plugins: {
      tooltip: {
        itemSort: function(a, b) {
          return b.raw - a.raw;
        }
      },
      title: {
        display: false,
      }
    },
    scales: {
      y: {
        type: 'linear',
        display: true,
        position: 'left',
      },
      y1: {
        type: 'linear',
        display: true,
        position: 'right',
        grid: {
          drawOnChartArea: false, 
        }
      }
    }
  },
}); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.min.js"></script>
<canvas id="bChart"></canvas>