htmlwidgets的onRender()函数中的Shiny ActionButton()输出

Question

我的目标是创建一个脚本，其中最初显示一个空白绘图图。如果用户单击一个闪亮的动作按钮，上面写着"添加点"，则将通过htmlwidgets的onRender((函数添加到绘图图中。这将是有效的，因为当用户选择Shiny ActionButton时，背景空白绘图无需重新插图。

但是，为了使我实现这一目标，我需要找出一种直接指示Shiny ActionButton的更改的方法"(根本不会改变。我将两个评论的行作为下面的OnRender((代码中的If语句作为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)

注意：这类似于我之前提出的一个问题(在htmlwidgets的onrender((函数中使用Shiny ActionButton((函数(。但是，我简化了这个问题，希望确定是否有一个简单的答案。

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);
  })
}