dash的资料还是太少了,看了一天文档(其实是摸了一天鱼),才初步知道如何使用,单纯的用plotly也能实现下拉菜单,但是一个页面也就一个图,如果多图还是得靠dash搭建页面。
代码
import plotly.graph_objs as go # 绘图
import dash
import dash_core_components as dcc # 交互式组件
import dash_html_components as html # 代码转html
from dash.dependencies import Input, Output # 回调
trace1 = go.Scatter(x=[1, 2, 3, 4], # 创建散点图
y=[16, 5, 11, 9],
mode="lines,markers",
marker=dict(size=8,
color='darkblue', # 设置颜色
line=dict(
width=2,
color="rgb(152,152,152)",)
),
line={"shape": "linear"} # shape用于确定线的样式,spline为曲线
)
fig = go.Figure(trace1) # 创建画布,将轨迹添加在画布上
app = dash.Dash('Hello Dash', )
app.layout = html.Div( # dash布局
children = [
html.H1('你好,Dash'),
html.Div('''Dash: Python网络应用框架'''),
html.Div(children=[
html.Div(children=[
dcc.Dropdown( # 创建下拉菜单
id="choice_line",
options=[
{'label': '点', 'value': 'markers'},
{'label': '线', 'value': 'lines'},
{'label': '点+线', 'value': 'markers+lines'},
{'label': '曲线', 'value': 'spline'},
{'label': '直线', 'value': 'linear'},
],
placeholder="choice",
)
],style={"display":"inline-block","width":'100px',"height":"100px","position":"absolute","left":"40px","top":"200px"}),#用style确定绝对位置
html.Div(children=[
dcc.Graph(
id='example-graph', # 这里没用figure是因为后面用了回调
),
],style={"display":"inline-block","width":"1000px","position":"absolute","left":"150px","top":"100px"}),
],style={"height":500,"width":1400}),
],style={'color': 'blue', 'fontSize': 14}
)
@app.callback(Output("example-graph","figure"),[Input('choice_line', 'value')]) # 回调
def update_figure(choice):
print(choice) # 打印验证一下,如果有多个Input,参数是列表
if choice !='choice':
if choice == "spline" or choice== "linear":
fig['data'][0]['line']['shape']=choice # 这个一开始可以打印一下,之后再调
else:
fig['data'][0]['mode']=choice
return fig
if __name__ =='__main__':
app.run_server(debug=True) # 运行
运行结果:
代码大致就是这个样子,这只是一个基础框架,如果能自己写出这个基础的话,后续看看官方文档就能搭建更好数据可视化网页,dash支持上传文件(你可以上传csv文件,然后进行分析)
dash用的是flask,所以可以用flask+dash+plotly构建一个数据可视化的网站