0
202
VisualizaçõesPlotly.js: Problema con gráficos de dos tipos de archivos CSV
He tomado este código Plotly Chart Studio .js y he estado tratando de reemplazar los valores x e y para que se tomen de archivos CSV.
var url1 ='https://raw.githubusercontent.com/cherryleh/testcsvs/main/RS01_ETaverage.csv'; var url2 = 'https://raw.githubusercontent.com/cherryleh/testcsvs/main/RS01_ETmonthlyavg.csv'; function makeplot() { Plotly.d3.csv(url1, function(data){ processData(data) } ); Plotly.d3.csv(url2, function(data){ processData(data) } ); }; var x1 = [], y1 = [], x2 = [], y2 = []; function processData(allRows) { for (var i=0; i<allRows.length; i++) { row = allRows[i]; if (row['Month1'] !== undefined) { x1.push(row['Month1']);} if (row['ET1'] !== undefined) { y1.push(row['ET1']);} if (row['Month2'] !== undefined) { x2.push(row['Month2']);} if (row['ET2'] !== undefined) { y2.push(row['ET2']);} } trace1.x = x1; trace1.y = y1; trace2.x = x2; trace2.y = y2; console.log(trace1.y); }Código completo: https://jsfiddle.net/t2q8fzxn/
Cuando registro en la consola los valores x e y, funcionan bien, pero el gráfico permanece vacío. ¿Alguna idea de por qué?
1 Respostas
Responde à pergunta0
En su código , cuando llama a su función makeplot que a su vez llama a la función processData , aunque modifique las propiedades x e y de sus objetos trace1 y trace2 dentro de la función processData, estos cambios solo son locales para la función processData.
Una vez que esté fuera de la función processData, sus objetos trace1 y trace2 ya no tendrán las propiedades x e y . Y dado que su código de trazado está fuera del alcance de su función processData, sus objetos de seguimiento ya no tienen las propiedades x e y , por lo que sus gráficos están en blanco.
Si quiere ver esto por sí mismo, intente ejecutar el siguiente código después de ejecutar makeplot() y verá que las propiedades de los rastros no cambian:
makeplot(); console.log("here are the traces after makeplot has been run") console.log(trace1) console.log(trace2) // the traces won't have the properties x or y Para que su gráfico se muestre correctamente, lo que hice fue hacer que su función processData llame a otra función llamada makePlotly que toma el trace como argumento (similar a este ejemplo de la documentación). La estructura de las llamadas a funciones se ve así:
function processData(allRows) { // process your csvs // set properties for trace1 or trace2 depending on url1 or url2 // call a separate plotting function to plot each trace individually var trace1 = {...} var trace2 = {...} if (condition) { makePlotly(trace1) } else { makePlotly(trace2) } function makePlotly(trace) { var data = [trace]; var layout = {...} Plotly.plot('plotly-div', data, layout); } Para evitar cualquier problema sobre el alcance de trace1 y trace2 , los definí dentro de la función processData (parece innecesario definir los seguimientos fuera de la función ya que no se reutilizarán de todos modos). Puede encontrar mi violín aquí , que produce la siguiente trama.
