Question

我正在开发一个小型Dash应用程序，该应用程序在视频中以秒为单位在图表中显示平均得分。我希望能够在播放视频时在图表中显示移动的垂直线，即，如果视频位于第5秒，则该线应位于x = 5等。

我最初的想法是使用JavaScript添加shapes并更新图形，但是我不太了解，并且不确定如何将视频时间值传递给Python / Dash。

没有视频的应用示例：

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children = [

    html.Div(children = [
        html.Video(
            controls = True,
            id = 'movie_player',
        ),
    ]),
    html.Div(children = [
        dcc.Graph(
            id = 'mean_chart',
            figure = {
                'data': [go.Scatter(
                    x = [0,1,2,3,4,5,6,7,8,9,10],
                    y = [0,1,2,4,5,4,3,5,3,2,1],
                )],
                'layout': go.Layout(
                    xaxis = {
                        'title': 'Second',
                        'type': 'linear',
                    },
                    yaxis = {
                        'title': 'Average score',
                    },
                    shapes = [{
                        'type': 'line',
                        'x0': 3,
                        'y0': -1,
                        'x1': 3,
                        'y1': 6,
                    },]
                ),
            },
        ),
    ]),
])


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

我的图表在完整应用程序版本的@app.callback中。

我不确定JavaScript函数是否正确，也不确定该如何处理，即如何将值传递给x0中的x1和shapes：

var sec;

setInterval(function(){showChart(); }, 100);

function showChart(){
     ytplayer = document.getElementById("movie_player");
     sec = ytplayer.currentTime;
     return sec;
}

您能建议最好的方法吗？没有JS可能比使用shapes更好的方法吗？

谢谢！

根据视频进度在图表中移动垂直线

0 个答案: