如何在Chart.js图表打印时隐藏未选中的图例标签？

问题出在你的图例生成逻辑上——当前代码只是把未选中的标签改成灰色，但没有从图例列表中移除它们，所以打印时这些标签依然会被渲染。以下是具体修复步骤：

1. 修改generateLabels过滤不可见数据集 #

直接在图例标签生成阶段，只返回当前可见的数据集对应的标签，这样未选中的标签根本不会被渲染，自然不会出现在打印预览里：

generateLabels: function(chart) {
  const original = Chart.defaults.plugins.legend.labels.generateLabels;
  let labelsOriginal = original.call(this, chart);

  // 过滤掉不可见的数据集标签
  labelsOriginal = labelsOriginal.filter(label => {
    return chart.isDatasetVisible(label.datasetIndex);
  });

  // 保留颜色标记逻辑
  labelsOriginal.forEach(label => {
    label.fillStyle = 'green';
  });

  return labelsOriginal;
}

2. 简化图例点击逻辑（避免状态不同步） #

你自己维护的visibleDatasets_{{ unique_id }}数组容易和Chart.js内置的数据集可见状态不同步，建议直接依赖框架内置方法：

onClick: function(e, legendItem, legend) {
  const index = legendItem.datasetIndex;
  const ci = legend.chart;
  ci.setDatasetVisibility(index, !ci.isDatasetVisible(index));
  ci.update();
}

3. 完整修改后的图例配置片段 #

legend: {
  display: true,
  labels: {
    usePointStyle: true,
    color: 'black',
    font: {
      family: 'Times New Roman',
      weight: 'bold'
    },
    className: 'chart-label',
    generateLabels: function(chart) {
      const original = Chart.defaults.plugins.legend.labels.generateLabels;
      let labelsOriginal = original.call(this, chart);

      // 过滤不可见数据集的标签
      labelsOriginal = labelsOriginal.filter(label => chart.isDatasetVisible(label.datasetIndex));

      labelsOriginal.forEach(label => {
        label.fillStyle = 'green';
      });

      return labelsOriginal;
    }
  },
  onClick: function(e, legendItem, legend) {
    const index = legendItem.datasetIndex;
    const ci = legend.chart;
    ci.setDatasetVisibility(index, !ci.isDatasetVisible(index));
    ci.update();
  }
}

修改完成后，未选中的数据集标签会直接从图例中移除，打印时只会显示当前选中的标签，彻底解决你的问题。

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