可自动滚动的仪表盘

Question

我想知道有没有一种方法可以让仪表盘在滚动条可用时自动上下滚动。

这是一个简单的例子(我使用了相同的数据帧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)

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

Answer 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有内置的功能可以做到这一点。

Answer 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

Answer 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}