Chart.js数据集自动排序咨询：是否有动态排序插件？

核心结论 #

没有现成的Chart.js插件能直接实现这种「根据当前显示的数据集自动调整标签排序」的功能，必须手动编写排序逻辑来实现需求。

实现思路 #

通过监听图表的图例点击事件，每次切换数据集的显示/隐藏状态后：

1. 筛选出当前处于显示状态的数据集
2. 计算每个标签对应的数值总和（单个数据集显示时直接取对应值）
3. 按数值降序重新排列标签及所有数据集的对应数据
4. 更新图表并重新渲染

完整代码实现 #

// 定义排序逻辑函数
function sortChartByVisibleData(chart) {
  // 获取当前未隐藏的数据集
  const visibleDatasets = chart.data.datasets.filter(ds => !ds._meta[0].hidden);
  
  // 计算每个标签对应的总数值
  const labelValuePairs = chart.data.labels.map((label, index) => {
    const totalValue = visibleDatasets.reduce((sum, dataset) => sum + dataset.data[index], 0);
    return { label, totalValue, originalIndex: index };
  });
  
  // 按数值降序排序
  labelValuePairs.sort((a, b) => b.totalValue - a.totalValue);
  
  // 重新生成排序后的标签和数据集数据
  const sortedLabels = labelValuePairs.map(item => item.label);
  const sortedDatasets = chart.data.datasets.map(dataset => ({
    ...dataset,
    data: labelValuePairs.map(item => dataset.data[item.originalIndex])
  }));
  
  // 更新图表数据并重新渲染
  chart.data.labels = sortedLabels;
  chart.data.datasets = sortedDatasets;
  chart.update();
}

// 初始化图表
const ctx = document.getElementById('bar-chart')
var chart = new Chart(ctx, {
    type: 'bar',
  options: {
    responsive: true,
    scales: {
      y: {
        stacked: true
      },
      x: {
        stacked: true
      }
    },
    plugins: {
      legend: {
        // 重载图例点击事件
        onClick: function(e, legendItem) {
          // 执行默认的显示/隐藏操作
          Chart.defaults.plugins.legend.onClick.call(this, e, legendItem);
          // 触发排序逻辑
          sortChartByVisibleData(chart);
        }
      }
    }
  },
  data: {
    labels: ['A','B','C'],
    datasets: [{
      label: 'Year 2020',
      data: [10,20,25],
      backgroundColor: '#ff0000'
    },{
      label: 'Year 2021',
      data: [15,15,10],
      backgroundColor: '#00ff00'
    },{
      label: 'Year 2022',
      data: [30,5,25],
      backgroundColor: '#0000ff'
    }]
  }
})

// 页面加载完成后执行初始排序（所有数据集显示时的排序）
sortChartByVisibleData(chart);

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id='bar-chart'></canvas>

效果验证 #

• 所有数据集显示时：计算每个标签的总和（C:25+10+25=60，A:10+15+30=55，B:20+15+5=40），排序后标签顺序为 C、A、B
• 仅显示Year 2020数据集时：按单个数据集数值排序（C:25，B:20，A:10），标签顺序为 C、B、A

内容的提问来源于stack exchange，提问作者Stefano Radaelli