私の Dash チュートリアルは、ドキュメントのものとは異なっています。そうすべきでしょうか？

Question

私は経験豊富なバックエンド エンジニアですが、ブラウザベースの GUI デザイン (HTML、CSS など) は初めてです。ダッシュボードを構築する必要があり、Dash を見つけました。私はこれらの例に取り組み始めたところです。

サンプルを実行すると、ドキュメントに示されている結果とはまったく異なります。ドキュメントには小さな違いがある可能性があると記載されていますが、私の違いはまったく小さなものではありません。たとえば、前のテーブルの例の 1 つでは、私のテーブルには枠線や背景色などがありませんでした。スタイルが適用されていないように見えます。得られた結果が期待どおりなのか、それとも何か問題があるのか​​を知りたいです。

これは一例です。この例は、レイアウト チュートリアル セクションの「再利用可能なコンポーネント」セクションからのものです。ドキュメントでは、最初の表現は次のようになります:

しかし、私が得たのは次のとおりです:

サンプルコードは次のとおりです:

リーリー

Chrome の開発者ツール コンソールを見てみましたが、CSS ファイルを読み込めないことなどを示すエラーは見つかりませんでした。 Mac 上の PyCharm で作業しています。テキストをそのままコピーして空の「app.py」ファイルに貼り付け、ファイルを実行しました。

私の結果は間違っているのでしょうか、それとも私の期待が間違っているだけなのでしょうか?見栄えの良い結果が得られるはずである場合、何が欠けている可能性がありますか?

これが私が取得すべきものである場合、テーブルの見栄えを良くするために適切なスタイルのセットをどのように見つけて適用すればよいでしょうか?テーブル スタイルを一度に 1 セットずつ学習する必要がありますか? それとももっと良い方法はありますか? HTML/CSS には、スタイルシートなど、特定の目的でスタイルのセットを取得して挿入する、ある種の「プラグイン」概念はありますか?その場合、そのような「プラグイン」はどこで探せばよいのでしょうか?フロントエンドが React を使用していることは知っていましたが、このことについてはまったくの初心者だったので、その知識はあまり役に立ちませんでした。

TIA 助けを求めています!

Answer 1

テーブルのスタイルを簡単に設定するには、 Dash Bootstrap コンポーネント を使用することをお勧めします。私はこのライブラリを使用して例を書き直し、必要な出力を取得しました。

from ダッシュ import ダッシュ、html、dcc
パンダをPDとしてインポートする
ダッシュ_ブートストラップ_コンポーネントを dbc としてインポートします

app = ダッシュ(external_stylesheets=[dbc.主題.BOOTSTRAP])


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

テーブルヘッダー = [
    html.Thead(html.Tr([df.columns の列の html.Th(col)]))
】


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


テーブル = dbc.Table(
    テーブルヘッダーテーブル本体、
    ボーダー付き=真、
    暗い=本当、
    hover=True、
    応答性=真、
    ストライプ=真、
)


app.layout = html.Div([
    html.H4(children='米国の農産物輸出 (2011)'),
    テーブル
])


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

＃＃＃＃＃＃出力＃＃＃＃＃＃

テーブルをカスタマイズするために必要なオプションの詳細については、「