官网

https://plotly.com/

基本介绍

一个基于js的能够用纯Python快速构建的web可视化应用框架。

三个主要部分

  1. 网页布局 2. callback 3. 可视化图

    应用案例

    时间关系，不一一展开讲，主要是将我做的案例记录下来，方便以后查询。

    场景需求：将中国近海的涡旋检测案例发布为web应用，主要涉及到mapbox地图的叠加，以及plotly的简单应用，和dash基本布局。

基本代码结构

  1. #主要依赖
  2. import plotly.express as px  # (version 4.7.0)
  3. import plotly.graph_objects as go
  4. import dash  # (version 1.12.0) pip install dash
  5. import dash_core_components as dcc
  6. import dash_html_components as html
  7. import dash_bootstrap_components as dbc
  8. from dash.dependencies import Input, Output,State
  10. import pandas as pd
  11. import numpy as np
  12. import xarray as xr
  13. from datetime import date
  16. from Predict import predict_app
  18. app = dash.Dash(__name__) # 设定基本主题，可以去bootstrapwatch下载
  20. #导入基本数据
  22. # 最上方横条
  23. PLOTLY_LOGO = "http://msdc.qdio.ac.cn/static/img/homepage/nav-logo.png"
  24. navbar = dbc.Navbar(
  25.     [
  26.         html.A(
  27.             # Use row and col to control vertical alignment of logo / brand
  28.             dbc.Row(
  29.                 [
  30.                     dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px",),width=18),
  31.                 ],
  32.                 align="center",
  33.                 no_gutters=True,
  34.             ),
  35.             href="http://msdc.qdio.ac.cn",
  36.         ),
  37.     ],
  38.     color="dark",
  39.     dark=True,
  40. )
  41. # 文字说明部分
  42. jumbotron = dbc.Jumbotron(
  43.     [
  44.         html.H6("AI涡旋检测", className="display-4"),
  45.         html.Hr(className="my-2"),
  46.         html.P(
  47.             "选择观测的时间， "
  48.             "右图预览中国近海识别涡旋。",
  49.             className="lead",
  50.         ),
  52.         html.P(
  53.             "可以选择 "
  54.             "算法结果或者深度学习AI结果。"
  55.         ),
  56.         html.P(dbc.Button("Contact us", color="primary",href="http://msdc.qdio.ac.cn",), className="lead"),
  58.     ]
  59. )
  61. # 基本布局控件
  62. controls = dbc.Card(
  63.     [
  64.         dbc.FormGroup(
  65.             [
  66.                 dbc.Label("选择时间：",style={'font-size': 15}),
  68.                 dcc.Slider(
  69.                     id = "time_slider",
  70.                     min=0,
  71.                     max=list(t.keys())[-2],# t的最后一天
  72.                     value=list(t.keys())[-2],
  73.                     included=False,
  74.                 ),
  75.                 html.Div(id='slider-output-container',style={'margin-left': 20,'font-size':11}),
  76.                 html.Hr(className="my-2"),
  77.             ]
  78.         ),
  79.         dbc.FormGroup(
  80.             [
  81.                 dbc.Label("选择涡旋检测算法：",style={'font-size': 15}),
  82.                 dcc.RadioItems(
  83.                     id= 'select_type',
  84.                     options=[
  85.                         {'label': '算法', 'value': 'ss'},
  86.                         {'label': '人工智能', 'value': 'ai'},
  88.                     ],
  89.                     value='ss',
  90.                     labelStyle={
  91.                                 # 'display': 'inline-block',
  92.                                 'margin-right': '7px',
  93.                                 'font-size': 15
  94.                                 },
  95.                     style={
  96.                         'display': 'inline-block',
  97.                         'margin-left': '17px',
  98.                         'font-size': 15
  99.                         }
  100.                 ),
  101.                 html.Hr(className="my-2"),
  102.                 html.Div(id='summary-container1',style={'font-size': 11}),
  103.                 html.Div(id='summary-container2',style={'font-size': 11}),
  105.             ]
  106.         ),
  108.     ],
  109.     body=True,
  110. )
  114. # 汇总到app.layout
  115. app.layout = html.Div([
  116.     navbar,
  117.     # 
  118.     dbc.Row([
  119.         dbc.Col([
  120.                 jumbotron,
  121.                 html.Div(""),
  122.                 html.P(''),
  123.                 controls,
  124.         ],width={'size': 3,"offset": 1,"order":1},align='center'),
  126.         dbc.Col([dcc.Graph(id='contourf', figure={},                    
  127.                     )
  128.             ],lg={'size': 7, "offset": 1, 'order': 2,},align="center"),
  130.     ]),
  132. ])
  135. # 将图与控件联系起来
  136. # 更新时间选择
  137. @app.callback(
  138.     Output('slider-output-container', 'children'),
  139.     [Input("time_slider", 'value')])
  140. def update_output(value):
  141.     return  "选择时间点为：{}".format(t[value]['label'])
  143. # 更新综述
  144. @app.callback(
  145.     [Output('summary-container1', 'children'),Output('summary-container2', 'children')],
  146.     [Input("time_slider", 'value'),Input(component_id='select_type', component_property='value')])
  147. def update_summary(value,type):
  148.     if type == 'ai':
  149.         method = '人工智能'
  150.     else: 
  151.         method = "传统算法"
  152.     return  "右图预览的时间点为：{} ".format(t[value]['label']),"使用方法为：{}。".format(method)
  154. # 更新画图
  155. @app.callback(
  156.     Output(component_id='contourf', component_property='figure'),
  157.     [Input(component_id='select_type', component_property='value'),Input("time_slider", 'value')]
  158. )
  159. def update_contour(option_slctd,value):
  160.     print(option_slctd)
  161.     print(value)
  162.     if option_slctd == 'ai':
  163.         #AI预测以及结果
  164.         pre_input = model_input[value,:,:]
  166.         predict_value = predict_app(pre_input) # 168*168
  167.         res_ai = zhuanhuan(lat,lon,predict_value)
  170.         fig = px.scatter_mapbox(data_frame=res_ai,lon='lon',lat='lat',color='point',opacity=0.95,zoom=2.7,center={'lat':2.625,'lon':131.125})
  172.     else:
  173.         # 算法结果
  174.         s_value = ground_truth[value,:,:]
  175.         res_suanfa = zhuanhuan(lat,lon,s_value)
  176.         fig = px.scatter_mapbox(data_frame=res_suanfa,lon='lon',lat='lat',color='point',opacity=0.95,zoom=2.7,center={'lat':2.625,'lon':131.125})
  178.     fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0},
  179.                     hoverlabel=dict( 
  180.                         font_size=12,        # label font size
  181.                         font_family="Inter"
  182.                         ), # label font
  183.                     mapbox_style="satellite",#width =11000,
  184.                     coloraxis_showscale=False,
  185.                     height = 1100
  187.                     )
  188.     return fig
  191. if __name__ == '__main__':
  192.     app.run_server(debug=True,host = '0.0.0.0',port='2151')

呈现效果

Dash-poltly 简介与基础应用 - 图1

Dash主题文件cs下载网址

https://bootswatch.com/ ，下载完之后只要放到项目文件夹下的assets文件夹下即可。

注意事项

  1. 如果我们通过不同的 url去渲染不同的页面的话，会碰到一个问题，就是我们可能会率先定义了回调，而回掉中的组件暂时还没渲染到app.layout中，因此Dash会引发异常以警告我们可能做错了。在这种情况下，我们可以通过设置忽略该异常。即：app.config.suppress_callback_exceptions = True

  2. Dash Callback 默认在用户改变输入时就会刷新callback，如果出现一种情景需要用户全部改变输入状态后再刷新，那么需要将输入转为State，这样就不会立即触发刷新。

    帮助网址

    1. 官方文档 https://dash.plotly.com/
    2. 官方社区 https://community.plotly.com/
    3. Youtube 非常详细的博主教程：https://www.youtube.com/channel/UCqBFsuAz41sqWcFjZkqmJqQ
    4. dash bootstrap components帮助你创建更佳个性化漂亮的dash应用。http://dash-bootstrap-components.opensource.faculty.ai/