如何用单个JavaScript函数动态创建Apex Charts并修复元素未找到问题

我正在使用Apex Charts进行数据可视化，原本为每个图表单独写函数，现在想实现自动化，用单个函数创建多个图表。之前手动生成的HTML容器存在ID重复（比如多个<div id="chart1"></div>），现在改成动态创建容器，但仍不断遇到Element not found错误，怀疑是ID冲突或代码逻辑问题导致。

需求是根据列表中的元素数量动态生成对应数量的环形图（比如列表有n个元素就生成n个图表），以下是我的JavaScript代码：

const list = [1, 4, 5];
// Example datasets and labels
const dataset1 = [30, 50, 20]; // Example dataset 1
const labels1 = ["Label A", "Label B", "Label C"]; // Labels for dataset 1

const dataset2 = [40, 30, 30]; // Example dataset 2
const labels2 = ["Label X", "Label Y", "Label Z"]; // Labels for dataset 2

const dataset3 = [10, 70, 20]; // Example dataset 3
const labels3 = ["Option 1", "Option 2", "Option 3"]; // Labels for dataset 3


function createContainer(list){
    const container = document.querySelector("#container");
    for(let i=0; i<list.length; i++){      
        const value = list[i];   
        const chartContent = document.createElement("div");
        chartContent.id = `chart${value}`;

       container.appendChild(chartContent);
       console.log(chartContent);
       generateChart(i);
    }
}

function generateChart(value){
    if(value == 1){
        renderDoughnutChart(dataset1, labels1, `chart${value}`);
    } else if (value == 4){
        renderDoughnutChart(dataset2, labels2, `chart${value}`);
    } else {
        renderDoughnutChart(dataset3, labels3, `chart${value}`);
    }
    
}

// Function to generate and render a doughnut chart using ApexCharts
function renderDoughnutChart(dataset, labels, containerId) {
    const options = {
        chart: {
            type: 'donut',
            toolbar: {
                show: true
            }
        },
        series: dataset,
        labels: labels,
    };

    const chart = new ApexCharts(document.getElementById(containerId), options);
    chart.render();
}

createContainer(list);

请问该如何修正并实现这一需求？

核心问题分析 #

1. 参数传递错误：createContainer中调用generateChart(i)时传入的是循环索引i（0、1、2），但generateChart函数判断的是list中的元素值（1、4、5），导致容器ID不匹配（比如第一个循环尝试找chart0，但实际创建的是chart1），触发Element not found。
2. 数据集硬编码：分散的dataset1、labels1等变量无法支持动态扩展n个图表，维护成本高。
3. ID唯一性风险：依赖list中的元素值生成ID，若列表存在重复值会导致ID冲突。

修正后的代码 #

// 整合数据集，与list的元素一一对应，方便扩展
const chartConfigs = [
    { dataset: [30, 50, 20], labels: ["Label A", "Label B", "Label C"] },
    { dataset: [40, 30, 30], labels: ["Label X", "Label Y", "Label Z"] },
    { dataset: [10, 70, 20], labels: ["Option 1", "Option 2", "Option 3"] }
];

const list = [1, 4, 5];

function createContainer(list){
    const container = document.querySelector("#container");
    for(let i = 0; i < list.length; i++){      
        const value = list[i];   
        const chartContent = document.createElement("div");
        // 用list元素值生成唯一ID，若list可能有重复值，可改用`chart-${i+1}`
        chartContent.id = `chart${value}`;
        // 可选：给容器加样式，避免图表重叠
        chartContent.style.width = "300px";
        chartContent.style.height = "300px";
        chartContent.style.display = "inline-block";

        container.appendChild(chartContent);
        // 传入当前索引i，匹配chartConfigs中的对应配置
        generateChart(i, value);
    }
}

function generateChart(index, value){
    const config = chartConfigs[index];
    // 传入正确的容器ID：chart${value}
    renderDoughnutChart(config.dataset, config.labels, `chart${value}`);
}

function renderDoughnutChart(dataset, labels, containerId) {
    const options = {
        chart: {
            type: 'donut',
            toolbar: {
                show: true
            }
        },
        series: dataset,
        labels: labels,
    };

    const chartElement = document.getElementById(containerId);
    if (!chartElement) {
        console.error(`容器 ${containerId} 不存在`);
        return;
    }
    const chart = new ApexCharts(chartElement, options);
    chart.render();
}

createContainer(list);

关键改动说明 #

• 整合数据集：把所有图表配置放到chartConfigs数组中，通过循环索引直接匹配，无需硬编码判断，支持动态添加任意数量的图表。
• 修正参数传递：generateChart同时接收循环索引index（用于取配置）和list元素值value（用于生成容器ID），确保容器ID与创建的div完全匹配。
• 增加错误校验：在renderDoughnutChart中先检查容器是否存在，避免直接报错。
• 可选样式优化：给动态创建的容器添加基础样式，避免图表重叠显示。

内容的提问来源于stack exchange，提问作者Max Husky