第二次调用函数绘制图表时出现Amcharts5错误答案

【问题标题】：Amcharts5 error when calling function to draw chart second time第二次调用函数绘制图表时出现Amcharts5错误
【发布时间】：2022-01-12 07:39:50
【问题描述】：

我正在调用此函数将饼图绘制到 id 为“animating-donut”的 div 中，该 div 位于模态窗口内。

第一次成功，但第二次点击时出现这些错误，图表没有显示

未捕获的错误：同一个 DOM 节点上不能有多个根
未捕获的类型错误：无法读取未定义的属性（读取“_display”）

无论如何，我不认为这些错误会导致图表不会像第一次显示那样第二次显示，即使有这些错误 -

谢谢

这是我的功能

function donutam(donutdatalabel,donutdataseries){
//Pie View;
root = am5.Root.new("animating-donut");

// Set themes
root.setThemes([
  am5themes_Animated.new(root)
]);


// Create chart
var chart = root.container.children.push(am5percent.PieChart.new(root, {
  layout: root.verticalLayout
}));


// Create series
var series = chart.series.push(am5percent.PieSeries.new(root, {
  valueField: "value",
  categoryField: "category"
}));


// Set data
var serie = donutdataseries.split(',');
var labels = donutdatalabel.split(',');
var seriesarr = [];
for (i = 0; i < serie.length; i++) {
    seriesarr[i] = {value: serie[i], category: labels[i]};
}
    
series.data.setAll(seriesarr);


// Create legend
var legend = chart.children.push(am5.Legend.new(root, {
  centerX: am5.percent(50),
  x: am5.percent(50),
  marginTop: 15,
  marginBottom: 15,
}));

legend.data.setAll(series.dataItems);


// Play initial series animation
series.appear(1000, 100);

}

【问题讨论】：

标签： amcharts amcharts5

【解决方案1】：

如果不为空，您可以处置根：

if (root !== null) root.dispose();

【讨论】：

感谢您的回答当我尝试您的建议时，我收到此错误 Cannot read properties of undefined (reading 'dispose')

【解决方案2】：

您试图在容器中创建一个新的根元素，然后再丢弃当前驻留在该容器中的旧根元素，这将导致错误。如果我们没有引用之前创建的根元素，我们可以在 am5.registry.rootElements 中找到它，这是一个包含所有根元素的数组。

function maybeDisposeRoot = (divId) => {
  am5.array.each(am5.registry.rootElements, function (root) {
    if (root.dom.id == divId) {
      root.dispose();
    }
  });
};

function donutam(donutdatalabel,donutdataseries){
//Pie View;
maybeDisposeRoot("animating-donut");
root = am5.Root.new("animating-donut");

// Set themes
root.setThemes([
  am5themes_Animated.new(root)
]);


// Create chart
var chart = root.container.children.push(am5percent.PieChart.new(root, {
  layout: root.verticalLayout
}));


// Create series
var series = chart.series.push(am5percent.PieSeries.new(root, {
  valueField: "value",
  categoryField: "category"
}));


// Set data
var serie = donutdataseries.split(',');
var labels = donutdatalabel.split(',');
var seriesarr = [];
for (i = 0; i < serie.length; i++) {
    seriesarr[i] = {value: serie[i], category: labels[i]};
}
    
series.data.setAll(seriesarr);


// Create legend
var legend = chart.children.push(am5.Legend.new(root, {
  centerX: am5.percent(50),
  x: am5.percent(50),
  marginTop: 15,
  marginBottom: 15,
}));

legend.data.setAll(series.dataItems);


// Play initial series animation

【讨论】：