搜尋

首頁  >  問答  >  主體

我的 Dash 教學看起來與文件中的有所不同。他們應該嗎?

我是一位經驗豐富的後端工程師,但我是一個基於瀏覽器的 GUI 設計(HTML、CSS 等)的新手。我需要建立一個儀表板並找到了 Dash。我剛開始研究這些範例。

當我執行範例時,我的結果與文件中顯示的結果完全不同。文件指出可能存在微小差異,但我的差異一點也不小。例如,對於早期的表格範例之一,我的表格沒有邊框、背景顏色等。在我看來,沒有應用任何樣式。我想知道我得到的結果是否符合預期,或者是否有問題。

這是一個例子。此範例來自版面教學部分的「可重複使用元件」部分。在文件中,第一個表示例如下所示:

但我得到的是這樣的:

範例程式碼如下:

# 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)

我查看了 Chrome 中的開發人員工具控制台,沒有看到任何表明 CSS 檔案無法載入等錯誤。我正在 Mac 上的 PyCharm 中工作。我將文字按原樣複製/貼上到空的“app.py”文件中並運行該文件。

我的結果是錯的,還是只是我的期望有缺陷?如果我應該獲得更好看的結果,我可能會錯過什麼?

如果這是我應該得到的,我應該如何尋找並應用一組好的樣式以使我的表格看起來不錯?我是否必須學習一次一種設定的表格樣式,還是有更好的方法? HTML/CSS 中是否有某種「外掛」概念,用於抓取和插入一組用於特定目的的樣式,例如樣式表?如果是這樣,我應該去哪裡尋找這樣的「插件」?我知道前端正在使用 React,但是對這些東西太陌生了,這些知識對我沒有真正的幫助。

TIA 尋求協助!

P粉920835423P粉920835423332 天前477

全部回覆(1)我來回復

  • P粉667649253

    P粉6676492532024-02-22 14:54:08

    我鼓勵您使用Dash Bootstrap 元件輕鬆設定您的表格樣式,我用這個函式庫重寫你的範例,並得到你想要的輸出:

    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/c353e8ef842413cae56ae3920b8f-c353e8ef842413cae56ae3920b8fd
    
    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)

    輸出

    要了解有關必須自訂表格的選項的更多信息,請參閱

    0
  • 取消回覆