Soy un novato tratando de aprender. He modificado el código de la trama en plotly hover events. El objetivo es obtener eventos hover para luego poder mostrar una imagen en un modal.
Mi CSV lee y la trama se muestra en el navegador. Recibo un mensaje de error: "TypeError no detectado: myPlot.on no es una función" (en los depuradores de Firefox y Chrome). Otras publicaciones sobre este problema indican que debo estar ejecutando la versión correcta de "https://cdn.plot.ly/plotly-latest.min.js". He intentado todo lo que se me ocurre, incluso convertirlo en código lineal sin múltiples llamadas a funciones. ¡Ayuda! Gracias...
<!DOCTYPE html> <html lang="en" > <head> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> </head> <div id="myDiv"></div> <div id="hoverinfo" style="margin-left:80px;"></div> <script> var traces=[]; var layout=[]; var config={}; var rows=[] const CSV="cloudcover.csv"; Plotly.d3.csv(CSV, function(rows){ let x=[]; let y=[]; let row; let i=0; while (i< rows.length){ row=rows[i]; x.push(row["Time"]); y.push(row["CloudCover"]); i+=1; }; traces=[ {x:x, y:y, line:{color:"#387fba"}, width:2, }]; layout={ title:'Cloudcover', yaxis:{ range:[0,100]}, xaxis:{tickformat: "%H:%M:%S"} }; config={ responsive:true }; Plotly.newPlot('myDiv',traces,layout,config,{showSendToCloud: true}); }); var myPlot = document.getElementById('myDiv') hoverInfo = document.getElementById('hoverinfo') myPlot.on('plotly_hover', function(data){ var infotext = data.points.map(function(d){ return (d.data.name+': x= '+d.x+', y= '+dytoPrecision(3)); }); hoverInfo.innerHTML = infotext.join('<br/>'); }) myPlot.on('plotly_unhover', function(data){ hoverInfo.innerHTML = ''; }); </script> </body> </html>El csv es simple:
Time,CloudCover 2022-04-06 10:07:09,0 2022-04-06 11:07:18,100.0 2022-04-06 12:08:17,100.0 2022-04-06 13:09:16,96.0 2022-04-06 14:10:15,66.0 2022-04-06 15:11:14,7.0 2022-04-06 16:12:13,6.0Debe colocar todo el código de plotly dentro de la devolución de llamada de Plotly.d3.csv , incluido su detector de eventos, así:
Plotly.d3.csv(CSV, function (rows) { ... Plotly.newPlot('myDiv', traces, layout, config); const myPlot = document.getElementById('myDiv') myPlot.on('plotly_hover', function (data) { ... }) myPlot.on('plotly_unhover', function (data) { ... }); }); Esto se debe a que sus datos solo estarán disponibles una vez que se cargue el archivo CSV (es decir, usted está dentro de la devolución de llamada) y on oyente solo estará disponible una vez que se cree el gráfico a partir de los datos.
Mueva Plotly.newPlot fuera de la función pasada a Plotly.d3.csv . Una vez que se ejecuta Plotly.newPlot , insertará los polyfills para permitir escuchar eventos usando .on(...)
El siguiente fragmento traza un gráfico en blanco, todavía no tiene el archivo cloudcover.csv , pero resuelve su problema.
Se actualizó el fragmento para usar Plotly.react() para actualizar los datos en el gráfico una vez que el contenido CSV esté disponible. En términos generales, es mejor no tener el código de creación/representación del componente dentro de la función de actualización de datos.
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> </head> <div id="myDiv"></div> <div id="hoverinfo" style="margin-left:80px;"></div> <script> const chartEl = 'myDiv'; const CSV = "cloudcover.csv"; /*Create chart*/ var layout = { title: 'Cloudcover', yaxis: { range: [0, 100] }, xaxis: { tickformat: "%H:%M:%S" } }, config = { responsive: true }; Plotly.newPlot(chartEl, [], layout, config, { showSendToCloud: true }); var myPlot = document.getElementById(chartEl) hoverInfo = document.getElementById('hoverinfo') myPlot.on('plotly_hover', function(data) { var infotext = data.points.map(function(d) { return (d.data.name + ': x= ' + dx + ', y= ' + dytoPrecision(3)); }); hoverInfo.innerHTML = infotext.join('<br/>'); }) myPlot.on('plotly_unhover', function(data) { hoverInfo.innerHTML = ''; }); /*Update data in chart*/ function updateChartData(rows) { let traces = [], x = [], y = [], row, i = 0; while (i < rows.length) { row = rows[i]; x.push(row["Time"]); y.push(row["CloudCover"]); i += 1; }; traces = [{ x: x, y: y, line: { color: "#387fba" }, width: 2, }]; Plotly.react(chartEl, traces); } Plotly.d3.csv(CSV, updateChartData); </script> </body> </html>