Question

我想在我自己的html文件中嵌入Plotly图。使用Dash，我可以将相同的图形生成到API本地服务器中。

但是对于我自己的HTML文件，我没有任何解决方案：

我的Dash解决方案：

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div(children=[
    html.H1(children='Dash Tutorials'),
    dcc.Graph(
        id='example',
        figure={
            'data': [
                {'x': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 'y': [9, 6, 2, 1, 5, 4, 6, 8, 1, 3], 'type': 'bar', 'name': 'Boats'},
                {'x': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 'y': [19, 36, 12, 1, 35, 4, 6, 8, 1, 3], 'type': 'bar', 'name': 'Cars'},
            ],
            'layout': {
                'title': 'Basic graph'
            }
        })

])
if __name__ == '__main__':
    app.run_server(debug=True)

如何通过绘制相同的图形以嵌入到我自己的html中？

Answer 1

只需执行以下两个步骤：

1-（通过python）生成要嵌入到html文件中的代码

import plotly.graph_objs as go
from plotly.offline import plot

x  = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
y1 = [9, 6, 2, 1, 5, 4, 6, 8, 1, 3]
y2 = [19, 36, 12, 1, 35, 4, 6, 8, 1, 3]
trace1 = go.Bar(x=x,
                y=y1,
                name='Boats')
trace2 = go.Bar(x=x,
                y=y2,
                name='Cars')

data = [trace1, trace2]
layout = go.Layout(title='Title',
                   xaxis=dict(title='X axis',
                              tickfont=dict(size=14,
                                            color='rgb(107, 107, 107)'),
                              tickangle=-45),
                   yaxis=dict(title='Y axis',
                              titlefont=dict(size=16,
                                             color='rgb(107, 107, 107)'),
                              tickfont=dict(size=14,
                                            color='rgb(107, 107, 107)')),)

fig = go.Figure(data=data, layout=layout)
plot(fig,
     include_plotlyjs=False,
     output_type='div')

您会得到：

<div><div id="d18660f3-1557-43c1-8f27-09292a9a8de7" 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("d18660f3-1557-43c1-8f27-09292a9a8de7", [{"name": "Boats", "x": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], "y": [9, 6, 2, 1, 5, 4, 6, 8, 1, 3], "type": "bar", "uid": "39c52ed4-e27d-4574-9cec-a3d50a8773a0"}, {"name": "Cars", "x": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], "y": [19, 36, 12, 1, 35, 4, 6, 8, 1, 3], "type": "bar", "uid": "c0b658e9-bd5b-4c65-976d-1e03ba5836a3"}], {"title": {"text": "Title"}, "xaxis": {"tickangle": -45, "tickfont": {"color": "rgb(107, 107, 107)", "size": 14}, "title": {"text": "X axis"}}, "yaxis": {"tickfont": {"color": "rgb(107, 107, 107)", "size": 14}, "title": {"font": {"color": "rgb(107, 107, 107)", "size": 16}, "text": "Y axis"}}}, {"showLink": false, "linkText": "Export to plot.ly", "plotlyServerURL": "https://plot.ly"})</script><script type="text/javascript">window.addEventListener("resize", function(){Plotly.Plots.resize(document.getElementById("d18660f3-1557-43c1-8f27-09292a9a8de7"));});</script></div>

2-将生成的代码嵌入到html文件中

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

<body>
<h1>Something</h1>
<div><div id="d18660f3-1557-43c1-8f27-09292a9a8de7" 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("d18660f3-1557-43c1-8f27-09292a9a8de7", [{"name": "Boats", "x": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], "y": [9, 6, 2, 1, 5, 4, 6, 8, 1, 3], "type": "bar", "uid": "39c52ed4-e27d-4574-9cec-a3d50a8773a0"}, {"name": "Cars", "x": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], "y": [19, 36, 12, 1, 35, 4, 6, 8, 1, 3], "type": "bar", "uid": "c0b658e9-bd5b-4c65-976d-1e03ba5836a3"}], {"title": {"text": "Title"}, "xaxis": {"tickangle": -45, "tickfont": {"color": "rgb(107, 107, 107)", "size": 14}, "title": {"text": "X axis"}}, "yaxis": {"tickfont": {"color": "rgb(107, 107, 107)", "size": 14}, "title": {"font": {"color": "rgb(107, 107, 107)", "size": 16}, "text": "Y axis"}}}, {"showLink": false, "linkText": "Export to plot.ly", "plotlyServerURL": "https://plot.ly"})</script><script type="text/javascript">window.addEventListener("resize", function(){Plotly.Plots.resize(document.getElementById("d18660f3-1557-43c1-8f27-09292a9a8de7"));});</script></div>
</body>

将破折号图形插入到html中

1 个答案: