使用async函数读取多文件生成Plotly图表仅显示一个的问题求助

核心问题 #

• 重复使用同一DOM容器：两段脚本都调用Plotly.newPlot("myPlot", ...)，而Plotly的newPlot方法会直接替换目标容器内的所有内容，导致第二个图表完全覆盖第一个，最终仅显示最后生成的图表。
• 重复定义函数：两个脚本块重复定义了getNumbers函数，后定义的会覆盖前一个，属于冗余代码。
• 未适配多文件场景：当前代码只是复制了两次相同逻辑，没有真正实现“读取多个文件生成对应图表”的需求。

修复方案 #

步骤1：为每个图表创建独立DOM容器 #

在<body>中添加多个带唯一ID的div，作为每个图表的载体：

<div id="plot1" style="width:100%;max-width:700px;margin-bottom:20px"></div>
<div id="plot2" style="width:100%;max-width:700px"></div>

步骤2：复用函数，避免重复定义 #

将getNumbers函数仅定义一次，供后续逻辑统一调用。

步骤3：批量处理多文件与图表 #

用数组存储文件路径、对应图表容器ID和标题，循环处理每个文件生成对应图表。

完整修复代码 #

<!DOCTYPE html>
<html>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
    <!-- 每个图表对应独立容器 -->
    <div id="plot1" style="width:100%;max-width:700px;margin-bottom:20px"></div>
    <div id="plot2" style="width:100%;max-width:700px"></div>

    <script>
        // 仅定义一次数据读取函数
        async function getNumbers(file) {
            var result = await fetch(file)
            var text = await result.text()
            var bruh = String(text).split('\n')
            // 过滤解析失败的NaN值，避免图表异常
            return bruh.map(a => parseFloat(a)).filter(num => !isNaN(num));
        }

        // 定义文件与图表容器的对应关系
        const filePlotMap = [
            { file: 'sample.txt', plotId: 'plot1', title: 'Sample 1 图表' },
            { file: 'sample2.txt', plotId: 'plot2', title: 'Sample 2 图表' }
        ];

        // 批量处理每个文件
        filePlotMap.forEach(item => {
            getNumbers(item.file).then(rArray => {
                console.log(rArray);
                var xArray = ["A", "B"];
                // 确保数据存在，避免索引越界
                var yArray = [rArray[0] || 0, rArray[1] || 0];
                console.log(yArray);

                var layout = { title: item.title };
                var data = [{ labels: xArray, values: yArray, type: "pie" }];
                Plotly.newPlot(item.plotId, data, layout);
            }).catch(err => {
                // 捕获读取错误，便于调试
                console.error(`读取文件${item.file}失败:`, err);
            });
        });
    </script>
</body>
</html>

额外优化点 #

• 添加数据过滤：用filter(num => !isNaN(num))去除解析失败的无效值，防止图表渲染异常。
• 添加错误捕获：通过.catch处理文件读取失败的情况，方便排查问题。
• 添加默认值：用rArray[0] || 0确保文件数据不足时不会出现undefined。
• 统一管理映射关系：后续新增文件只需在filePlotMap数组中添加条目，无需重复复制代码。

内容的提问来源于stack exchange，提问作者Sudhanshu kumar