新手使用AnyChart结合Firebase绘制数组数据遇问题求指导

嘿，作为AnyChart新手遇到这种异步数据加载的问题很正常，我帮你梳理下代码里的几个关键问题，然后给你修正后的方案～

你当前代码的核心问题 #

• 异步数据时序问题：Firebase的child_added回调是异步触发的，但你的图表初始化是在页面就绪时同步执行的，这时候dataSetFirebaseHumidex2还没有数据，导致图表渲染为空。
• 数据集格式错误：data.data([dataSetFirebaseHumidex2])把数组额外包裹了一层，AnyChart需要的是扁平的对象数组，不需要嵌套。
• 数据映射配置错误：你用了{x: 0, y: 1}的索引映射，但你的数据是{x: Time2, y: Humidex2}的对象格式，应该直接用字段名映射。
• 系列数据引用错误：创建系列时用了原始数据集data，而不是你映射好的seriesData_1。

修正后的代码方案（实时更新版） #

这个方案会让图表在页面就绪时先初始化框架，之后每次Firebase拉到新数据就实时更新图表：

// 在外部作用域定义变量，让Firebase回调能访问到
let dataSetFirebaseHumidex2 = [];
let chart;
let dataSet;

anychart.onDocumentReady(function () {
    // 初始化图表基础结构
    chart = anychart.area();
    
    // 配置图表基础样式
    chart.title("Humidex Index");
    chart.xAxis().title("Time");
    chart.yAxis().title("Humidex");
    chart.container("container");
    
    // 创建数据集并绑定初始数据（空数组）
    dataSet = anychart.data.set(dataSetFirebaseHumidex2);
    
    // 映射数据：因为我们的元素是{x:..., y:...}对象，直接指定字段名
    let seriesData = dataSet.mapAs({x: 'x', y: 'y'});
    
    // 创建折线系列并配置样式
    let series1 = chart.spline(seriesData);
    series1.name("S1");
    series1.normal().stroke("#00cc99", 1, "10 5", "round");
    series1.hovered().stroke("#00cc99", 2, "10 5", "round");
    series1.selected().stroke("#00cc99", 4, "10 5", "round");
    
    // 先绘制空图表，后续数据更新会自动刷新
    chart.draw();
});

// 监听Firebase的新数据
dbRef2.limitToLast(20).on('child_added', function(snap) {
    const Time2 = snap.val().timestamp;
    const Humidex2 = snap.val().Humidex;
    // 添加新数据到数组
    dataSetFirebaseHumidex2.push({x: Time2, y: Humidex2});
    
    // 如果数据集已经初始化，更新数据并触发图表刷新
    if (dataSet) {
        dataSet.data(dataSetFirebaseHumidex2);
    }
    
    console.log(dataSetFirebaseHumidex2);
});

可选方案：加载完所有数据再渲染图表 #

如果你希望等Firebase的20条数据全部加载完成后再渲染图表，可以用once('value')替代child_added：

let dataSetFirebaseHumidex2 = [];

// 先拉取所有20条数据
dbRef2.limitToLast(20).once('value', function(snapshot) {
    // 遍历所有数据项
    snapshot.forEach(function(snap) {
        const Time2 = snap.val().timestamp;
        const Humidex2 = snap.val().Humidex;
        dataSetFirebaseHumidex2.push({x: Time2, y: Humidex2});
    });
    
    // 数据加载完成后再初始化图表
    anychart.onDocumentReady(function () {
        const chart = anychart.area();
        
        chart.title("Humidex Index");
        chart.xAxis().title("Time");
        chart.yAxis().title("Humidex");
        chart.container("container");
        
        const dataSet = anychart.data.set(dataSetFirebaseHumidex2);
        const seriesData = dataSet.mapAs({x: 'x', y: 'y'});
        
        const series1 = chart.spline(seriesData);
        series1.name("S1");
        series1.normal().stroke("#00cc99", 1, "10 5", "round");
        series1.hovered().stroke("#00cc99", 2, "10 5", "round");
        series1.selected().stroke("#00cc99", 4, "10 5", "round");
        
        chart.draw();
    });
});

关键调整说明 #

1. 异步时序处理：把图表初始化和数据加载的逻辑解耦，要么提前初始化框架后续更新数据，要么等数据全加载完再渲染。
2. 数据集格式修正：直接传递扁平的对象数组给AnyChart数据集，不需要额外嵌套。
3. 数据映射优化：使用字段名映射适配你的数据结构，避免索引映射的错误。
4. 实时更新机制：利用AnyChart数据集的data()方法更新数据，图表会自动重新渲染。

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