如何使用 React.js 使图例选项卡在 chart.js 折线图中可聚焦？

Question

我试图让我所有的可点击元素“tab-able”或键盘只能访问。有没有办法为 chart.js 中的各个图例提供 tabIndex？这是我第一次使用 chart.js，我一直在寻找解决方案。

这是我的折线图组件：

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

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

const LineChart = ({ data, setData, showChart, setShowChart }) => {
  const style = {
    width: "50%",
    margin: "0 auto",
    color: "#0064A1",
  };
  const options = {
    plugins: {
      legend: true,
      tabIndex: 0,
    },
    scales: {
      y: {
        min: 0.0,
        // max: 1,
      },
    },
  };

  return (
    <>
      <div style={style}>
        <Typography variant="h2" align="center">
          Probability History
        </Typography>
        <Line data={data} options={options}></Line>
      </div>
    </>
  );
};

export default LineChart;`

我的数据集在不同的组件中。我试着给组件 tabIndex 但它只是让整个图表都可以使用选项卡。

Answer 1

我想看看我是否可以构建一个插件来帮助您解决这个问题。该插件是 chartjs-plugin-a11y-legend，我用它来处理一些基本示例和 vanilla chart.js。

这里有键盘导航的例子，如果你想玩的话。 https://codepen.io/chart2music/full/ZEMyLVZ

您只需导入插件并注册即可使用该插件。所以：

// Import the plugin
import plugin from "chartjs-plugin-a11y-legend";
// Import from Chartjs as normal
import {
  Chart as ChartJS,
  LineElement,
  CategoryScale, //x axis
  LinearScale, //y axis
  PointElement,
  Legend,
  Tooltip,
} from "chart.js";

// Register all of the normal Chartjs things
ChartJS.register(
  LineElement,
  CategoryScale,
  LinearScale,
  PointElement,
  Legend,
  Tooltip,

  // and register the plugin
  plugin
);

我还没有用 react-chartjs-2 测试过它。如果它不起作用......如果你能给我一个codepen或codesandbox，我会尽力解决它。