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

Question

我有一个条形图。我正在使用

• 反应图表js-2("^4.2.0"，(
• Chart.js("^3.8.0"，(

我的图显示了时间段，我想在加载组件后突出显示最近的时间段。高亮显示是通过设置active属性来完成的。它在Click上工作，但我希望其中一个条即使在用户点击任何东西(在组件加载上(之前也能突出显示

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

Answer 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} />;
}

Answer 2

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

LeeLenalee的回答也是正确的。我只想在这里补充更多细节。

1. 创建参考

   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 }, // the last element
])
}
}, [])