txt - python y html5

Python guarda una trama en un archivo local e inserta en html

Question

Estoy usando python y plotly para generar un informe html interactivo. Esta publicación da un buen marco.

Si produzco la trama (a través de plotly) en línea, e inserto la url en el archivo html, funciona, pero actualizar los gráficos lleva mucho tiempo. Me pregunto si podría producir el gráfico fuera de línea y tenerlo incorporado en el informe html, de modo que la velocidad de carga no sea un problema.

Encuentro que plot offline podría generar un html para el gráfico, pero no sé cómo incrustarlo en otro html. ¿Alguien podría ayudar?

Answer 1

Hay una mejor alternativa a partir de ahora, que es hacer un trazado offline en un div, en lugar de un html completo. Esta solución no implica hacks.

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

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

la llamada devolverá una cadena con solo el div requerido para crear los datos.

<div id="82072c0d-ba8d-4e86-b000-0892be065ca8" style="height: 100%; width: 100%;" class="plotly-graph-div"></div>
<script type="text/javascript">window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL="https://plot.ly";Plotly.newPlot("82072c0d-ba8d-4e86-b000-0892be065ca8", 
[{"y": ..bunch of data..., "x": ..lots of data.., {"showlegend": true, "title": "the title", "xaxis": {"zeroline": true, "showline": true}, 
"yaxis": {"zeroline": true, "showline": true, "range": [0, 22.63852380952382]}}, {"linkText": "Export to plot.ly", "showLink": true})</script>

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 uso un motor de plantillas estándar como Jinga2.

Con esto, puede crear una página html con varios gráficos organizados de la forma que desee, e incluso devolverla como una respuesta del servidor a una llamada ajax , bastante dulce.

Actualizar:

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

Usted podría 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án .

Answer 2

No pude conseguir que ninguna de estas soluciones funcionara. Mi objetivo era generar gráficos en un bloc de notas y publicarlos en otro, por lo que conservar el gráfico HTML de la gráfica no era tan importante para mí como simplemente tener algún método para serializar la gráfica en el disco para reconstruirla en otro lugar.

La solución que se me ocurrió es serializar el objeto fig a JSON, y luego usar el "esquema de gráfico json" de plotly para construir el diagrama desde JSON. Esta demostración es de Python, pero debería ser trivial crear un gráfico en HTML usando esta estrategia de serialización JSON e invocar la biblioteca de javascript de forma directa, si eso es lo que necesita.

import numpy as np
import json
from plotly.utils import PlotlyJSONEncoder
from plotly.offline import download_plotlyjs, init_notebook_mode, iplot
import plotly.graph_objs as go
init_notebook_mode()

def plotlyfig2json(fig, fpath=None):
    """
    Serialize a plotly figure object to JSON so it can be persisted to disk.
    Figures persisted as JSON can be rebuilt using the plotly JSON chart API:

    http://help.plot.ly/json-chart-schema/

    If `fpath` is provided, JSON is written to file.

    Modified from https://github.com/nteract/nteract/issues/1229
    """

    redata = json.loads(json.dumps(fig.data, cls=PlotlyJSONEncoder))
    relayout = json.loads(json.dumps(fig.layout, cls=PlotlyJSONEncoder))

    fig_json=json.dumps({''data'': redata,''layout'': relayout})

    if fpath:
        with open(fpath, ''wb'') as f:
            f.write(fig_json)
    else:
        return fig_json

def plotlyfromjson(fpath):
    """Render a plotly figure from a json file"""
    with open(fpath, ''r'') as f:
        v = json.loads(f.read())

    fig = go.Figure(data=v[''data''], layout=v[''layout''])
    iplot(fig, show_link=False)

## Minimial demo ##

n = 1000
trace = go.Scatter(
    x = np.random.randn(n),
    y = np.random.randn(n),
    mode = ''markers'')

fig = go.Figure(data=[trace])
#iplot(fig)
plotlyfig2json(fig, ''myfile.json'')
plotlyfromjson(''myfile.json'')

EDITAR: Según la discusión sobre el issue github asociado, este es probablemente el mejor enfoque actual.

Answer 3

Opción 1 : use la funcionalidad offline de plotly en su cuaderno Jupyter (supongo que está usando un cuaderno Jupyter 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 estará en línea en la fuente HTML.

Opción 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/

Opción 3 de Hacky : Si realmente desea continuar usando Python, puede usar algún truco para extraer el HTML que genera. Necesitas una versión reciente de plotly (lo probé con plotly.__version__ == ''1.9.6'' ). Ahora, puedes 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 la salida en algún lugar del cuerpo de su documento HTML. Solo asegúrese de incluir una referencia a plotly en la cabeza:

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

Alternativamente, también puede hacer referencia a la versión gráfica exacta que usó para generar el HTML o insertar 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:

<html>
<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <!-- Output from the Python script above: -->
  <div id="7979e646-13e6-4f44-8d32-d8effc3816df" style="height: 525; width: 100%;" class="plotly-graph-div"></div><script type="text/javascript">window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL="https://plot.ly";Plotly.newPlot("7979e646-13e6-4f44-8d32-d8effc3816df", [{"x": [1, 2, 3], "y": [3, 1, 6]}], {}, {"showLink": false, "linkText": ""})</script>
</body>
</html>

Nota : el subrayado al principio del nombre de la función sugiere que _plot_html no debe llamarse desde un código externo. Por lo tanto, es probable que este código se rompa con futuras versiones de plotly.