Question

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

2021-12-07

4635

amcharts amcharts5

我调用此函数将饼图绘制到模式窗口内带有 id“animating-donut”的 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);

>

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

如果根不为空，则可以将其处置：

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

Jean-Michel Rouand

2021-12-15

Answer 3

在创建新的根元素之前，您应该按照官方文档中的说明处理先前创建的根元素及其子元素，如下面代码所示。

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