Amcharts5 -错误不能在同一个DOM节点上有多个根-反应17

Question

我想在我的react应用程序中用amcharts5创建一个图表。

我在我在应用程序组件中导入的组件中实例化了amcharts5的根元素。我得到以下错误

You cannot have multiple Roots in the same DOM node

这是我的版本：

"react": "^17.0.2"
"@amcharts/amcharts5": "^5.1.1"

这是我的密码：

import { useLayoutEffect } from 'react'
import * as am5 from '@amcharts/amcharts5'

export default function AmCharts5() {
  useLayoutEffect(() => {
    let root = am5.Root.new('chartdiv')

    // root.current = root
    // here is a second Error : Property 'current' does not exist on type 'Root'


    return () => {
      root.dispose()
    }
  }, [])

  return <div id="chartdiv" style={{ width: '100%', height: '500px' }}></div>
}

Answer 1

当我为图表图例创建第二个根元素时，我也犯了同样的错误，但忘记在useEffect返回函数中为这个根元素添加dispose方法。因此，在我的例子中，我通过在useEffect返回函数中添加第二个dispose方法来解决这个错误。

在我的例子中，useEffect依赖于某些数据，当我更改它时，useEffect再次运行，并尝试创建同名的第二个根元素。在第一次呈现之后，当我更改someVar时，就会出现这个错误。

在此之前：

useEffect(() => {
    const root = am5.Root.new("chart-pop");
    // ... some code

    const legendRoot = am5.Root.new("legend-div");
    // ... some code

    return () => root.dispose();
}, [someVar]);

之后：

useEffect(() => {
    const root = am5.Root.new("chart-pop");
    // ... some code

    const legendRoot = am5.Root.new("legend-div");
    // ... some code

    return () => {root.dispose(); legendRoot.dispose();};
}, [someVar]);

Answer 2

您应该在图表组件上添加动态id支柱，并在am5.Root.new(${props.id})中使用该组件，并在与amchart相关的div中添加id={props.id}。

Answer 3

另一种解决方案是将根保存在全局对象中，然后在创建图表之前检查是否存在该图表，然后将该图表释放，然后再次创建。

 var MyGlobalObject={}

 function CrateMyChart(IdDivForDrawChart){
    
    if(MyGlobalObject[IdDivForDrawChart]){   //check if exist chart dispose that
                  MyGlobalObject[IdDivForDrawChart].dispose()
             }

    var  root = am5.Root.new("IdDivForDrawChart");
     // ... some code

     MyGlobalObject[IdDivForDrawChart]=root     // store chart in global object
}