从 javascript 中的数组读取数字并使用 plotly 绘制这些数字

Question

我正在尝试制作一个界面，让用户上传 CSV 文件并使用 plotly 绘制这些文件，仅使用 javascript 并且显然是 plotly 库。我很接近，但我怀疑 csv 文件的异步读取存在问题。正如您可能看到的那样，我是 javascript 的新手，因此欢迎任何反馈。但是我不能使用任何其他库或包 plotly。

问题是结果图只显示初始化值 (1)。

编辑：热图功能适用于测试数据，或者如果我修改了 data_y 对象的特定元素，而不是当我更新文件中的信息时。

有一个允许上传 csv 文件的按钮。在事件中，此代码触发：

<script>
let picker  = document.getElementById('picker');

picker.addEventListener('change', event => {0
    file_list  = event.target.files;
    var fig_y  = [];

    for (let i = 0 ; i< file_list.length ; i++){
    if(file_list[i].name == (".DS_Store")){continue}
    else {
    var ready = read_data(file_list[i]); 
    fig_y.push(ready);
    }
    }   
    console.log(fig_y);
    plot_heatmap(fig_y);
}
);
</script>

使用此代码读取数据。

<script>
function read_data(input){
    var xs = 1212;               // length of the data
    file_contents = [];
    var data_y    = Array(xs).fill(1);
    let file      = input;
    
    let reader    = new FileReader();
    reader.readAsText(file);
    reader.onload   = function(){
    file_contents = reader.result.split('\n');

// open the data file. First two lines contain a description of the data.
    for (let j  = 2 ; j<file_contents.length-1 ; j++) {
// the relevant data is the third number in the column
    var nr = file_contents[j].split(",").map(Number)[2];  
    data_y[j-2] =   nr;
    }
    }
    return data_y;
}
</script>

制作热图的代码。

<script>
function plot_heatmap(data_z){

    var data = [
      {
           z: data_z,
        type: 'heatmap'
      }
];
Plotly.newPlot('raw_data', data);
    };
</script>

Answer 1

好的，所以我找到了答案。它来自文本文件的异步读取。将 plot_heatmap 函数放在以下 Timeout 函数中解决了这个问题（好吧，也许它更像是一种解决方法）。

setTimeout(() => { plot_heatmap(fig_y); }, 100);

实际上，通过改变超时的长度，我可以捕捉到 JS 的动作，并看到一半的热图填充了真实值，另一半仍然是初始化值！

从 javascript 中的数组读取数字并使用 plotly 绘制这些数字

Reading numbers from array in javascript and plotting these using plotly

javascript

csv