Chart.js环形图标签颜色异常、点击无法隐藏关联数据问题咨询

问题根源 #

两个异常均由Chart.js环形图的默认逻辑与你的配置不匹配导致：

• 环形图默认图例按单个数据集的每个数据项生成，你配置了4个数据集，每个数据集仅指定了1种背景色，所有自动生成的图例默认取首个颜色，因此出现颜色一致的问题。
• 图例默认点击行为是隐藏单个数据切片，而非隐藏整个数据集，因此点击后无法隐藏对应分类的全部数据。

解决方案 #

修改Chart配置中的options.plugins.legend项，自定义图例生成逻辑和点击事件即可，修改后的完整JS代码如下：

const data = {
  days: [
    0, 0, 0, 0, 123, 0, 0, 45, 0, 0, 0, 43, 0, 123, 0, 0, 43, 0, 0, 0, 0, 43, 0,
    0, 0, 43, 0, 0, 0, 0, 32, 0, 0, 0, 54, 0, 0, 0, 232, 32, 0, 212, 0, 0, 43,
    0, 23, 0, 0, 0, 12, 0,
  ],
  seconds: [
    52.2909, 26.4449, 16.7054, 8.7704, 3.5397, 2.7876, 6.7211, 2.8077, 0.7437,
    1.0504, 1.6137, 0.6969, 0.5165, 0.4017, 0.239, 0.2001, 0.1516, 0.0348,
    0.0443, 0.0286, 0.0217, 0.0181, 0.0122, 0.0131, 0.0031, 0.0065, 16686.9304,
    12610.8165, 49872.3664, 21321.155, 33705.2063, 54887.3542, 32077.976,
    17994.7266, 15847.4785, 24065.34, 7971.773, 3930.3123, 3294.6206, 1925.8107,
    2113.6292, 2353.2807, 448.5209, 1307.2341, 343.6484, 567.8189, 405.3052,
    79.4946, 212.0314, 81.9343, 100.1345, 61.209,
  ],
  weeks: [
    0, 0, 0, 0, 0, 213, 0, 43, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 40, 0, 0, 0, 60, 0,
    0, 0, 0, 100, 0, 0, 0, 0, 0, 0, 65, 0, 0, 78, 0, 0, 90, 0, 0, 0, 12, 0, 0,
    43, 0, 0, 0, 0,
  ],
  minutes: [
    5613.5638, 4018.1524, 2782.8912, 2223.0685, 859.3159, 1092.8524, 6106.947,
    2236.1713, 811.9827, 1642.5207, 5930.5772, 2876.2958, 3231.4032, 3190.6772,
    2563.7517, 4262.5525, 4031.1007, 682.8778, 2327.1964, 2100.0363, 2425.7081,
    2369.4146, 3155.9515, 2829.6594, 918.8314, 3467.2555, 3559.1161, 1466.975,
    4802.0379, 1910.0191, 2593.348, 4772.5789, 2503.5062, 1633.5984, 1994.0311,
    5839.1324, 2152.2181, 902.1712, 1233.78, 1399.3437, 2307.5043, 3974.9305,
    942.2388, 4584.5575, 1802.5456, 4606.8556, 5108.2835, 1111.4571, 5088.5189,
    2394.1285, 4773.9491, 3483.375,
  ],
};

const ctx = document.getElementById("myChart");
let myChart = new Chart(ctx, {
  type: "doughnut",
  data: {
    labels: Object.keys(data),
    datasets: [
      {
        label: "days",
        data: data.days,
        backgroundColor: "rgba(255, 99, 132)",
        hoverOffset: 4,
      },
      {
        label: "seconds",
        data: data.seconds,
        backgroundColor: "rgba(255, 206, 86)",
        hoverOffset: 4,
      },
      {
        label: "weeks",
        data: data.weeks,
        backgroundColor: "rgba(54, 162, 235)",
        hoverOffset: 4,
      },
      {
        label: "minutes",
        data: data.minutes,
        backgroundColor: "rgba(75, 192, 192)",
        hoverOffset: 4,
      },
    ],
  },
  options: {
    maintainAspectRatio: false,
    scales: {
      y: {
        display: false,
      },
    },
    // 新增图例配置
    plugins: {
      legend: {
        labels: {
          // 自定义生成数据集级别的图例
          generateLabels: (chart) => {
            return chart.data.datasets.map((dataset, index) => ({
              text: dataset.label,
              fillStyle: dataset.backgroundColor,
              strokeStyle: dataset.backgroundColor,
              datasetIndex: index,
              hidden: chart.getDatasetMeta(index).hidden
            }))
          }
        },
        // 自定义点击事件，切换整个数据集显隐
        onClick: (e, legendItem, legend) => {
          const chart = legend.chart;
          const meta = chart.getDatasetMeta(legendItem.datasetIndex);
          meta.hidden = meta.hidden === null ? true : null;
          chart.update();
        }
      }
    }
  },
});

如果你需要的是单环形图，每个切片对应一个分类的总和，可提前对每个数组求和，仅保留1个数据集即可，无需自定义图例逻辑。

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