Tutorial Dash saya kelihatan berbeza daripada tutorial dalam dokumentasi. patutkah mereka?

Question

Saya seorang jurutera bahagian belakang yang berpengalaman, tetapi saya baru dalam reka bentuk GUI berasaskan penyemak imbas (HTML, CSS, dll.). Saya perlu membina papan pemuka dan menemui Dash. Saya baru mula bekerja pada contoh-contoh ini.

Apabila saya menjalankan contoh, keputusan saya sama sekali berbeza daripada yang ditunjukkan dalam dokumentasi. Dokumentasi menyatakan bahawa mungkin terdapat perbezaan kecil, tetapi perbezaan saya tidak kecil sama sekali. Sebagai contoh, untuk salah satu contoh jadual terdahulu, jadual saya tidak mempunyai sempadan, warna latar belakang, dsb. Nampaknya saya tiada gaya digunakan. Saya ingin tahu sama ada keputusan yang saya perolehi adalah seperti yang diharapkan, atau jika ada yang tidak kena dengannya.

Berikut adalah contohnya. Contoh ini adalah daripada bahagian "Komponen Boleh Digunakan Semula" bahagian tutorial reka letak. Dalam dokumentasi, perwakilan pertama kelihatan seperti ini:

Tetapi apa yang saya dapat ialah ini:

Kod sampel adalah seperti berikut:

# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.

from dash import Dash, html
import pandas as pd

df = pd.read_csv('https://gist.githubusercontent.com/chriddyp/c78bf172206ce24f77d6363a2d754b59/raw/c353e8ef842413cae56ae3920b8fd78468aa4cb2/usa-agricultural-exports-2011.csv')


def generate_table(dataframe, max_rows=10):
    return html.Table([
        html.Thead(
            html.Tr([html.Th(col) for col in dataframe.columns])
        ),
        html.Tbody([
            html.Tr([
                html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
            ]) for i in range(min(len(dataframe), max_rows))
        ])
    ])


app = Dash(__name__)

app.layout = html.Div([
    html.H4(children='US Agriculture Exports (2011)'),
    generate_table(df)
])

if __name__ == '__main__':
    app.run_server(debug=True)

Saya menyemak konsol alat pembangun dalam Chrome dan tidak melihat sebarang ralat yang menunjukkan bahawa fail CSS tidak dapat dimuatkan. Saya bekerja di PyCharm pada Mac. Saya menyalin/menampal teks seperti sedia ada ke dalam fail "app.py" kosong dan menjalankan fail itu.

Adakah keputusan saya salah, atau hanya jangkaan saya cacat? Jika saya sepatutnya mendapat hasil yang kelihatan lebih baik, apakah yang mungkin saya hilang?

Jika ini yang saya sepatutnya dapatkan, bagaimanakah saya harus mencari dan menggunakan set gaya yang baik untuk menjadikan meja saya kelihatan menarik? Adakah saya perlu mempelajari gaya jadual satu set pada satu masa, atau adakah cara yang lebih baik? Adakah terdapat beberapa jenis konsep "plugin" dalam HTML/CSS yang mengambil dan memasukkan set gaya untuk tujuan tertentu, seperti lembaran gaya? Jika ya, di manakah saya harus mencari "plugin" sedemikian? Saya tahu bahagian hadapan menggunakan React, tetapi sangat baru dalam perkara ini sehingga pengetahuan itu tidak benar-benar membantu saya.

TIA mencari bantuan!

Answer 1

Saya menggalakkan anda menggunakan komponen Dash Bootstrap untuk menggayakan jadual anda dengan mudah, saya menggunakan perpustakaan ini untuk menulis semula contoh anda dan mendapatkan output yang anda inginkan:

from dash import Dash, html, dcc
import pandas as pd
import dash_bootstrap_components as dbc

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])


df = pd.read_csv('https://gist.githubusercontent.com/chriddyp/c78bf172206ce24f77d6363a2d754b59/raw/c353e8ef842413cae56ae3920b8fd78468aa4cb2/usa-agricultural-exports-2011.csv')

table_header = [
    html.Thead(html.Tr([html.Th(col) for col in df.columns]))
]


table_body = [html.Tbody([
                html.Tr([
                    html.Td(df.iloc[i][col]) for col in df.columns
                ]) for i in range(len(df))
              ])
             ]


table = dbc.Table(
    table_header + table_body,
    bordered=True,
    dark=True,
    hover=True,
    responsive=True,
    striped=True,
)


app.layout = html.Div([
    html.H4(children='US Agriculture Exports (2011)'),
    table
])


app.run_server(debug=True, use_reloader=False)

Output

Untuk mengetahui lebih lanjut tentang pilihan yang anda ada untuk menyesuaikan jadual, lihat

balas