如何创建一个条形图，该条形图下面有一个表格，可以像excel图表选项卡一样显示各个条形图值

Question

我想使用dash创建一个类似excel中的图表表，但我不确定如何实现。我尝试在图表下方显示一个数据表，但该表与图表中的数据点不对齐。请让我知道，如果有一个方法来创建这样一个图表表在破折号

我希望我的情节是这样的：

这就是我当前的情节

以下是我正在使用的代码：

dbc.Col(
[
    html.H3("Graph 5"),
    dcc.Graph(
        figure={'data': [go.Bar(x=[1, 2, 3], y=[3, 1, 2], marker=dict(color='skyblue')),
                         go.Bar(x=[1, 2, 3], y=[0.3, 0.4, 0.1], opacity=1,
                                marker=dict(color='skyblue', line=dict(color='black', width=5)))],                                                  
                                'layout': go.Layout(barmode='overlay')}
    ),
    dash_table.DataTable(
            id='table_3',
            columns=[{"name": i, "id": i} for i in df1.columns],
            data=df.to_dict('records')
            ),
    html.Div(html.H4(""), style={'padding-bottom':'50px'})
],
md=6,

)