Créer une mise en page en combinant Dash et Bootstrap
Il sert également de mémorandum pour les amateurs. Veuillez pardonner.
Dernière fois https://qiita.com/Naoya_Study/items/507cf063a9300e9e41f6
Le formulaire rempli d'aujourd'hui est ici ↓ ↓
1. Installez les composants Dash Bootstrap
Il existe une bibliothèque qui vous permet d'utiliser Bootstrap dans le framework Python Dash. Cette fois, je vais l'utiliser pour créer une mise en page 2x2 très simple.
La bibliothèque utilisée est Dash Bootstrap Components. https://dash-bootstrap-components.opensource.faculty.ai/ Installez-le.
pip install dash-bootstrap-components
Le modèle de base ressemble à ceci. Créez une mise en page en ajoutant des éléments à dbc.Container.
import dash
import dash_bootstrap_components as dbc
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container("""Je vais ajouter divers éléments ici""")
if __name__ == "__main__":
app.run_server(debug=True)
2. Faites une mise en page simple
Maintenant, écrivons une mise en page 2x2.
import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container(
[ dbc.Row(
[
dbc.Col(
html.H1("Titre ici!"),
style={"background-color": "pink"}
)
],
className="h-30"
),
dbc.Row(
[
dbc.Col(
html.P("carte du monde!"),
width=7,
style={"height": "100%", "background-color": "red"},
),
dbc.Col(
html.P("Liste des personnes infectées par pays!"),
width=5,
style={"height": "100%", "background-color": "green"},
),
],
className="h-50"
),
dbc.Row(
[
dbc.Col(
html.P("Carte du Japon!"),
width=7,
style={"height": "100%", "background-color": "blue"},
),
dbc.Col(
html.P("Graphique à barres de l'évolution du nombre de personnes infectées au Japon!"),
width=5,
style={"height": "100%", "background-color": "cyan"},
),
],
className="h-50",
),
],
style={"height": "90vh"},
)
if __name__ == "__main__":
app.run_server(debug=True)
className="h-50"
Ce 50 signifie 50% de la hauteur.
style={"height": "90vh"}
vh signifie "afficher la hauteur du port" et signifie 90% de la hauteur de l'écran (peut-être)
3. Insérez le graphique
Nous insérerons la figure précédemment créée selon cette disposition. En gros, remplacez simplement html.P () par le dcc.Graph () créé.
#récrire
html.P()
↓
dcc.Graph()
import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
import requests, io, re
import pandas as pd
import numpy as np
import plotly.express as px
import plotly.graph_objects as go
from datetime import datetime as dt
import dash_table
import dash_core_components as dcc
from corona_def import Get_Df, Df_Merge, Df_Count_by_Date, Df_Globe_Merge
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container(
[ dbc.Row(
[
dbc.Col(
html.H1("Novel Coronavirus (COVID-19) Situation"),
style = {
"size": "30px",
"background-color": "#1b1935",
"color": "white",
"textAlign": "center",
}
)
],
className = "h-30"
),
dbc.Row(
[
dbc.Col(
html.H4("Nombre de personnes infectées dans le monde"),
width = 7,
style = {
"height": "100%",
"background-color": "white",
"textAlign": "left",
"padding": "10px"
},
),
dbc.Col(
html.H4(""),
width = 5,
style = {
"height": "100%",
"background-color": "white",
"textAlign": "center"
},
),
],
className = "h-8"
),
dbc.Row(
[
dbc.Col(
dcc.Graph(
id = 'WorldMap',
figure = {
'data' : [
go.Choropleth(
locations = df_globe_merge['code'],
z = df_globe_merge['Confirmed'],
text = df_globe_merge['COUNTRY'],
colorscale = 'Plasma',
marker_line_color ='darkgray',
marker_line_width = 0.5,
colorbar_title = 'Nombre de personnes infectées',
)
],
'layout' : go.Layout(
template = "ggplot2",
width = 600,
height = 270,
title = {
'font': {'size': 25},
'y': 0.9,
'x': 0.5,
'xanchor': 'center',
'yanchor': 'top'
},
margin={'b': 5, 'l': 5, 'r': 5, 't': 5},
geo={"projection_type": 'equirectangular'}
)
}
),
width = 7,
style = {
"height": "100%",
"background-color": "white",
"border-color": "white",
"border-width":"10px"
},
),
dbc.Col(
dash_table.DataTable(
columns = [{"name": i, "id": i} for i in df_globe.columns],
data = df_globe.to_dict('records'),
style_header = {'backgroundColor': '#eae6e8'},
style_cell = {
'backgroundColor': '#fbf9f7',
'color': 'black',
'font-size': '15px',
'textAlign': 'center'
},
style_table = {
'maxHeight': '300px',
'overflowY': 'scroll',
'overflowX': 'hidden',
},
),
width = 5,
style = {"height": "100%"}
),
],
className = "h-50"
),
dbc.Row(
[
dbc.Col(
html.H4("Répartition des personnes infectées au pays"),
width = 7,
style = {
"height": "100%",
"background-color": "white",
"textAlign": "left",
"padding":"10px"
},
),
dbc.Col(
html.H4("Nombre cumulé de personnes infectées au Japon"),
width = 5,
style = {
"height": "100%",
"background-color": "white",
"textAlign": "left",
"padding":"13px"
},
),
],
className = "h-30"
),
dbc.Row(
[
dbc.Col(
dcc.Graph(
id = 'JapMap',
figure = {
'data' : [
go.Scattergeo(
lat = df_merge["latitude"],
lon = df_merge["longitude"],
mode = 'markers',
marker = {
"color": 'red',
"size": df_merge['China']/5+6,
"opacity": 0.8,
"reversescale": True,
"autocolorscale": False
},
hovertext = df_merge['text'],
hoverinfo = "text"
)
],
'layout' : go.Layout(
width = 600,
height = 270,
template = "ggplot2",
title = {
'font': {'size':25},
'y': 0.9,
'x': 0.5,
'xanchor': 'center',
'yanchor': 'top'},
margin = {'b': 1, 'l': 1, 'r': 1, 't': 1},
geo = dict(
resolution = 50,
landcolor = 'rgb(204, 204, 204)',
coastlinewidth = 1,
lataxis = dict(range = [28, 47]),
lonaxis = dict(range = [125, 150]),
)
)
}
),
width = 7,
style = {"height": "100%",},
),
dbc.Col(
dcc.Graph(
id = 'Nombre de personnes infectées par préfecture',
figure = {
'data' : [
go.Bar(
name='Nombre cumulé jusqu'à la veille',
x=df_count_by_date.index,
y=df_count_by_date['gap'],
),
go.Bar(
name='Nouveau numéro',
x=df_count_by_date.index,
y=df_count_by_date['China']
)
],
'layout' : go.Layout(
width = 450,
height = 270,
legend = {
'x': 0.05,
'y': 0.9,
'bordercolor': 'black',
'borderwidth': 1
},
barmode = 'stack',
template = "ggplot2",
margin = {'b': 5, 'l': 5, 'r': 5, 't': 5},
xaxis_title = None,
yaxis_title = "Nombre de personnes infectées"
)
}
),
width = 5,
style = {"height": "100%"},
),
],
className = "h-50",
),
],
style = {"height": "90vh"},
)
if __name__ == "__main__":
app.run_server(debug=True)
Pour le moment, j'ai pu insérer le graphique au fur et à mesure que je le dessinais. Le graphique se déplace également de manière interactive et est intéressant. Cependant, comme cela a toujours l'air mauvais, nous améliorerons les visuels à partir de la prochaine fois.
Recommended Posts