htmlWidgets 的 onRender() 函数中的闪亮 actionButton() 输出

Question

我的目标是创建一个最初显示空白绘图的脚本。如果用户点击一个显示 "Add points" 的 Shiny actionButton，那么点将通过 htmlWidgets 的 onRender() 函数添加到绘图中。这将是有效的，因为当用户选择 Shiny actionButton 时，不需要重新绘制背景空白绘图。

但是，为了实现这一点，我需要想出一种方法来将 Shiny actionButton 中的变化直接指示到 onRender() 函数中，以便空白绘图（在下面的代码中称为"pP") 根本不会改变。我在下面的 onRender() 代码中将两条注释行作为 if 语句，以显示我的目标。

我知道有一个名为 Shiny.onInputChange('variable', variable) 的函数可以在 onRender() 函数内部调用，以保存在 onRender() 内部创建的变量，以便它可以像 onRender() 函数之外的闪亮输入一样使用。所以，我想我正在寻找相反的东西（将闪亮的输入值直接传输到 onRender() 函数）。

ui <- shinyUI(fluidPage(
  uiOutput("add"),
  plotlyOutput("myPlot", height = 700)
))

server <- shinyServer(function(input, output) {

  output$add <- renderUI({
    actionButton("addButton", "Add points")
  })

  output$myPlot <- renderPlotly({
    p <- ggplot(mtcars, aes(x = wt, y = mpg)) + geom_blank()
    pP <- ggplotly(p)

    pP %>% onRender("
    function(el, x, data) {

//if (input$addButton selected){
      var Traces = [];
      var trace = {
      x: data.x,
      y: data.y,
      mode: 'markers',
      marker: {
      color: 'green',
      size: 6
      },
      hoverinfo: 'none'
      };
      Traces.push(trace);
      Plotly.addTraces(el.id, Traces);
//}
    }", data = list(x = mtcars$wt, y = mtcars$mpg))
  })      
})

shinyApp(ui, server)

注意：这与我之前提出的问题 (Using Shiny actionButton() function in onRender() function of htmlWidgets) 类似。但是，我简化了问题并希望确定是否有可能可用的简单答案。

Answer 1

您可以尝试直接使用一些 jQuery 来响应用户点击按钮。 onRender 将是：

function(el, x, data) {
  $('#addButton').on('click',function() {
    var Traces = [];
    var trace = {
      x: data.x,
      y: data.y,
      mode: 'markers',
      marker: {
        color: 'green',
        size: 6
      },
      hoverinfo: 'none'
    };
    Traces.push(trace);
    Plotly.addTraces(el.id, Traces);
  })
}

为此，需要先创建按钮，因此我将您的 ui.R 更改为：

ui <- shinyUI(fluidPage(
  actionButton("addButton", "Add points"),
  plotlyOutput("myPlot", height = 700)
))

编辑：如果你想保留renderUI，你可以使用事件委托在#add中绑定你的功能按钮div:

function(el, x, data) {
  $('#add').on('click','button',function() {
    var Traces = [];
    var trace = {
      x: data.x,
      y: data.y,
      mode: 'markers',
      marker: {
        color: 'green',
        size: 6
      },
      hoverinfo: 'none'
    };
    Traces.push(trace);
    Plotly.addTraces(el.id, Traces);
  })
}

htmlWidgets 的 onRender() 函数中的闪亮 actionButton() 输出

Shiny actionButton() output in onRender() function of htmlWidgets

onrender

shiny

plotly

htmlwidgets