如何在React.js中让Chart.js折线图的图例可通过Tab键聚焦？

Chart.js 默认没有提供直接为单个图例项配置 tabIndex 的选项，但可以通过两种方式实现键盘可访问的图例导航：

方法一：自定义图例渲染（推荐） #

利用 Chart.js 的自定义图例功能，完全控制每个图例项的 DOM 结构，直接添加 tabIndex 和键盘交互逻辑。

修改你的 LineChart 组件如下：

import { Typography, Box } from "@mui/material";
import { Line } from "react-chartjs-2";
import {
  Chart as ChartJS,
  LineElement,
  CategoryScale,
  LinearScale,
  PointElement,
  Legend,
  Tooltip,
} from "chart.js";
import { useEffect, useRef } from "react";

ChartJS.register(
  LineElement,
  CategoryScale,
  LinearScale,
  PointElement,
  Legend,
  Tooltip
);

const LineChart = ({ data, setData, showChart, setShowChart }) => {
  const style = {
    width: "50%",
    margin: "0 auto",
    color: "#0064A1",
  };
  const legendRef = useRef(null);
  const chartRef = useRef(null);

  const options = {
    plugins: {
      legend: {
        // 关闭默认图例渲染，改用自定义图例
        display: false,
      },
      tooltip: {
        enabled: true,
      },
    },
    scales: {
      y: {
        min: 0.0,
      },
    },
  };

  // 处理图例项的切换逻辑
  const toggleLegendItem = (index) => {
    const chart = chartRef.current?.chartInstance;
    if (!chart) return;
    const meta = chart.getDatasetMeta(index);
    meta.hidden = !meta.hidden;
    chart.update();
  };

  // 处理键盘事件（Enter/Space 触发切换）
  const handleLegendKeydown = (e, index) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      toggleLegendItem(index);
    }
  };

  useEffect(() => {
    const chart = chartRef.current?.chartInstance;
    if (!chart || !legendRef.current) return;

    // 生成图例项数据
    const legendItems = ChartJS.defaults.plugins.legend.labels.generateLabels(chart);
    
    // 渲染自定义图例DOM
    legendRef.current.innerHTML = legendItems.map((item, index) => `
      <div 
        tabindex="0" 
        style="display: flex; align-items: center; cursor: pointer; margin: 0 12px; padding: 4px; outline: 2px solid transparent; transition: outline-color 0.2s;"
        data-index="${index}"
      >
        <span style="width: 14px; height: 14px; background-color: ${item.fillStyle}; display: inline-block; margin-right: 6px;"></span>
        <span>${item.text}</span>
      </div>
    `).join('');

    // 绑定点击和键盘事件
    const legendElements = legendRef.current.querySelectorAll('[data-index]');
    legendElements.forEach(el => {
      const index = parseInt(el.dataset.index);
      el.addEventListener('click', () => toggleLegendItem(index));
      el.addEventListener('keydown', (e) => handleLegendKeydown(e, index));
      // 聚焦时显示轮廓，符合无障碍要求
      el.addEventListener('focus', () => el.style.outlineColor = '#0064A1');
      el.addEventListener('blur', () => el.style.outlineColor = 'transparent');
    });
  }, [data]);

  return (
    <>
      <div style={style}>
        <Typography variant="h2" align="center">
          Probability History
        </Typography>
        {/* 自定义图例容器 */}
        <Box ref={legendRef} sx={{ display: 'flex', justifyContent: 'center', mb: 2 }} />
        <Line ref={chartRef} data={data} options={options}></Line>
      </div>
    </>
  );
};

export default LineChart;

方法二：修改生成后的DOM（快速实现） #

如果不想自定义图例，可以在图表渲染完成后，通过DOM选择器找到默认生成的图例项，为其添加 tabIndex 和键盘事件：

// 在你的LineChart组件中添加useEffect
import { useEffect } from "react";

const LineChart = ({ data }) => {
  // ... 其他代码保持不变

  useEffect(() => {
    // 等待图表渲染完成
    setTimeout(() => {
      // 找到图例项元素（依赖Chart.js默认的类名）
      const legendItems = document.querySelectorAll('.chartjs-legend-item');
      legendItems.forEach(item => {
        item.setAttribute('tabindex', '0');
        // 绑定键盘事件，Enter/Space触发点击
        item.addEventListener('keydown', (e) => {
          if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            item.click();
          }
        });
        // 添加聚焦样式
        item.style.outline = '2px solid transparent';
        item.style.transition = 'outline-color 0.2s';
        item.addEventListener('focus', () => item.style.outlineColor = '#0064A1');
        item.addEventListener('blur', () => item.style.outlineColor = 'transparent');
      });
    }, 100);
  }, [data]);

  // ... 其他代码保持不变
};

注意事项 #

• 自定义图例方法更稳定，不依赖Chart.js的DOM结构，适合长期维护
• DOM操作方法依赖默认生成的类名，Chart.js版本更新可能会影响选择器有效性
• 确保添加聚焦反馈样式，符合无障碍设计（WCAG）标准，帮助键盘用户识别当前聚焦元素

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