将图例添加到 Dash DataTable

Question

从以下代码开始，我想在此表格中添加一个图例：

from dash import Dash, dash_table
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')

app = Dash(__name__)

app.layout = dash_table.DataTable(df.to_dict('records'), [{"name": i, "id": i} for i in df.columns])

if __name__ == '__main__':
    app.run_server(debug=True)

另请参阅：https://dash.plotly.com/datatable

我想在屏幕底部有这样的东西：

Column	Explanation
State	The state for which the data was collected.
Number of Solar Plants	The total number of solar plants in the state.
Installed Capacity (MW)	The installed capacity in megawatts.
Average MW Per Plant	The average power production in megawatts.
Generation (GWh)	Generated gigawatts per hour.

Answer 1

我找到了解决问题的方法。我只是添加了第二个表格作为图例。

from dash import Dash, dash_table
import pandas as pd
from dash import html

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')

app = Dash(__name__)

explanations = ["The state for which the data was collected.", "The total number of solar plants in the state.", "The installed capacity in megawatts.", "The average power production in megawatts.", "Generated gigawatts per hour."]

app.layout = html.Div([
    dash_table.DataTable(df.to_dict('records'),
                         [{"name": i, "id": i} for i in df.columns]),
    dash_table.DataTable([{"Column": "State", "Explanation": "The state for which the data was collected."},
                          {"Column": "Number of Solar Plants", "Explanation": "The total number of solar plants in the state."},
                          {"Column": "Installed Capacity (MW)", "Explanation": "The installed capacity in megawatts."},
                          {"Column": "Average MW Per Plant", "Explanation": "The average power production in megawatts."},
                          {"Column": "Generation (GWh)", "Explanation": "Generated gigawatts per hour."},],
                           [{"name": i, "id": i} for i in ["Column", "Explanation"]]),
    html.Div(id='datatable-interactivity-container')
])

#app.layout = 

if __name__ == '__main__':
    app.run_server(debug=True)

Answer 2

由于 table 显示在一起并以全宽度显示，您可以使用 inine-block 插入空格并优化列宽。

from dash import Dash, html, dash_table
from jupyter_dash import JupyterDash
import pandas as pd

explain = ["The state for which the data was collected.",
           "The total number of solar plants in the state.",
           "The installed capacity in megawatts.",
           "The average power production in megawatts.",
           "Generated gigawatts per hour."]     

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')
df_legend = pd.DataFrame({'Column':df.columns, 'Explanation': explain})

#app = Dash(__name__)
app = JupyterDash(__name__)

app.layout = html.Div([
    html.Div(id='div1', children=[
        dash_table.DataTable(df.to_dict('records'), [{"name": i, "id": i} for i in df.columns])
    ]),
    html.Div(id='div2', children=[
        dash_table.DataTable(
        data=df_legend.to_dict('records'),
        columns=[{"name": i, "id": i} for i in df_legend.columns],
        )
    ], style={'display': 'inline-block'})
])

if __name__ == '__main__':
    app.run_server(debug=True)#, mode='inline'

将图例添加到 Dash DataTable

Add legend to Dash DataTable

python

legend

tabular

plotly-dash