简体   繁体   English

如何创建 highcharter 事件函数以在 Shiny R 中创建“下拉函数”

[英]How to create a highcharter event function to create a “dropdown function” in Shiny R

I'm building a shiny app and one of the things I want to accomplish is to create a dropdown menu.我正在构建一个shiny应用程序,我想要完成的一件事是创建一个下拉菜单。 I want to plot the labour variable as a function of the year variable for the different levels.我想将劳动力变量绘制为不同级别的年份变量的函数。 See below for a sample dataframe:请参阅下面的示例数据框:

year level_2 level_3 labour
1  2013      10     101      1
2  2014      10     101      5
3  2015      10     101     10
4  2016      10     101     20
5  2017      10     101     25
6  2013      11     111      5
7  2014      11     111     10
8  2015      11     111     20
9  2016      11     111     25
10 2017      11     111     30
11 2013      10     102      2
12 2014      10     102      6
13 2015      10     102     11
14 2016      10     102     21
15 2017      10     102     26
16 2013      11     112      6
17 2014      11     112     11
18 2015      11     112     21
19 2016      11     112     26
20 2017      11     112     31

I made a simplified version of the app below.我制作了以下应用程序的简化版本。 I found this answer and I would like to perform a similar action.我找到了这个答案,我想执行类似的操作。 The point is I'm stuck with writing the correct highcharter event function, which I can use with Shiny.onInputChange() .关键是我坚持编写正确的 highcharter 事件函数,我可以将它与Shiny.onInputChange() I would like to let the user click on the graph, save that value and use that value to filter and create a new highcharter graph.我想让用户点击图表,保存该值并使用该值来过滤和创建一个新的 highcharter 图表。 In this case: the first graph on level2 contains two time series with the groups 10 and 11. The user should be able to click on the timeserie named 10 and see the timeseries 101 and 102 (which is characterized as level_3).在本例中:level2 上的第一个图包含两个时间序列,组为 10 和 11。用户应该能够单击名为 10 的时间序列并查看时间序列 101 和 102(其特征为 level_3)。

Any help would be much appreciated!任何帮助将非常感激! Another solution outside the highcharter event fuction would be allright as well. highcharter 事件函数之外的另一个解决方案也可以。

    library(shiny)
library(dplyr)
library(highcharter)

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

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

df <- data.frame(year = c(rep(c(2013, 2014, 2015, 2016, 2017), 4)),
                 level_2 = c(rep(c(10, 10, 10, 10, 10, 11, 11, 11, 11, 11),2)),
                 level_3 = c(101, 101, 101, 101, 101, 111, 111, 111, 111, 111,
                             102, 102, 102, 102, 102, 112, 112, 112, 112, 112),
                 labour = c(1, 5, 10, 20, 25, 5, 10, 20, 25, 30,
                            2, 6, 11, 21, 26, 6, 11, 21, 26, 31))

  output$hcontainer <- renderHighchart({

    temp <- df %>%
      group_by(year, level_2) %>%
      summarize(Sum = sum(labour)) %>%
      arrange(level_2)

    hchart(temp, "line", hcaes(x = year, y = Sum, group = level_2))

  })

  #second highcharter which should appear when user clicked on the serie named 10
  output$hcontainer2 <- renderHighchart({

    temp2 <- df %>%
      filter(level_2 == 10) %>% # filter selected by click
      group_by(year, level_3) %>%
      summarize(Sum = sum(labour)) %>%
      arrange(level_3)

    hchart(temp2, "line", hcaes(x = year, y = Sum, group = level_3))

  })


}


shinyApp(ui = ui, server = server)

We can create specific event named canvasClicked as shown below, which will bind it to the points you clicked on chart1.我们可以创建名为canvasClicked特定事件,如下所示,它将绑定到您在 chart1 上单击的点。 then we are going to add an event listener to highchart in hc_plotOptions .然后我们将在hc_plotOptions向 highchart 添加一个事件侦听hc_plotOptions If you would like to use the value in other funcitons you can access it via input$canvasClicked[[1]] , note that this is a list and you should index appropriately如果您想在其他函数中使用该值,您可以通过input$canvasClicked[[1]]访问它,请注意这是一个列表,您应该适当地索引

library(shiny)
library(dplyr)
library(highcharter)

ui <- shinyUI(
  fluidPage(
    column(width = 6, highchartOutput("hcontainer", height = "500px")),
    column(width = 6, highchartOutput("hcontainer2", height = "500px"))
  )
)

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

  df <- data.frame(year = c(rep(c(2013, 2014, 2015, 2016, 2017), 4)), 
                   level_2 = c(rep(c(10, 10, 10, 10, 10, 11, 11, 11, 11, 11),2)), 
                   level_3 = c(101, 101, 101, 101, 101, 111, 111, 111, 111, 111, 
                               102, 102, 102, 102, 102, 112, 112, 112, 112, 112), 
                   labour = c(1, 5, 10, 20, 25, 5, 10, 20, 25, 30,
                              2, 6, 11, 21, 26, 6, 11, 21, 26, 31))

  output$hcontainer <- renderHighchart({ 

    temp <- df %>% 
      group_by(year, level_2) %>% 
      summarize(Sum = sum(labour)) %>% 
      arrange(level_2) 
    hchart(temp, "line", hcaes(x = year, y = Sum, group = level_2)) %>%
      hc_plotOptions(series = list(events = list(click = canvasClickFunction)))

  })

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


  #second highcharter which should appear when user clicked on the serie named 10
  output$hcontainer2 <- renderHighchart({ 
    req(input$canvasClicked[[1]])
    temp2 <- df %>% 
      filter(level_2 == input$canvasClicked[[1]]) %>% # filter selected by click
      group_by(year, level_3) %>% 
      summarize(Sum = sum(labour)) %>% 
      arrange(level_3)
    hchart(temp2, "line", hcaes(x = year, y = Sum, group = level_3)) %>%
    hc_title(text = paste0("Thank you PorkChop, I clicked ",input$canvasClicked[[1]]))

  })

} 


shinyApp(ui = ui, server = server)

在此处输入图片说明

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM