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

Posted 2023-05-07

【中文标题】第二次调用函数绘制图表时出现Amcharts5错误

【英文标题】：Amcharts5 error when calling function to draw chart second time

【发布时间】：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);

【参考方案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