如何为Chart.js所有LegendItem设置hidden:true？图表仍显示求助

你直接在generateLabels里设置LegendItem的hidden属性，只会修改图例的视觉状态，不会真正隐藏对应的数据集。要让图表内容也隐藏，得从核心逻辑入手调整：

• 直接修改数据集的hidden属性
  这是最直接的方式，如果你希望所有数据集默认隐藏，在定义datasets的时候给每个数据集加上hidden: true：

  const datasets = [
    {
      label: '数据集1',
      data: [1, 2, 3],
      hidden: true, // 标记该数据集默认隐藏
      backgroundColor: '#FF6384',
      borderColor: '#FF6384'
    },
    {
      label: '数据集2',
      data: [4, 5, 6],
      hidden: true,
      backgroundColor: '#36A2EB',
      borderColor: '#36A2EB'
    }
    // 更多数据集...
  ];
  

• 通过配置统一同步状态
  如果要在options里统一处理，需要先批量设置数据集的hidden状态，再让图例项与数据集状态保持一致（同时补充图例样式所需的属性，避免显示异常）：

  // 批量设置所有数据集为隐藏状态
  datasets.forEach(dataset => {
    dataset.hidden = true;
  });
  
  const options = {
    responsive: true,
    plugins: {
      legend: {
        display: datasets.length > 1,
        labels: {
          generateLabels: (chart) => {
            return datasets.map((dataset, i) => {
              return {
                text: dataset.label,
                hidden: dataset.hidden, // 与数据集状态同步
                fillStyle: chart.data.datasets[i].backgroundColor,
                strokeStyle: chart.data.datasets[i].borderColor,
                lineWidth: chart.data.datasets[i].borderWidth
              };
            })
          }
        }
      },
      annotation: {
        annotations: []
      }
    },
    scale: {
      ticks: {
        precision: 0
      }
    }
  };
  

本质原因是：Chart.js的图例项hidden只是反映数据集的隐藏状态，修改图例项的hidden不会反向同步到数据集。只有直接修改数据集的hidden属性，图表才会真正隐藏对应的内容。

内容的提问来源于stack exchange，提问作者Jo Hö