如何在react-chartjs-2中同步控制同标签折线与散点图的显隐

核心思路是重写Chart.js的图例点击事件，让点击标签时自动同步所有同标签数据集的显隐状态，具体实现如下：

步骤1：自定义图例点击回调 #

在渲染Scatter组件时，通过options配置legend.onClick，替换默认的单数据集切换逻辑：

<Scatter
  data={chart4Data}
  options={{
    legend: {
      onClick: function(e, legendItem) {
        // 获取当前点击的标签文本
        const targetLabel = legendItem.text;
        // 遍历所有数据集，找到同标签的并同步切换显隐
        this.chart.data.datasets.forEach(dataset => {
          if (dataset.label === targetLabel) {
            dataset.hidden = !dataset.hidden;
          }
        });
        // 强制更新图表状态
        this.chart.update();
      }
    }
  }}
/>

步骤2：整合到你的代码中 #

把上述配置加入到你的图表组件里，完整代码示例如下：

import { Scatter } from 'react-chartjs-2';
import { useState, useEffect } from 'react';

function YourChartComponent() {
  const [chart4Data, setChart4Data] = useState({});

  useEffect(() => {
    createChart4();
  }, []);

  function createChart4() {
    let result = Object.assign([], resultScatter);
    let result2 = Object.assign([], resultData);
    let columns = Object.keys(resultScatter[0]).filter(el => el !== "Y");
    const colors = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#17becf",
                    "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22"];
    let x = [];
    for (let i = 0; i < columns.length; i++) {
      x[i] = result.map((data) => data[columns[i]]);
    }
    let y = result.map((data) => data.Y);
    let scatterData = { datasets: [] };

    for (let i = 0; i < columns.length; i++) {
      let color = colors[i];
      let label = columns[i];
      let lines = result2.filter(el => el.FACTOR_CD === transLangKey(columns[i]))[0];
      let minX = Math.min(...x[i]);
      let maxX = Math.max(...x[i]);

      scatterData.datasets.push(
        {
          label: label,
          data: x[i].map((val, index) => ({ x: val, y: y[index] })),
          backgroundColor: color,
          borderColor: color,
          hidden: i !== 0,
          showLine: false,
        },
        {
          label: label,
          showLine: true,
          data: [
            { x: minX, y: lines.REG_COEF * minX + lines.CONSTANT },
            { x: maxX * 1.05, y: lines.REG_COEF * maxX * 1.05 + lines.CONSTANT },
          ],
          backgroundColor: color,
          borderColor: color,
          hidden: i !== 0,
        }
      );
    }
    setChart4Data(scatterData);
  }

  return (
    <Scatter
      data={chart4Data}
      options={{
        legend: {
          onClick: function(e, legendItem) {
            const targetLabel = legendItem.text;
            this.chart.data.datasets.forEach(ds => {
              if (ds.label === targetLabel) {
                ds.hidden = !ds.hidden;
              }
            });
            this.chart.update();
          }
        }
      }}
    />
  );
}

原理说明 #

默认的图例点击只会切换单个数据集的显隐状态，我们通过重写legend.onClick方法，遍历所有数据集并匹配标签名，将同标签的散点、折线数据集的hidden状态同步反转，最后调用update()方法触发图表重绘，实现一次点击同步控制两组数据的显隐。

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