如何在ReactJS中为Google Chart添加图例显隐自定义脚本？

我已经在ReactJS中构建了一个包含Google Chart的PlayerCountStat组件，想要实现图例点击显隐对应数据系列的功能，请问相关代码应该放在哪里、如何与我的图表组件结合？

我的PlayerCountStat组件代码如下：

// 省略所有导入和useEffect代码...
return (
  <Chart
    chartType="LineChart"
    width="100%"
    height="400px"
    data={dateData}
    options={options}
    chartPackages={["corechart", "controls"]}
    controls={[
      {
        controlType: "ChartRangeFilter",
        options: {
          filterColumnIndex: 0,
          ui: {
            chartType: "LineChart",
            chartOptions: {
              chartArea: { width: "90%", height: "50%" },
              hAxis: { baselineColor: "none" },
            },
          },
        },
        controlPosition: "bottom",
        controlWrapperParams: {
          state: {
            range: {
              start: startFilterDate,
              end: endFilterDate
            },
          },
        },
      },
    ]}
  />
);
}

export default PlayerCountStat

路由代码：

function App() {
  return (
    <BrowserRouter>
        <Route path="/PlayerCountStat">
          <Navbar/>
          <Page content={PlayerCountStat}/>
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

export default App;

要实现图例点击显隐数据的功能，你需要借助react-google-charts提供的chartReady事件获取图表实例，绑定图例点击事件，同时通过React状态维护各数据系列的显示状态，具体步骤如下：

1. 添加状态维护显示状态 #

在PlayerCountStat组件中，新增状态记录每个数据系列的显示状态：

import { useState, useRef } from 'react';
import { Chart } from 'react-google-charts';

function PlayerCountStat() {
  // 初始化所有数据系列为显示状态，数量匹配dateData的表头列数（排除时间列）
  const [seriesVisibility, setSeriesVisibility] = useState(() => {
    const seriesCount = dateData?.[0]?.length - 1 || 0;
    return Array(seriesCount).fill(true);
  });
  const chartRef = useRef(null); // 存储图表实例
  // ... 你的原有代码

2. 编写图例点击处理函数 #

实现点击图例时切换对应系列显示状态的逻辑：

const handleLegendClick = (e) => {
  const chart = chartRef.current.getChart();
  // 定位到图例的text元素
  const legendItem = e.target.tagName === 'text' ? e.target : e.target.parentNode;
  const seriesIndex = legendItem.getAttribute('index');
  
  if (seriesIndex !== null) {
    const newVisibility = [...seriesVisibility];
    newVisibility[seriesIndex] = !newVisibility[seriesIndex];
    setSeriesVisibility(newVisibility);
    
    // 更新图表配置，控制系列显示/隐藏
    chart.setOption('series', newVisibility.map((visible, idx) => ({ visible })));
  }
};

3. 绑定图表就绪事件与点击监听 #

在<Chart>组件上添加chartReady事件，获取图表实例并绑定图例点击事件：

const handleChartReady = () => {
  const chart = chartRef.current.getChart();
  // 给所有图例文本绑定点击事件
  chart.getContainer().querySelectorAll('#legend text').forEach(textEl => {
    textEl.addEventListener('click', handleLegendClick);
  });
};

// 更新return中的Chart组件配置
return (
  <Chart
    ref={chartRef}
    chartType="LineChart"
    width="100%"
    height="400px"
    data={dateData}
    options={{
      ...options,
      // 显式开启图例可点击（默认已开启，显式声明更稳妥）
      legend: { position: 'top', clickable: true },
      // 初始化系列可见性配置
      series: seriesVisibility.map((visible, idx) => ({ visible }))
    }}
    chartPackages={["corechart", "controls"]}
    controls={[/* 你的原有controls配置 */]}
    chartReady={handleChartReady}
  />
);

4. 处理动态数据更新（可选） #

如果你的dateData会动态变化，需要在数据更新后重新绑定点击事件，避免失效：

useEffect(() => {
  if (!chartRef.current) return;
  
  const chart = chartRef.current.getChart();
  const legendTexts = chart.getContainer().querySelectorAll('#legend text');
  
  // 先移除旧监听，避免重复绑定
  legendTexts.forEach(textEl => {
    textEl.removeEventListener('click', handleLegendClick);
  });
  // 重新绑定监听
  legendTexts.forEach(textEl => {
    textEl.addEventListener('click', handleLegendClick);
  });
  // 同步系列可见性状态
  chart.setOption('series', seriesVisibility.map((visible, idx) => ({ visible })));
}, [dateData, seriesVisibility]);

注意事项 #

• 确保options中未覆盖legend.clickable属性，需保持为true
• 使用ChartRangeFilter控件时，图表更新后会重新渲染图例，必须重新绑定点击事件
• seriesVisibility的初始化长度要与dateData中的数据系列数量匹配

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