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

Question

我调用此函数将饼图绘制到模态窗口内 ID 为“animating-donut”的 div 中。

第一次它有效，但是当第二次单击时我收到这些错误并且图表不显示

1. 未捕获错误：同一个 DOM 节点上不能有多个根
2. 未捕获的类型错误：无法读取未定义的属性（读取“_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