【问题标题】:How to know information about the clicked bar in highchart column r shiny plot如何知道关于 highchart 列 r 闪亮图中的点击条的信息
【发布时间】:2016-09-09 14:10:52
【问题描述】:

我想在用户单击列高图的条形图时检测一些信息。我需要知道点击栏的名称和类别,如果在图例中选择了名称,或者是否点击了背景。名称部分还可以,但我无法发现我必须编写哪些 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        
  })
}

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

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

谢谢

【问题讨论】:

    标签: javascript jquery r highcharts shiny


    【解决方案1】:

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

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

    内部的函数总是必须有一个event 参数。在highcharts 文档中,这个事件有几个属性,最重要的是point。 JavaScript 中的属性可以通过点. 访问,就像您在R 中使用$ 一样。所以event.point 将是您单击的点。

    现在,这个点也有很多属性,其中大部分都不是很有用。但您可能想要使用的可能值是 categorycolorxy 用于各自的轴值。所以如果你想知道点击点的y值,event.point.y就是命令。另一个例子:在您的情况下,event.point.x 将产生x 值,在条形图的情况下不是category,而是category 的索引(这里从0 开始计数)。在前面的示例(您的代码 sn-p)中,我还使用了对象 thisthis 代表被点击的series。这只是一个捷径,因为您也可以通过event.point.series 获取该系列。而且这个系列本身有很多属性,比如name

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

    这是第一部分。现在,您想将选择传达给闪亮的应用程序。为此,Shiny 内置了信息渠道。一种是 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) 
    

    【讨论】:

    • 非常好的答案!
    • 您好,非常相似,但通过向下钻取更深一层。你能提供什么帮助吗? stackoverflow.com/questions/55148512/…
    • 我想为高级地图实现类似的功能。如何访问渲染地图的多边形名称?我希望在您的答案{Shiny.onInputChange('canvasClicked', [this.name, event.point.category]);} 上调整此特定代码行。顺便说一句,很棒的答案和解释!
    • 您能否发布一个有助于重现您所说的情况的问题?这些解决方案往往因情况而异。
    猜你喜欢
    • 2016-12-23
    • 1970-01-01
    • 2016-09-12
    • 1970-01-01
    • 1970-01-01
    • 2021-08-12
    • 1970-01-01
    • 2019-03-30
    • 1970-01-01
    相关资源
    最近更新 更多