plotly-express-5-dash執行個體1

本文中介紹的是如何利用dash制作單個圖形+下拉菜單，主要實作的功能：

一級标題文本的居中
空行實作
下拉菜單的多個參數設定
将透視表變成DF資料框

導入庫和包

import pandas as pd
import plotly_express as px
import plotly.graph_objects as go

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

複制

顯示

# 顯示所有列
pd.set_option('display.max_columns', None)

#顯示所有行
# pd.set_option('display.max_rows', None)

#設定value的顯示長度為100，預設為50
# pd.set_option('max_colwidth',100)

複制

資料

資料是網上下載下傳的，導入之後具體的形式為：

透視求平均後的結果：

将透視表中的資料變成資料框的形式，很巧妙的做法：

繪圖

app = dash.Dash(__name__)

app.layout = html.Div([

    # 一級标題居中顯示
    html.H1("application with Dash", style={"text-align": "center"}),

    # 下拉菜單
    dcc.Dropdown(id="slct_year",
                options=[  # 下拉菜單的全部選項值
                    {"label":'2015',"value":2015},
                    {"label":'2016',"value":2016},
                    {"label":'2017',"value":2017},
                    {"label":'2018',"value":2018}],
                multi=False,  # 不允許多選
                value=2015,  # 預設的初始值
                style={"width":"50%"}
                ),

    html.Div(id='output_container',children=[]),
    html.Br(),   # 空行的實作

    dcc.Graph(id='my_bee_dash',figure={})
])

# 回調函數
@app.callback(  # 輸出和輸入
    [Output('output_container','children'),Output('my_bee_dash','figure')],
    [Input('slct_year','value')]
)

# 根據選擇的year更新圖
def update_graph(option_slctd):

    container = "the year chosen by user was:{}".format(option_slctd)

    dff = df.copy()
    dff = dff[dff["Year"] == option_slctd]
    dff = dff[dff["Affected by"] == "Varroa_mites"]

    # px作圖
    fig = px.choropleth(
        data_frame = dff,
        locationmode = "USA-states",
        locations = "state_code",
        scope = "usa",
        color = "Pct of Colonies Impacted",
        hover_data = ['State','Pct of Colonies Impacted'],
        color_continuous_scale = px.colors.sequential.YlOrRd,
        labels = {'Pct of Colonies Impacted': '% of Bee Colonies'},
        template='plotly_dark' # 3種風格之一
    )

    return container, fig  # 傳回的是容器和圖型figure

if __name__ == "__main__":
    app.run_server()

複制

結果

下拉菜單中選擇不同的年份，圖形會随着變化；預設是2015年的資料

下面是2017的圖形