CanvasJs创建了多个图表，但仅呈现了一个图表

Question

我想根据来自JSON数组的N个对象动态创建CanvasJS图表。 如果JSON数组具有3个对象，则网页应能够显示3个图表。

<div class="container-fluid" id="spectraContainers">
 </div>

通过id“ spectraContainers”，我有一个javascript函数，可动态创建具有唯一ID的新div。 在相同的功能中，将创建一个具有其唯一ID的新图表。

document.getElementById("chartContainers").innerHTML += '<div class="row"> <div id="chart_container_' + chartNumber + '" style="width: 100 %; height: 500px; ">Container </div></div>';

...
...
...

var chartContainerID = "chartcontainer_" + chartNumber;
        var chart = new CanvasJS.Chart(chartContainerID, {
            animationEnabled: true,
            zoomEnabled: true,
            theme: "light2", 
            title: {
                text: chartTitle,
            },
            axisX: {
                title: "x axis label",
                gridDashType: "dash",
                gridThickness: 2
            },
            axisY: {
                title: "y axis label",
                gridDashType: "dash",
                gridThickness: 2
            },
            dataPointMaxWidth: 20,
            dataPointWidth: 10,
            data: [{
                type: "column",
                dataPoints: points
            }]
        });
        chart.render();

我已验证所有值均有效。 似乎只有一个canvasJS图表（json数组中的第三个对象）可以在此函数的页面中呈现。 如果我要为json数组中的索引0或1专门生成一个图表，则将呈现该图表的指定索引。

我知道可以通过为每个uniqueID手动创建一个新的图表变量来呈现多个canvasJs图表。 但是，我想动态生成N个图表。 我对javascript很陌生，将不胜感激！

Answer 1

使用innerHTML替换div元素的内容，而不是附加子元素。 尝试使用append方法。