我是一位經(jīng)驗(yàn)豐富的后端工程師，但我是基于瀏覽器的 GUI 設(shè)計(jì)（HTML、CSS 等）的新手。我需要構(gòu)建一個(gè)儀表板并找到了 Dash。我剛剛開始研究這些示例。
當(dāng)我運(yùn)行示例時(shí)，我的結(jié)果與文檔中顯示的結(jié)果完全不同。文檔指出可能存在微小差異，但我的差異一點(diǎn)也不小。例如，對(duì)于早期的表格示例之一，我的表格沒有邊框、背景顏色等。在我看來，沒有應(yīng)用任何樣式。我想知道我得到的結(jié)果是否符合預(yù)期，或者是否有問題。
這是一個(gè)例子。此示例來自布局教程部分的“可重用組件”部分。在文檔中，第一個(gè)表示例如下所示：
但我得到的是這樣的：
示例代碼如下：
# 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 中的開發(fā)人員工具控制臺(tái)，沒有看到任何表明 CSS 文件無法加載等錯(cuò)誤。我正在 Mac 上的 PyCharm 中工作。我將文本按原樣復(fù)制/粘貼到空的“app.py”文件中并運(yùn)行該文件。
我的結(jié)果是錯(cuò)誤的，還是只是我的期望有缺陷？如果我應(yīng)該獲得更好看的結(jié)果，我可能會(huì)錯(cuò)過什么？
如果這是我應(yīng)該得到的，我應(yīng)該如何尋找并應(yīng)用一組好的樣式以使我的表格看起來不錯(cuò)？我是否必須學(xué)習(xí)一次一種設(shè)置的表格樣式，還是有更好的方法？ HTML/CSS 中是否有某種“插件”概念，用于抓取和插入一組用于特定目的的樣式，例如樣式表？如果是這樣，我應(yīng)該去哪里尋找這樣的“插件”？我知道前端正在使用 React，但是對(duì)這些東西太陌生了，這些知識(shí)對(duì)我并沒有真正的幫助。
TIA 尋求幫助！
1
0
0
我鼓勵(lì)您使用Dash Bootstrap 組件輕松設(shè)置您的表格樣式，我用這個(gè)庫重寫你的示例，并得到你想要的輸出：
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)
輸出
