我的 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/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)

输出

要了解有关必须自定义表格的选项的更多信息，请参阅