Chart.js分组条形图动态分组及分类显隐优化需求问询

首先明确：不建议在同一画布中创建多个共享坐标轴的独立Chart对象。Chart.js的每个实例都是独立管理自身的坐标轴、交互事件与渲染逻辑的，强行共享会导致图例点击、缩放等交互冲突，且坐标轴对齐的维护成本极高，极易出现布局错位问题。

针对你提出的核心需求（隐藏分类时同步移除X轴标签与间隙，同时保留图例交互），基于Chart.js v3+的新特性，已有成熟的实现方案：

核心思路：自定义图例点击事件+动态过滤数据 #

通过维护原始完整数据集，在点击图例时动态过滤出需要显示的分类与数据，重新渲染图表，以此实现隐藏分类时自动清理X轴无效标签与间隙的效果，同时保留图例的交互功能。

具体实现步骤 #

1. 存储原始完整数据：将从数据库获取的所有属性标签、数据组（缺失属性用null填充）保存为全局变量，方便后续过滤使用。
2. 自定义图例点击逻辑：替换默认的图例显示/隐藏行为，改为：
   • 切换对应数据组的启用状态
   • 过滤出所有启用的数据组，同时提取这些数据组中存在有效数据的属性标签
   • 用过滤后的标签与数据更新图表
3. 启用skipNull配置：确保初始渲染时，空值对应的位置不会生成细条形。

代码示例 #

// 原始完整数据集（从数据库获取后整理）
const originalData = {
  labels: ['属性A', '属性B', '属性C', '属性D'],
  datasets: [
    {
      label: '组1',
      data: [10, null, 20, 15],
      backgroundColor: '#FF6384',
      enabled: true // 自定义标记：是否启用该数据组
    },
    {
      label: '组2',
      data: [null, 25, 18, null],
      backgroundColor: '#36A2EB',
      enabled: true
    }
  ]
};

// 初始化图表
const ctx = document.getElementById('barChart').getContext('2d');
const barChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: [...originalData.labels],
    datasets: [...originalData.datasets]
  },
  options: {
    responsive: true,
    scales: {
      x: {
        skipNull: true // 跳过空值，避免生成细条形
      }
    },
    legend: {
      onClick: function(e, legendItem) {
        // 切换对应数据组的启用状态
        const targetDataset = originalData.datasets[legendItem.datasetIndex];
        targetDataset.enabled = !targetDataset.enabled;

        // 过滤出所有启用的数据组
        const activeDatasets = originalData.datasets.filter(d => d.enabled);
        // 筛选出至少有一个启用数据组存在有效数据的属性标签
        const activeLabels = originalData.labels.filter((label, idx) => {
          return activeDatasets.some(d => d.data[idx] !== null);
        });

        // 构造新的数据集：仅保留activeLabels对应的数据
        const updatedDatasets = activeDatasets.map(d => {
          return {
            ...d,
            data: activeLabels.map(label => {
              const labelIdx = originalData.labels.indexOf(label);
              return d.data[labelIdx];
            })
          };
        });

        // 更新图表
        barChart.data.labels = activeLabels;
        barChart.data.datasets = updatedDatasets;
        barChart.update('default'); // 带动画更新，也可传'none'关闭动画
      }
    }
  }
});

方案优势 #

• 完全保留图例点击的交互功能，隐藏数据组时自动清理X轴无效标签与间隙
• 相比七年前的Chart.js版本，v3+的API灵活性足够支持这种自定义逻辑，无需依赖hack方案
• 数据更新逻辑清晰，维护成本低，可轻松扩展多数据组、多属性的场景

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