dash 初试，plotly散点图+下拉菜单+回调+布局

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构建一个数据可视化的网站