在加载时在条形图上设置活动属性答案

【问题标题】：Set active property on Bar chart on load在加载时在条形图上设置活动属性
【发布时间】：2022-10-20 21:58:16
【问题描述】：

我有一个条形图。我在用着

react-chartjs-2 ("^4.2.0",)
Chart.js ("^3.8.0",)

我的图表显示了时间段，我想在组件加载后突出显示最新的时间段。突出显示是通过设置active 属性来完成的。它适用于点击，但是我希望在用户点击任何东西之前突出显示其中一个栏（在组件加载时）

我的问题是，如何使用 react-chartjs-2 完成这样的场景？我看到有一个叫做chart.setActiveElements 的东西，但我在我可以访问的对象中找不到它。如何在反应中使用该属性？另外，如果有其他方法可以实现，请告诉我；）

【问题讨论】：

标签： reactjs chart.js react-chartjs-2

【解决方案1】：

您可以为此使用 ref：

export function App() {
  const chartRef = useRef<Chart>(null);

  useEffect(() => {
    const chart = chartRef.current;

    // More logic
  }, []);

  return <ReactChart ref={chartRef} type='bar' data={data} />;
}

【讨论】：

【解决方案2】：

如果将来有人遇到同样的问题，我会发布解决方案。

LeeLenalee 的回答也是正确的。我将在这里添加更多细节。

创建参考

const chartRef = useRef<Chart<'bar'>>()

使用 useEffect() 钩子并从 ref 中获取 setActiveElements 方法

useEffect(() => {
    const numberOfElements = chartRef.current?.data.datasets[0].data.length
    if (numberOfElements) {
      chartRef.current?.setActiveElements([
        { datasetIndex: 0, index: numberOfElements - 1 },
      ])
    }
  }, [])

【讨论】：