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

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

CanvasJs multiple charts created but only one chart is rendered

javascript

canvasjs