我正在试着在烧瓶里画一幅绘图仪。当我使用普通图表时,一切正常。尝试使用带有下拉菜单的图表时会出现问题。那样的话,我会得到一个空白网页。
我的代码如下。
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模板为
<!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>
我得到一张空白页。
有人能帮忙吗?
