如何强制显示SciChart.js加载动画直至数据全部获取完成？

方法一：使用SciChart内置的LoadingOverlay（推荐） #

SciChart.js自带加载覆盖层组件，无需额外DOM操作，直接调用API即可控制显示/隐藏：

1. 初始化图表时显示加载动画
   创建SciChart实例后，立即启用加载覆盖层：

// 初始化SciChart Surface
const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root");
// 显示内置加载层，可自定义提示文本
sciChartSurface.loadingOverlay.show("数据加载中，请稍候...");

2. 等待所有API数据完成后更新图表并隐藏动画
   用Promise.all处理多API请求，确保所有数据返回后再渲染图表，最后隐藏加载层：

// 定义多个API请求
const fetchDatasetA = fetch("/api/get-dataset-a").then(res => res.json());
const fetchDatasetB = fetch("/api/get-dataset-b").then(res => res.json());

try {
    // 等待所有请求完成
    const [datasetA, datasetB] = await Promise.all([fetchDatasetA, fetchDatasetB]);

    // 将数据添加到SciChart（示例：创建折线图系列）
    const seriesA = new FastLineRenderableSeries(wasmContext, {
        dataSeries: new XyDataSeries(wasmContext, {
            xValues: datasetA.x,
            yValues: datasetA.y
        })
    });
    const seriesB = new FastLineRenderableSeries(wasmContext, {
        dataSeries: new XyDataSeries(wasmContext, {
            xValues: datasetB.x,
            yValues: datasetB.y
        })
    });
    sciChartSurface.renderableSeries.add(seriesA, seriesB);

    // 隐藏加载覆盖层
    sciChartSurface.loadingOverlay.hide();
} catch (err) {
    console.error("数据加载失败:", err);
    // 出错时也需隐藏加载层，可替换为错误提示
    sciChartSurface.loadingOverlay.show("数据加载失败，请重试");
    setTimeout(() => sciChartSurface.loadingOverlay.hide(), 3000);
}

方法二：自定义加载动画（灵活度更高） #

如果内置样式不符合需求，可以手动创建DOM加载层，覆盖在SciChart容器上：

1. 添加自定义加载层DOM

<div id="scichart-root" style="position: relative; width: 100%; height: 600px;">
    <!-- 自定义加载层 -->
    <div id="custom-loader" style="
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background-color: rgba(255, 255, 255, 0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999;
        font-size: 16px;
    ">
        <div>正在加载数据...</div>
    </div>
</div>

2. 控制加载层显示/隐藏

// 初始化图表（此时加载层默认显示）
const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root");

// 等待API数据
const [datasetA, datasetB] = await Promise.all([fetchDatasetA, fetchDatasetB]);

// 更新图表数据...
sciChartSurface.renderableSeries.add(seriesA, seriesB);

// 隐藏自定义加载层
document.getElementById("custom-loader").style.display = "none";

关键注意点 #

• 务必在所有API请求完成后再隐藏加载动画，避免数据未加载完就显示空图表。
• 处理异常场景：API请求失败时也要隐藏加载层，防止加载动画一直挂着。

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