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

Question

我是一位經驗豐富的後端工程師，但我是一個基於瀏覽器的 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 尋求協助！

Answer 1

我鼓勵您使用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)

輸出

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