[PYTHON] Erstellen Sie ein Layout, indem Sie Dash und Bootstrap kombinieren
Es dient auch als Memorandum für Amateure. Bitte entschuldigen Sie.
Letztes Mal https://qiita.com/Naoya_Study/items/507cf063a9300e9e41f6
Das heute ausgefüllte Formular finden Sie hier ↓ ↓
1. Installieren Sie die Dash Bootstrap-Komponenten
Es gibt eine Bibliothek, mit der Sie Bootstrap im Python Framework Dash verwenden können. Dieses Mal werde ich es verwenden, um ein sehr einfaches 2x2-Layout zu erstellen.
Die verwendete Bibliothek ist Dash Bootstrap Components. https://dash-bootstrap-components.opensource.faculty.ai/ Es installieren.
pip install dash-bootstrap-components
Die Grundvorlage sieht so aus. Erstellen Sie ein Layout, indem Sie dbc.Container Elemente hinzufügen.
import dash
import dash_bootstrap_components as dbc
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container("""Ich werde hier verschiedene Elemente hinzufügen""")
if __name__ == "__main__":
app.run_server(debug=True)
2. Erstellen Sie ein einfaches Layout
Nun schreiben wir tatsächlich ein 2x2-Layout.
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("Titel hier!"),
style={"background-color": "pink"}
)
],
className="h-30"
),
dbc.Row(
[
dbc.Col(
html.P("Weltkarte!"),
width=7,
style={"height": "100%", "background-color": "red"},
),
dbc.Col(
html.P("Liste der Infizierten nach Ländern!"),
width=5,
style={"height": "100%", "background-color": "green"},
),
],
className="h-50"
),
dbc.Row(
[
dbc.Col(
html.P("Karte von Japan!"),
width=7,
style={"height": "100%", "background-color": "blue"},
),
dbc.Col(
html.P("Balkendiagramm der Veränderungen in der Anzahl der Infizierten in Japan!"),
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"
Diese 50 bedeutet 50% der Höhe.
style={"height": "90vh"}
vh steht für "view port height" und bedeutet 90% der Bildschirmhöhe (vielleicht)
3. Fügen Sie das Diagramm ein
Wir werden die zuvor erstellte Figur gemäß diesem Layout einfügen. Ersetzen Sie einfach html.P () durch das erstellte dcc.Graph ().
#umschreiben
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("Anzahl der infizierten Menschen auf der Welt"),
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 = 'Anzahl der infizierten Personen',
)
],
'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("Verteilung von inländischen Infizierten"),
width = 7,
style = {
"height": "100%",
"background-color": "white",
"textAlign": "left",
"padding":"10px"
},
),
dbc.Col(
html.H4("Kumulierte Anzahl infizierter Menschen in Japan"),
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["Breite"],
lon = df_merge["Längengrad"],
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 = 'Anzahl der Infizierten nach Präfektur',
figure = {
'data' : [
go.Bar(
name='Kumulative Anzahl bis zum Vortag',
x=df_count_by_date.index,
y=df_count_by_date['gap'],
),
go.Bar(
name='Neue Nummer',
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 = "Anzahl der infizierten Personen"
)
}
),
width = 5,
style = {"height": "100%"},
),
],
className = "h-50",
),
],
style = {"height": "90vh"},
)
if __name__ == "__main__":
app.run_server(debug=True)
Vorläufig konnte ich das Diagramm beim Zeichnen einfügen. Das Diagramm bewegt sich auch interaktiv und ist interessant. Das Erscheinungsbild ist jedoch noch nicht fertiggestellt, sodass wir die Grafik ab dem nächsten Mal verbessern werden.
Recommended Posts