第二次调用函数绘制图表时的Amcharts5错误

Question

我调用这个函数是为了把这个饼画成一个div，里面有一个模态窗口中的id“动画甜甜圈”。

第一次工作时，当第二次单击时，我得到了这些错误，并且没有显示图表。

1. 未明错误:您不能在同一个DOM节点上有多个根，
2. Uncaught:无法读取未定义(读取'_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);

}

Answer 1

在处理当前驻留在容器中的旧根元素之前，您正试图在容器中创建一个新根元素，这将导致错误。如果我们没有对以前创建的根元素的引用，我们可以在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

​

Answer 2

如果不为null，则可以释放根：

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