可以自动滚动的 Dash Table答案

【问题标题】：Dash Table that can auto scroll可以自动滚动的 Dash Table
【发布时间】：2020-01-03 22:49:26
【问题描述】：

我想知道是否有一种方法可以在滚动条可用时让仪表板自动垂直上下滚动。

这是一个简单的示例（我使用相同的数据帧 7 次以使其足够长）。

import dash
import dash_table
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')
long_data = pd.concat([df,df,df,df,df,df,df])

app = dash.Dash(__name__)

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

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

有没有办法让这个页面上的内容垂直上下？

【问题讨论】：

标签： python html plotly plotly-dash

【解决方案1】：

我不确定这是否是您要查找的内容，但您可以通过 style_table (reference) 使表格可滚动：

app.layout = dash_table.DataTable(
    id='table',
    columns=[{"name": i, "id": i} for i in long_data.columns],
    data=long_data.to_dict('records'),
    style_table={
        'overflowY': 'scroll'
    }
)

如果您希望表格以给定的速度自动滚动，我怀疑 dash/plotly 具有执行此操作的内置功能。

【讨论】：

【解决方案2】：

您是否尝试过使用"overflow":"Scroll" 或overflowY

例子：

dbc.Col(
     html.Div(id='timeline-div',),
          width=4,
          style={'width': '100%', 
                 'height': '750px', 
                 'overflow': 'scroll', 
                 'padding': '10px 10px 10px 20px'
          }
        ),

资源：https://community.plotly.com/t/how-to-make-a-data-table-scrollable-with-using-overflowy-but-without-the-double-scroll-bars/27920

【讨论】：

【解决方案3】：

问题已解决：-

                                style_header=
                                {
                                    'fontWeight': 'bold',
                                    'border': 'thin lightgrey solid',
                                    'backgroundColor': 'rgb(100, 100, 100)',
                                    'color': 'white'
                                },
                                style_cell={
                                    'fontFamily': 'Open Sans',
                                    'textAlign': 'left',
                                    'width': '150px',
                                    'minWidth': '180px',
                                    'maxWidth': '180px',
                                    'whiteSpace': 'no-wrap',
                                    'overflow': 'hidden',
                                    'textOverflow': 'ellipsis',
                                    'backgroundColor': 'Rgb(230,230,250)'
                                },
                                style_data_conditional=[
                                    {
                                        'if': {'row_index': 'odd'},
                                        'backgroundColor': 'rgb(248, 248, 248)'
                                    },
                                    {
                                        'if': {'column_id': 'country'},
                                        'backgroundColor': 'rgb(255, 255, 255)',
                                        'color': 'black',
                                        'fontWeight': 'bold',
                                        'textAlign': 'center'
                                    }
                                ],
                                fixed_rows={'headers': True, 'data': 0}

【讨论】：

【解决方案4】：

您可以使用回调和 dcc.interval 完成此操作，但它很笨重！

【讨论】：