Chart.js实现单日期3条重叠柱状图的可行性咨询

完全可以用Chart.js实现你的需求，不需要更换其他图表库。默认的order属性确实是针对整个数据集生效的，没法单独控制单根柱子的层级，但可以通过自定义插件动态调整每根柱子的z-index，实现数值小的柱子在上方、数值大的在下方的效果，具体步骤如下：

1. 配置柱子重叠基础样式 #

先关闭x轴的堆叠设置，同时调整categoryPercentage和barPercentage让同一x轴位置的柱子重叠：

options: {
  scales: {
    x: {
      stacked: false, // 关闭堆叠，让柱子在同一位置重叠
      categoryPercentage: 0.8, // 控制柱子组占x轴分类宽度的比例
      barPercentage: 0.8 // 控制单根柱子占组宽度的比例，两个值都小于1就能让柱子重叠
    }
  }
}

2. 自定义插件动态设置单根柱子的z-index #

通过Chart.js的插件系统，在绘制前遍历所有柱子，根据同一日期下的数值大小调整z-index——数值越小，z-index越高，确保不会被大数值的柱子完全覆盖：

const zIndexControlPlugin = {
  beforeDraw: (chart) => {
    // 遍历每个数据集
    chart.data.datasets.forEach((dataset, dsIndex) => {
      const datasetMeta = chart.getDatasetMeta(dsIndex);
      // 遍历当前数据集的每根柱子
      datasetMeta.data.forEach((bar, barIndex) => {
        // 获取当前柱子的数值
        const currentValue = dataset.data[barIndex];
        // 收集同一日期下所有柱子的数值
        const allValuesInDate = chart.data.datasets.map(ds => ds.data[barIndex]);
        // 把数值从小到大排序，计算当前数值的排名
        const sortedValues = [...allValuesInDate].sort((a, b) => a - b);
        const rank = sortedValues.indexOf(currentValue);
        // 排名越靠前（数值越小），z-index越高，确保上层显示
        bar._model.z = allValuesInDate.length - rank;
      });
    });
  }
};

3. 初始化图表时注册插件 #

把自定义插件加入图表配置，就能生效：

const myChart = new Chart(document.getElementById('myChart'), {
  type: 'bar',
  plugins: [zIndexControlPlugin], // 注册插件
  data: {
    labels: ['2024-05-01', '2024-05-02', '2024-05-03'],
    datasets: [
      {
        label: '数据集1',
        data: [12, 28, 18],
        backgroundColor: 'rgba(255, 99, 132, 0.7)'
      },
      {
        label: '数据集2',
        data: [18, 22, 25],
        backgroundColor: 'rgba(54, 162, 235, 0.7)'
      },
      {
        label: '数据集3',
        data: [9, 30, 21],
        backgroundColor: 'rgba(255, 206, 86, 0.7)'
      }
    ]
  },
  options: {
    scales: {
      x: {
        stacked: false,
        categoryPercentage: 0.8,
        barPercentage: 0.8
      }
    }
  }
});

额外优化提示 #

如果希望小数值的柱子更突出，可以给不同数据集设置不同的borderWidth或者调整backgroundColor的透明度，让下层的大柱子也能隐约可见。

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