javascript - 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元素的内容而不是附加子元素。尝试使用追加方法。