如何在Shiny中自动播放Plotly图表?

huangapple go评论74阅读模式
英文:

How to autoplay a Plotly chart in Shiny?

问题

我有以下带有两个Plotly中的动画条形图的Shiny应用程序。我希望它们在加载时自动播放(如此处所示)。我需要它们只播放一次(最好同时),只是为了给出条形图“加载”的印象,之后我就不需要它们再次动画化,所以我会隐藏按钮。

这个答案展示了一种对我来说复杂的方法,我无法将其调整为我的应用程序。然而,它提到了“实际上可能不需要动画,因为数据点不在移动”,这对我可能有效,因为my_df的相关值只是第一个观测值(它对应于我的最后一帧,因为其他帧只是为了使条形图动画化而添加的)。

我还在plotly.github.io的这篇文章中找到了一个带有auto_play参数的函数,它似乎可以做我需要的事情,但我不知道在哪里或如何使用它。

如果有助于其他人提出解决方案,我在这里列出了一些相关问题的帖子(这个是针对dash-python的这个帖子中的OP请求以Shiny动作按钮触发播放的方式 - 这可能有助于找出以编程方式触发动画的方法)。

对我来说,任何选项(自动播放,以编程方式触发动画或不涉及plotly动画的解决方案)都可以。

这是我的代码:

library(shiny)
library(plotly)

my_df <- data.frame(
    vals = c(39, 0, 3.9, 7.8, 11.7, 15.6, 19.5, 23.4, 27.3, 31.2), 
    indic = rep("A", times = 10), 
    frame = c(10, 1, 2, 3, 4, 5, 6, 7, 8, 9)
)

ui <- fluidPage(plotlyOutput("first_plot", width = "50%"),
                plotlyOutput("second_plot", width = "50%"))

server <- function(input, output, session) {
    output$first_plot <- renderPlotly({
        plot_ly( data = my_df, y = ~indic, frame = ~frame, type = "bar", height = 200) %>%
            add_trace(x = ~vals) %>%
            layout(barmode = "stack") 
    }) 
    output$second_plot <- renderPlotly({
        plot_ly( data = my_df, y = ~indic, frame = ~frame, type = "bar", height = 200) %>%
            add_trace(x = ~vals) %>%
            layout(barmode = "stack") 
    }) 
}

shinyApp(ui, server)
英文:

I have the following Shiny app with two animated barplots in plotly. I want them to play automatically upon loading (as in here, for instance). I need them to play only once (hopefully at the same time), just to give the impression that the bars "load", after that I don't need them to be animated anymore, so I'll have the buttons hidden.

This answer shows a complicated (for me) way of doing so which I have not been able to adapt to my app. However, it mentions that "animation might not actually be necessary for this example since the data points are not moving.", which might work for me as the relevant value of my_df is only the first observation (which corresponds my last frame, as the other frames were only added to animate the bar).

I've also found this plotly.github.io entry where they mention a function with an auto_play argument which seems to do what I need, but I don't know where or how to use it.

In case it helps anyone come up with a solution I list here a couple posts with related questions (this one is for dash-python, and in this one the OP asks for a way to press play using a shiny action button - which might help figure out a way of programmatically trigger the animation).

Any of the options (autoplaying, triggering the animation programmatically or a solution not involving plotly animation) works for me.

Here's my code:

library(shiny)
library(plotly)


my_df &lt;- data.frame(
    vals = c(39, 0, 3.9, 7.8, 11.7, 15.6, 19.5, 23.4, 27.3, 31.2), 
    indic = rep(&quot;A&quot;, times = 10), 
    frame = c(10, 1, 2, 3, 4, 5, 6, 7, 8, 9))

ui &lt;- fluidPage(plotlyOutput(&quot;first_plot&quot;, width = &quot;50%&quot;),
                plotlyOutput(&quot;second_plot&quot;, width = &quot;50%&quot;))

server &lt;- function(input, output, session) {
    output$first_plot &lt;- renderPlotly({
        plot_ly( data = my_df, y = ~indic, frame = ~frame, type = &quot;bar&quot;, height = 200) %&gt;% 
            add_trace(x = ~vals) %&gt;% 
            layout(barmode = &quot;stack&quot;) 
    }) 
    output$second_plot &lt;- renderPlotly({
        plot_ly( data = my_df, y = ~indic, frame = ~frame, type = &quot;bar&quot;, height = 200) %&gt;% 
            add_trace(x = ~vals) %&gt;% 
            layout(barmode = &quot;stack&quot;) 
    }) 
}

shinyApp(ui, server)

答案1

得分: 1

你可以使用JavaScript的onRender函数来运行动画。每当图表渲染时,动画将播放。

英文:

You can run the animation with JavaScript with the help of the onRender function. The animation will be played whenever the chart is rendered.

library(plotly)
library(htmlwidgets)

df &lt;- data.frame(
  x = c(1,2,1), 
  y = c(1,2,1), 
  f = c(1,2,3)
)
df %&gt;%
  plot_ly(
    x = ~x,
    y = ~y,
    frame = ~f,
    type = &#39;scatter&#39;,
    mode = &#39;markers&#39;,
    marker = list(size = 20),
    showlegend = FALSE
  ) %&gt;% 
  animation_button(visible = TRUE) %&gt;%
  onRender(&quot;
        function(el,x) {
          Plotly.animate(el);
        }&quot;)

huangapple
  • 本文由 发表于 2023年6月9日 05:05:40
  • 转载请务必保留本文链接:https://go.coder-hub.com/76435688.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定