javascript - 如何检测 highchart 列 r Shiny 图中的条形中的多次点击

Question

当我单击以禁用列并在单击后立即启用列时，我无法检测到第二个事件。如何检测列或图例是否被禁用和启用(反之亦然)，而中间没有任何其他不同的事件？

另一个问题是:是否可以检测到对情节背景的点击？

library("shiny")
library("highcharter")

ui <- shinyUI(
  fluidPage(
    column(width = 8, highchartOutput("hcontainer", height = "500px")),
    column(width = 4, textOutput("text"))
  )
)

server <- function(input, output) {      

  a <- data.frame(b = LETTERS[1:10], c = 11:20, d = 21:30, e = 31:40)

  output$hcontainer <- renderHighchart({      

    canvasClickFunction <- JS("function(event) {Shiny.onInputChange('canvasClicked', [this.name, event.point.category]);}")
    legendClickFunction <- JS("function(event) {Shiny.onInputChange('legendClicked', this.name);}")

    highchart() %>% 
      hc_xAxis(categories = a$b) %>% 
      hc_add_serie(name = "c", data = a$c) %>%
      hc_add_serie(name = "d", data = a$d) %>% 
      hc_add_serie(name = "e", data = a$e) %>%
      hc_plotOptions(series = list(stacking = FALSE, events = list(click = canvasClickFunction, legendItemClick = legendClickFunction))) %>%
      hc_chart(type = "column")

  })      

  makeReactiveBinding("outputText")

  observeEvent(input$canvasClicked, {
    outputText <<- paste0("You clicked on series ", input$canvasClicked[1], " and the bar you clicked was from category ", input$canvasClicked[2], ".") 
  })

Answer 1

在 Shiny 中使用点击事件时，有时需要再次获取具有相同值的相同事件警报。这是 Shiny 所固有的，只有值的变化才会被提醒，而 react 性只会对变化使用react。 解决此问题的一个简单方法是不仅发送所需的值，还发送随机数或当前时间。每次都会改变的东西。

因此，当多次点击同一个系列时，您的图例点击的可能性是将JS函数更改为

Shiny.onInputChange('legendClick', [this.name, Math.random()]);

并在代码中进一步使用 input$legendClick[1] 访问系列名称。

但是，就您而言，您还想获取图例项的状态。这当然是随点击而变化的事情。因此，如果我们将其与名称一起发送，则输入值将始终发生变化。所以不需要上面的一般建议。图例状态存储在 event.target.visible 下的 event 中。在那里，您可以看到单击的系列在单击时具有什么可见性状态。这意味着在获得点击事件后您将获得相反的可见性。

代码如下:

library("shiny")
library("highcharter")

ui <- shinyUI(
  fluidPage(
    column(width = 8, highchartOutput("hcontainer", height = "500px")),
    column(width = 4, textOutput("text"))
  )
)

server <- function(input, output) {      

  a <- data.frame(b = LETTERS[1:10], c = 11:20, d = 21:30, e = 31:40)

  output$hcontainer <- renderHighchart({      

    canvasClickFunction <- JS("function(event) {Shiny.onInputChange('canvasClicked', [this.name, event.point.category]);}")
    legendClickFunction <- JS("function(event) {Shiny.onInputChange('legendClicked', [this.name, event.target.visible]);}")

    highchart() %>% 
      hc_xAxis(categories = a$b) %>% 
      hc_add_serie(name = "c", data = a$c) %>%
      hc_add_serie(name = "d", data = a$d) %>% 
      hc_add_serie(name = "e", data = a$e) %>%
      hc_plotOptions(series = list(stacking = FALSE, events = list(click = canvasClickFunction, legendItemClick = legendClickFunction))) %>%
      hc_chart(type = "column")

  })      

  makeReactiveBinding("outputText")

  observeEvent(input$canvasClicked, {
    outputText <<- paste0("You clicked on series ", input$canvasClicked[1], " and the bar you clicked was from category ", input$canvasClicked[2], ".") 
  })

  observeEvent(input$legendClicked, {
    # Visibility of target. When deselecting, the target was visible at the moment of click.
    seriesStatus <- switch(input$legendClicked[2], "FALSE" = "visible", "TRUE" = "invisible")
    outputText <<- paste0("You clicked into the legend and selected series ", input$legendClicked[1], " and this Series is now ", seriesStatus, ".")
  })

  output$text <- renderText({
    outputText      
  })
}

shinyApp(ui, server) 

另一件事可能会帮助您了解您可以做的其他事情，那就是查看 JavaScript 控制台。运行 Shiny 应用程序时，右键单击显示窗口，按 Inspect 打开 RStudio 检查器。在那里，其中一个附加程序是Console，您可以在其中获取所有客户端错误/警告消息。现在，一个有用的 JavaScript 命令是 console.log，它会打印到这个特定的控制台。因此，在某些点击函数中，尝试添加命令 console.log(event); 并在下次 Shiny 应用程序启动时打开 JavaScript 控制台。可以完整地检查该事件，以查看单击事件的哪些部分是有用的。 (我通过搜索获得了可见性属性。)

对于第二个更广泛的问题:整个图表有一个点击事件，可以将其添加到 R 中的 hc_chart 函数中。就像其他点击事件一样。更多信息可查询here 。