如何对 Chart.js 中的工具提示值进行排序

Question

如何在 Chart.js

中对工具提示值进行排序

我使用 itemSort，但它不起作用，而且我在 Console.log 中没有看到任何日志，我不知道为什么。

我检查了其他主题，但没有找到解决问题的好答案。

我的 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
                },
              },
            }
          },
    });

Answer 1

当我用 tooltip 替换 tooltips 时，它似乎起作用了。 show stopper 可能是 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>

如何对 Chart.js 中的工具提示值进行排序

how to sort tooltip value in Chart.js

javascript

charts

chart.js