简体繁体 English

如何使用 React Chart.js 在一个 canvas 中分别渲染两个折线图以利用 useMemo-Hook？

[英]How do I separately render two Line graphs in one canvas using React Chart.js to make use of the useMemo-Hook?

原文 2023-01-05 08:48:56 7 1 reactjs/ react-chartjs/ react-chartjs-2

I'm having trouble with a graph I'm building with React-ChartJS-2:我在使用 React-ChartJS-2 构建的图表时遇到问题：

I've got two line charts in one canvas, one of them is interactive (the user can activate points and can compare different values on that graph) the other one is just a static graph which should be a orientation for the user.我在一个 canvas 中有两个折线图，其中一个是交互式的（用户可以激活点并可以比较该图表上的不同值）另一个只是一个 static 图表，它应该是用户的方向。 I'm trying to prevent the rerendering of the static graph if the user activates datapoints on the interactive graph (which changes the props and thus the useMemo Hook doesnt work).如果用户激活交互式图形上的数据点（这会更改道具，因此 useMemo Hook 不起作用），我试图阻止重新呈现 static 图形。 Is there a way to separate the two datasets in two single components so the props don't change for the static graph without some hacky CSS?有没有办法将两个数据集分成两个单独的组件，这样 static 图的道具就不会改变，而不会出现一些 hacky CSS？

Thank you in advance!先感谢您！

I kinda found a solution by deactivating the animation so the user doesn't see the rerendering, but it's not the nicest I guess.我通过停用 animation 找到了一个解决方案，这样用户就看不到重新渲染，但我猜这不是最好的。 Right now I'm trying to render the two line Charts and try to stack one on top of the other with CSS现在我正在尝试渲染两条折线图，并尝试使用 CSS 将一个堆叠在另一个之上

1 个解决方案

Hi There @Lucas2101 it would be easier to answer your question with a code example.你好 @Lucas2101 用代码示例回答你的问题会更容易。 What is the reason you need the useMemo hook.您需要 useMemo 挂钩的原因是什么。 And to answer one of your questions the useMemo hook runs when the items in the dependency array update so it might be that you haven't added the correct thing to that array.为了回答您的一个问题，useMemo 挂钩会在依赖项数组中的项目更新时运行，因此可能是您没有向该数组添加正确的内容。 I can't say for sure as i have no code.我不能肯定地说，因为我没有代码。