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

Question

我正在尝试制作一个界面，让用户上传CSV文件，并使用plotly绘制这些文件，只使用javascript，显然还有plotly库。我很接近，但我怀疑csv文件的异步读取存在问题。正如您可能看到的，我对javascript还比较陌生，所以欢迎任何反馈。但是，我不能使用任何其他库或程序包进行绘图。

问题是生成的图只显示了初始化的值(1(。

EDIT：热图函数适用于测试数据，或者如果我修改data_y对象的特定元素，只是当我更新文件中的信息时不起作用。

1. 有一个按钮可以上传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>

2. 使用此代码读取数据

<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>

3. 生成绘图热图的代码

<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的行为中捕捉到它，并看到一半的热图填充了实值，另一半仍然填充了初始化值！