AmCharts v5 - 未捕获错误：同一 DOM 节点上不能有多个根

Question

我正在尝试并排显示 4 个图表。每个 div 都有自己的 id，并且我有一个必须从中进行选择的过滤选项。当我第一次做出选择并单击“提交”时，所有图表都显示得很好。然而，当我必须对过滤器进行更改并重新提交以便我可以从服务器提取新数据时，我不断收到“未捕获错误：同一 DOM 节点上不能有多个根”错误。我能够处理根，但此选项仅在我的页面上只有一张图表时才有效。

<script>
$(document).ready(function() {

$("#getReport").click(function() {

am5.ready(function() {

// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element

$.getJSON({
async: false,
type: "POST",
url: "<?= SITE_URL . '/Reports/Report1/' ?> ",

success: function(data) {
$("#reportsDiv").show();
createData("chartdivEducation", data, "value", "name");

},
error: function(xhr, ajaxOptions, thrownError) {
console.log('Error');
console.log(data);
alert(xhr.status);
alert(thrownError);
}
});

$.getJSON({
async: false,
type: "POST",
url: "<?= SITE_URL . '/Reports/Report2/' ?> ",

success: function(data) {

createData("chartdivNat", data, "totalChildren", "nationality");

},
error: function(xhr, ajaxOptions, thrownError) {
console.log('Error');
console.log(data);
alert(xhr.status);
alert(thrownError);
}

});

function createData(div, data, value, category) {
var root = am5.Root.new(div);
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/
var chart = root.container.children.push(am5percent.PieChart.new(root, {
layout: root.verticalLayout
}));
// Create series
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Series
var series = chart.series.push(am5percent.PieSeries.new(root, {
valueField: value,
categoryField: category
}));

// Set data
// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_data

series.data.setAll(data);

// Create legend
// https://www.amcharts.com/docs/v5/charts/percent-charts/legend-percent-series/
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
// https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
series.appear(1000, 100);

}

}); // end am5.ready()
});

});
</script>

<div style="display:none;" id="reportsDiv">

<div class="row">
<div class="col-md-6">
<div class="tn-content">
<div class="tn-content-head">
<h3 class="tn-content-title">REPORT 1</h3>
</div>
<div class="tn-content-body">

<div id="chartdivEducation" style=" height: 500px;"></div>
</div>
</div>

</div>
<div class="col-md-6">
<div class="tn-content">
<div class="tn-content-head">
<h3 class="tn-content-title">REPORT2</h3>
</div>
<div class="tn-content-body">

<div id="chartdivNat" style=" height: 500px;"></div>
</div>
</div>

</div>

</div>
</div>

Answer 1

我能够通过将创建的根保存在全局数组中来解决这个问题。每当我需要重新绘制图表时，我都会循环遍历数组并调用 dispose() 方法。

我真的不喜欢全局变量，但似乎这是保存图表记录的唯一方法。

Answer 2

从 amChart5 docs

您可以通过 id 删除根，如下所示

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