首页 > 解决方案 > Plotly 自动滚动范围选择器

问题描述

尝试使用视频自动滚动范围选择器。

任何帮助,将不胜感激。下面是我迄今为止尝试过的一些代码,它只呈现原始绘图的范围选择器,但没有自动滚动(即后续绘图)。

在此处输入图像描述

使用范围选择器制作甘特图

import plotly.figure_factory as ff

def make_timeline(df, current_time=0):
    y = len(df['Task'].unique())
    fig = ff.create_gantt(df, height=y * 15, bar_width=0.2, index_col='Resource', show_colorbar=True, group_tasks=True, title='Tags Timeline')
    fig.update_layout(
        xaxis=dict(
            rangeselector=dict(
            ),
            rangeslider=dict(
                visible=True
            ),
            type="category",
            autorange=False,
            range=(current_time, current_time + 30)
        )
    )
    return fig

主仪表板应用程序

import dash_core_components as dcc

     app.layout = html.Div(

         children=[
             
               dcc.Interval(id="interval-updating-graphs", interval=1000, n_intervals=0),

               html.Div(
                            className="video-outer-container",
                            children=html.Div(
                                className="video-container",
                                children=player.DashPlayer(
                                    id="video-display",
                                    url="https://www.youtube.com/watch?v=9F5FdcVmLOY",#"http://0.0.0.0:8000/PycharmProjects/dash-maf-viz/data/videos/FILE_MAF_20200302T235220Z_SNL-4512-HD.mp4",#"https://www.youtube.com/watch?v=9F5FdcVmLOY",
                                    controls=True,
                                    playing=True,
                                    volume=1,
                                    width="100%",
                                    height="100%",
                                    seekTo=26
                                ),
                            ),
                        ),

                html.Div(
                  id="tags-timeline",
                  className="eight columns",
                  children=[
                     dcc.Graph(id='tags-timeline-graph'),
                   ]
                )
            )

认为这个回调会通过每秒用不同的起点重绘图形来自动滚动。(这里不包括:我还尝试每 30 秒调用一次 maketimeline() 以防出现延迟,但仍然没有重绘。)

@app.callback(
    [Output('tags-timeline-graph', 'figure')],
    [Input('video-display', 'currentTime')])
def update_timeline(currentTime):
    if currentTime:
        pass
    else:
        currentTime=0
    return make_timeline(df, currentTime)

标签: pythonsvgplotlyplotly-dash

解决方案


推荐阅读