我想在我的 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>
}
当我为图表图例创建第二个根元素时,我遇到了同样的错误,但忘记在 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]);
修复此错误的正确而简单的方法是遵循 AmCharts5 中“处置”部分中的 doc。只需将此代码放在您的
am5.ready(function() {...}
之前并替换您的 divId =):
am5.array.each(am5.registry.rootElements,
function(root) {
if (root.dom.id == divId) {
root.dispose();
}
}
);
您应该在图表组件上添加动态 id 属性,并在
am5.Root.new(${props.id})
中使用它,并在与 amchart 相关的返回 div 中添加 id={props.id}
。
另一种解决方案是将根保存在全局对象中,并在创建图表之前检查图表是否存在,处理该图表然后再次创建。
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
}
当您尝试创建另一个图表一次后,就会发生这种情况。 也许这是错误的,或者你已经编码了。 解决方案
多达。一切都完成了