Chart.js实现堆叠柱状图按数值排序的方法

Chart.js目前没有内置配置项（比如直接通过datasets属性或特定排序属性）实现每个标签（年份）对应的堆叠柱子按数值排序的需求，需要通过预处理数据来达成目标。

实现思路 #

核心逻辑是针对每个年份，将对应的数据点按数值降序（或升序）排序，再重新构建数据集，确保每个年份的堆叠层级匹配排序后的顺序：

1. 提取每个年份的所有数据条目，包含标签、数值、背景色等信息
2. 对每个年份的条目按数值排序
3. 重新组织datasets，让每个数据集的对应年份数据匹配排序后的层级

代码实现 #

以下是基于你提供的数据的具体处理示例：

// 原始数据
const originalData = {
  labels: ['2017', '2018', '2019', '2020', '2021', '2022'],
  datasets: [
    { label: 'Max', data: [0, 0, 50, 10, 0, 70], backgroundColor: 'red' },
    { label: 'Peter', data: [10, 0, 20, 30, 0, 0], backgroundColor: 'blue' },
    { label: 'Dave', data: [0, 0, 10, 20, 0, 30], backgroundColor: 'black' },
  ]
};

// 预处理数据函数
function sortStackedData(original) {
  const { labels, datasets } = original;
  // 为每个年份整理所有数据点
  const yearData = labels.map((_, index) => {
    return datasets.map(ds => ({
      label: ds.label,
      value: ds.data[index],
      backgroundColor: ds.backgroundColor
    })).filter(item => item.value > 0) // 可选：过滤0值，避免空堆叠占位
      .sort((a, b) => b.value - a.value); // 降序排序，小数值在下方
  });

  // 重新构建datasets：按排序后的层级分配数据
  const sortedDatasets = (yearData[0] || []).map((_, stackIndex) => {
    const data = yearData.map(yearItems => yearItems[stackIndex]?.value || 0);
    const label = yearData[0][stackIndex]?.label || '';
    const backgroundColor = yearData[0][stackIndex]?.backgroundColor || '';
    return { label, data, backgroundColor };
  });

  return { labels, datasets: sortedDatasets };
}

// 使用处理后的数据初始化图表
const sortedData = sortStackedData(originalData);
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
  type: 'bar',
  data: sortedData,
  options: {
    responsive: true,
    scales: {
      y: { stacked: true },
      x: { stacked: true }
    }
  }
});

说明 #

• 上述代码会针对每个年份的非零数据按数值降序排序，确保堆叠柱子从大到小排列（比如2019年红色在上、蓝色中间、黑色在下；2020年蓝色在上、黑色中间、红色在下）
• 若需要升序排序，只需将排序函数改为(a, b) => a.value - b.value
• 过滤0值的步骤是可选的，若保留0值，排序后空数据会被放在堆叠底部

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