javascript - 如何知道 highchart 列 r shiny plot 中点击栏的信息

Question

我想在用户点击列 Highcharts 的条形图时检测一些信息。如果在图例中选择了名称或者是否单击了背景，我需要知道单击栏的名称和类别。名称部分没问题，但我无法发现我必须编写哪个 JS 代码才能知道此类信息。

非常感谢

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({      

    myClickFunc <- JS("function(event) {Shiny.onInputChange('hcClicked', 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 = myClickFunc))) %>%
      hc_chart(type = "column")

  })      

  output$text <- renderText({
    input$hcClicked        
  })
}

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

另一个问题是:是否可以检测到绘图背景上的点击？

谢谢

Answer 1

这次我可能会更详细地介绍您可以做什么以及您有哪些可能性:

highchart 事件函数始终采用 JS("function(event) { ... }") 形式。 JS 代表 JavaScript 并阻止 R 解释其中的代码。幸运的是，JavaScript 看起来很像 R，即使您不懂任何 JavaScript，也可以更轻松地编写语句。

里面的函数总是要有一个event参数。从 highcharts 文档中可以看出，此事件有几个属性，其中最重要的是 point。 JavaScript 中的属性可以通过点 . 访问，就像您在 R 中使用 $ 一样。所以 event.point 将是重点你点击了。

现在，这个点还有很多属性，其中大部分都不是很有用。但是您可能想要使用的可能值是 category、color、x 和 y 各自的轴值。因此，如果您想知道单击点的 y 值，event.point.y 就是命令。另一个例子:在你的例子中，event.point.x 会产生 x 值，在条形图的情况下，它不是 category，但 category 的索引(此处从 0 开始计数)。在前面的示例(您的代码片段)中，我还使用了对象 this。 this 代表被点击的series。这只是一个快捷方式，因为您也可以通过 event.point.series 获取系列。该系列本身有很多属性，例如 name。

关于 JavaScript 的注意事项:JavaScript 中的列表(数组)是用 [ ... ] 括号创建的。我在下面的代码中使用它在一个命令中发送多个值。

这是第一部分。现在，您想将选择传达给 Shiny 的应用程序。为此，Shiny 内置了信息 channel 。一个是 JavaScript 函数 Shiny.onInputChange。这个函数有两个参数，第二个是你要发送的值。第一个是名称，稍后您要访问该名称下的值。所以用法总是Shiny.onInputChange('myVar', value)。现在这个值被发送到您的服务器并且可以在 input$myVar 下访问。在那里，您拥有与任何其他输入相同的规则。您可以将 input$myVar 放入响应式环境中，只要有新内容发送到 input$myVar，它们就会做出响应。

关于您的直接请求:要知道点击值属于哪个类别，可以通过稍微更改初始点击功能来实现。 (我重命名了函数以适应它们的功能。)上面的解释应该可以理解。第二个功能是点击图例，使用 highcharts 中内置的另一个事件“插槽”。 legendItemClick 的工作方式与普通的 click 相同，但只监听图例点击。还有一些可以分配的事件处理程序，即 mouseOver 如果您需要悬停事件。

好的，现在这里有一个示例代码，为我上面写的内容提供了一个工作示例:

最好的问候

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_series(name = "c", data = a$c) %>%
      hc_add_series(name = "d", data = a$d) %>% 
      hc_add_series(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, {
    outputText <<- paste0("You clicked into the legend and selected series ", input$legendClicked, ".")
  })

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

shinyApp(ui, server)