Chart.js 多数据集图例过滤问题解析

问题背景

在使用 Chart.js 创建多数据集的环形图(doughnut chart)时，开发者可能会遇到图例(legend)过滤功能仅对第一个数据集生效的问题。这种情况通常发生在将不同类型的数据(如男性和女性数据)分散在多个数据集中的场景。

问题现象

当开发者尝试为环形图配置多个数据集时，点击图例进行数据过滤时，发现只有第一个数据集能够被正确过滤，而其他数据集不受影响。这会导致图表显示不完整，无法实现预期的交互效果。

根本原因

这个问题的根源在于数据集的配置方式。在原始实现中，开发者将两种不同类型的数据(男性和女性)分别放在两个独立的数据集中，但图例过滤机制默认只关联到第一个数据集。

解决方案

要解决这个问题，需要对数据集进行规范化处理，将不同类型的数据组织在同一个数据集中，但使用不同的索引位置：

1. 将男性数据放在索引0的位置
2. 将女性数据放在索引1的位置

这种组织方式使得图例能够正确识别并过滤所有数据集，实现完整的交互功能。

实现建议

在实际开发中，建议采用以下数据结构：

data: {
  labels: ['Red', 'Blue', 'Yellow'],
  datasets: [
    {
      label: 'Male',
      data: [10, 20, 30],
      backgroundColor: ['red', 'blue', 'yellow']
    },
    {
      label: 'Female',
      data: [15, 25, 35],
      backgroundColor: ['pink', 'lightblue', 'lightyellow']
    }
  ]
}

这种结构确保了图例能够正确关联到每个数据集，实现完整的过滤功能。

总结

Chart.js 的图例过滤功能依赖于数据集的正确组织。当遇到过滤不完整的问题时，开发者应该检查数据集的配置方式，确保不同类型的数据被合理地组织在数据集中。通过规范化数据结构，可以确保图例交互功能的完整实现。