Saltar al contenido

python guarde plotly plot en un archivo local e insértelo en html

No dejes de divulgar nuestra página y códigos en tus redes sociales, danos de tu ayuda para ampliar nuestra comunidad.

Solución:

Hay una mejor alternativa a partir de ahora, que es trazar fuera de línea en un div, en lugar de un html completo. Esta solución no implica ningún truco.

Si llamas:

plotly.offline.plot(data, filename='file.html')

Crea un archivo llamado file.html y lo abre en su navegador web. Sin embargo, si lo hace:

plotly.offline.plot(data, include_plotlyjs=False, output_type='div')

la llamada devolverá un string con solo el div requerido para crear los datos, por ejemplo:

Observe cómo es solo una pequeña porción de un html que se supone que debe incrustar en una página más grande. Para eso utilizo un motor de plantillas estándar como Jinga2.

Con esto, puede crear una página html con varios gráficos dispuestos de la manera que desee, e incluso devolverla como un respuesta del servidor a una llamada ajaxmuy dulce.

Actualizar:

Recuerde que deberá incluir el archivo plotly js para que todos estos gráficos funcionen.

podrías incluir

 

justo antes de poner el div que tienes. Si coloca este js en la parte inferior de la página, los gráficos no funcionará.

Opción 1: use la funcionalidad fuera de línea de plotly en su Jupyter Notebook (supongo que está usando un Jupyter Notebook desde el enlace que está proporcionando). Simplemente puede guardar todo el cuaderno como un archivo HTML. Cuando hago esto, la única referencia externa es a JQuery; plotly.js se insertará en la fuente HTML.

opcion 2: La mejor manera es probablemente codificar directamente contra la biblioteca de JavaScript de plotly. La documentación para esto se puede encontrar aquí: https://plot.ly/javascript/

Actualizar: Llamar a una función interna nunca ha sido una buena idea. Recomiendo usar el enfoque dado por @Fermin Silva. En las versiones más nuevas, ahora también hay una función dedicada para esto: plotly.io.to_html (ver https://plotly.com/python-api-reference/generated/plotly.io.to_html.html)

Hacky Opción 3 (versión original solo como referencia): si realmente desea continuar usando Python, puede usar algún truco para extraer el HTML que genera. Necesitas una versión reciente de plotly (la probé con plotly.__version__ == '1.9.6'). Ahora, puede usar una función interna para obtener el HTML generado:

from plotly.offline.offline import _plot_html
data_or_figure = ["x": [1, 2, 3], "y": [3, 1, 6]]
plot_html, plotdivid, width, height = _plot_html(
    data_or_figure, False, "", True, '100%', 525)
print(plot_html)

Simplemente puede pegar el resultado en algún lugar del cuerpo de su documento HTML. Solo asegúrese de incluir una referencia a plotly en la cabeza:


Alternativamente, también puede hacer referencia a la versión gráfica exacta que usó para generar el HTML o en línea la fuente de JavaScript (que elimina cualquier dependencia externa; sin embargo, tenga en cuenta los aspectos legales).

Terminas con un código HTML como este:



  


  
  

Nota: El guión bajo al comienzo del nombre de la función sugiere que _plot_html no está destinado a ser llamado desde un código externo. Por lo tanto, es probable que este código se rompa con futuras versiones de plotly.

Además de las otras respuestas, otra posible solución es usar to_json() en la figura gráfica.

No es necesario un serializador JSON personalizado ni el uso de soluciones internas.

import plotly

# create a simple plot
bar = plotly.graph_objs.Bar(x=['giraffes', 'orangutans', 'monkeys'], 
                            y=[20, 14, 23])
layout = plotly.graph_objs.Layout()
fig = plotly.graph_objs.Figure([bar], layout)

# convert it to JSON
fig_json = fig.to_json()

# a simple HTML template
template = """

    


    
""" # write the JSON to the HTML template with open('new_plot.html', 'w') as f: f.write(template.format(fig_json))

Sección de Reseñas y Valoraciones

Si guardas alguna desconfianza o forma de enriquecer nuestro enunciado puedes escribir una crítica y con deseo lo ojearemos.

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 4.5)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *