Einführung

Ich arbeite an einem Projekt zum Sammeln von Daten mit Python und Pandas. Als ich nach einem Dashboard-Erstellungswerkzeug von Python suchte, kam ich zu Dash. Das Folgende ist eine Zusammenfassung und ein Memorandum der Ergebnisse, die während der Überprüfung des Strichs und der Probenerstellung erhalten wurden.

Was ist Dash?

Plot-erstelltes Tool zur Erstellung von Webanwendungen Basierend auf Flask wird in Python geschrieben in React.js konvertiert https://plot.ly/dash/

Es gibt viele Komponenten, die Daten grafisch anzeigen. Das Merkmal ist, dass die Daten leicht visualisiert werden können Beispiel) https://dash-gallery.plotly.host/Portal/

Html Elements

app.layout = html.Div(children=[
  html.H1(id='elm1', className='hoge' children=[]),
  #Abkürzung
  html.Div(id='elm2', className='hoge' children=[]),
]

Eine HTML-Komponente wird bereitgestellt https://dash.plot.ly/dash-html-components Es wird gezeichnet, indem es an app.layout übergeben wird.

Wenn die Struktur verschachtelt ist, werden den untergeordneten Elementen des untergeordneten Elements in child = ... weitere untergeordnete Elemente hinzugefügt. Es scheint in Form von kompliziert zu sein, daher ist es möglicherweise besser, es in Teile zu zerlegen

Wenn es ein teilweise statisches HTML ist


import dash_core_components as dcc

dcc.Markdown('''

#Überschrift
##Überschrift 2
Text
''')

Markdown kann auch beschrieben werden, daher scheint es besser, dies zu verwenden https://dash.plot.ly/dash-core-components/markdown

Graphs

https://dash-gallery.plotly.host/Portal/

dcc.Graph(
    figure={
        'data': [
             {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
             {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
        ],

Sie können ganz einfach ein Balkendiagramm erstellen, indem Sie einen Wert an die Diagrammkomponente übergeben

Tabelle

import pandas as pd

dataframe = pd.read_csv('url')

dash_table.DataTable(
    id='table',
    columns=[ {"name": i, "id": i} for i in dataframe.columns],
    hidden_columns=[],
    row_selectable="single",
    data=dataframe.to_dict('records'),
),

Sie können eine Tabelle aus einem Wörterbuch oder einem Pandas-Datenrahmen erstellen

Callback


@app.callback(
    Output('table', 'data'),
    [Input('region-dropdown', 'value')])
def update_table(value):
    return df.query('Stadtname== @value').to_dict('records')

Ein UI-Rückruf kann durch Zuordnen von Eingabe und Ausgabe von UI-Teilen ausgelöst werden.

UI-Teile sind unerlässlich

Der Punkt ist, UI-Teile zu verknüpfen,


#app.layout
dcc.Location(id='location', refresh=False),
　　　

@app.callback(
    [Output('hoge', 'value1'),
    Input('location', 'pathname')])
def pass_change(value1, pathname):

Fügen Sie einen UI-Teil mit dem Namen dcc.Location ein, um Änderungen im URL-Pfad zu erhalten Muss den Änderungswert als Rückruf erhalten

Die Ausgabe hat nur ein Gesetz

In Dash ist die Rückrufausgabe auf nur eine beschränkt


@app.callback(
    Output('hoge', 'children'),
    Input('fuga', 'value2'))
def func(value2):

@app.callback(
    Output('hoge', 'children'),
    [Input('fuga', 'value'),
     Input('hoyo', 'value')
   ])
def func(value1, value2):

Wie oben erwähnt, wenn der Rückruf mit hoge als Ausgabe dupliziert wird,

DuplicateCallbackOutput You have already assigned a callback to the output An output can only havea single callback function.

Ich werde wütend wie oben.

Es ist notwendig, Input for Output zu kombinieren, aber ich möchte einen anderen Output for Input verarbeiten In einigen Fällen muss man gut entwerfen.

@app.callback(
    [Output('hoge', 'children'),
     Output('hoge', 'children'),
     Output('hoge', 'children'),
     Output('hoge', 'children'),
     Output('hoge', 'children'),
     ],
    [Input('fuga1', 'value'),
     Input('fuga2', 'value'),
     Input('fuga3', 'value'),
     Input('fuga4', 'value'),
     Input('fuga5', 'value'),
   ])

Bitte beachten Sie, dass es sich um einen großen Rückruf handelt, bei dem viele Ausgaben für viele Eingaben gesammelt werden.

Tastenrückruf

Als ich nachforschte, ob ich das Klickereignis der Schaltfläche übernehmen konnte, In der Vergangenheit gab es eine Ereignisklasse, die jetzt entfernt wurde.

In der Eigenschaft der Button-Klasse befindet sich etwas namens n_clicks. Im offiziellen Beispiel erhöht sich n_clicks jedes Mal, wenn Sie eine Taste drücken https://dash.plot.ly/dash-core-components/button

Es ist schmerzhaft, nicht zu wissen, dass es gedrückt wurde, ohne die n_clicks aller Schaltflächen zwischenzuspeichern Als ich nach einer Immobilie suchte, gab es also etwas namens n_clicks_timestamp Die Klickbeurteilung erfolgt durch Vergleichen des Zeitstempels mit der aktuellen Zeit, wie unten gezeigt.


@app.callback(
    Output('hoge', 'children'),
    Input('close-button', 'n_clicks_timestamp')])
def click(n_clicks_timestamp):
    if n_clicks_timestamp != None:
        if (time.time() * 1000 - n_clicks_timestamp) < 1000:
            return something

Ich bin mir nicht sicher, ob dies wirklich der richtige Weg ist Bitte sagen Sie mir, wer mit Dash vertraut ist

Impressionen

Es gibt einige Macken in der Benutzerfreundlichkeit, aber es ist attraktiv, Tabellen und Grafiken mit einer sehr kleinen Menge Code schreiben zu können. Wenn es diesmal eine Lösung für die aufgeführten Nachteile gibt, möchte ich sie einzeln hinzufügen.

Impressionen von Touch, einem von Python erstellten Datenvisualisierungstool