ChartJS 加载时设置条形图的活动属性

ijnw1ujt 于 2022-11-06 发布在 Chart.js

关注(0)|答案(2)|浏览(145)

我有一个条形图。我用

React图表js-2（“^4.2.0”，）
图表. js（“^3.8.0”，）

我的图表显示了时间段，我希望在加载组件后突出显示最近的时间段。突出显示是通过设置active属性完成的。它在单击时有效，但我希望在用户单击任何内容之前突出显示其中一个条形（在加载组件时）
我的问题是，如何用react-chartjs-2完成这样的场景？我看到有一个名为chart.setActiveElements的东西，但是我在我可以访问的对象中找不到它。如何在react中使用该属性？另外，如果有其他方法可以实现，请告诉我;）

chart.js

来源：https://stackoverflow.com/questions/74041743/set-active-property-on-bar-chart-on-load

2条答案

按热度按时间

ar5n3qh51#

您可以为此使用ref：

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

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

    // More logic
  }, []);

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

赞(0）回复(0）举报 2022-11-06

ehxuflar2#

如果将来有人遇到同样的问题，我会把解决方案贴出来。
LeeLenalee的回答也是正确的，我在这里补充更多细节。
1.创建引用
setActiveElements
1.使用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
      ])
    }
  }, [])

赞(0）回复(0）举报 2022-11-06

我来回答

ChartJS 加载时设置条形图的活动属性

2条答案

相关问题

热门标签

最新问答