Question

我正试图在烧瓶中绘制图表。当我使用普通图表时，一切正常。尝试使用带下拉菜单的图表时出现问题。在那种情况下，我得到一个空白的网页。

我的代码如下。

from flask import Flask,render_template,url_for
import plotly.graph_objs as go
import pandas as pd
import plotly
import json
app = Flask(__name__)
@app.route('/')
def dashboards():
    # Read in the Data via Pandas
    df = pd.read_csv('raw.githubusercontent.com/plotly/datasets/master/volcano.csv')
    data = [go.Surface(z=df.values.tolist(), colorscale='Viridis')]

    layout = go.Layout(
        width=800,
        height=900,
        autosize=False,
        margin=dict(t=0, b=0, l=0, r=0),
        scene=dict(
            xaxis=dict(
                gridcolor='rgb(255, 255, 255)',
                zerolinecolor='rgb(255, 255, 255)',
                showbackground=True,
                backgroundcolor='rgb(230, 230,230)'
            ),
            yaxis=dict(
                gridcolor='rgb(255, 255, 255)',
                zerolinecolor='rgb(255, 255, 255)',
                showbackground=True,
                backgroundcolor='rgb(230, 230, 230)'
            ),
            zaxis=dict(
                gridcolor='rgb(255, 255, 255)',
                zerolinecolor='rgb(255, 255, 255)',
                showbackground=True,
                backgroundcolor='rgb(230, 230,230)'
            ),
            aspectratio=dict(x=1, y=1, z=0.7),
            aspectmode='manual'
        )
    )

    updatemenus = list([
        dict(
            buttons=list([
                dict(
                    args=['type', 'surface'],
                    label='3D Surface',
                    method='restyle'
                ),
                dict(
                    args=['type', 'heatmap'],
                    label='Heatmap',
                    method='restyle'
                )
            ]),
            direction='down',
            pad={'r': 10, 't': 10},
            showactive=True,
            x=0.1,
            xanchor='left',
            y=1.1,
            yanchor='top'
        ),
    ])

    annotations = list([
        dict(text='Trace type:', x=0, y=1.085, yref='paper', align='left', 
     showarrow=False)
    ])
    layout['updatemenus'] = updatemenus
    layout['annotations'] = annotations

    fig = dict(data=data, layout=layout)
    # Convert the figures to JSON
    graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)

    # Render the Template
    return render_template('dashboard.html', graphJSON=graphJSON)


   if __name__ == '__main__':
    app.run()

HTML模板

＆＃13;

<!doctype html>
<html>

<head>
</head>

<body>
<h3>Fruit Plot</h3>
<div id="graph-0"></div>

</body>


<footer>
    <!-- D3.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <!-- Plotly.js -->
    <script src="https://d14fo0winaifog.cloudfront.net/plotly-basic.js"></script>

    <script type="text/javascript">
		var fig = {{graphJSON | safe}};
		Plotly.plot("graph-0", fig.data, fig.layout);
    </script>
</footer>

</html>

＆＃13;

我得到一个空白页。

任何人都可以帮忙吗？

Answer 1

问题不在于下拉菜单，而是您正在使用＆＃39;基本＆＃39; Ploty的版本。（我不知道那是什么）

如果您将HTML模板更改为包含。

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

而不是其他情节版本，代码应该可以工作。

带有下拉瓶的Plotly离线图表

1 个答案: