Highcharter - 单击事件以过滤图表中的数据

Posted

技术标签:

【中文标题】Highcharter - 单击事件以过滤图表中的数据【英文标题】:Highcharter - Click event to filter data from graph 【发布时间】:2018-07-30 23:03:56 【问题描述】:

我正在使用highcharter,我希望能够在我的图表中添加一个click event,当我点击一个条形(无论是顶层还是向下钻取)时,它会过滤它下面的数据表以包含相同的信息。

我已经检查了这个 SO question,它显示了如何实现 Java 到 R 以包含点击功能,但没有显示如何使用该信息来过滤数据/选择正确的数据集。

Hyperlink bar chart in Highcharter

任何帮助将不胜感激!示例代码如下:

library (shiny)
library (shinydashboard)
library (dplyr)
library (tibble)
library (highcharter)
library(shinyjs)
library (DT)

rm(list=ls())
header <- dashboardHeader()
sidebar <- dashboardSidebar()

body <- dashboardBody(
  fluidRow(
    box(
      tags$head(tags$style(html("#OnTimeheight:25vh !important; "))),
      title = "On Time", status = "primary", solidHeader = TRUE, width = 6,
      highchartOutput("OnTime")
    )
  ),
  fluidRow(
    box(
      title = "WIP Table", status = "primary", solidHeader = TRUE,
      DT::dataTableOutput("Table")
    )
  )
)

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output) 

  Customer <- c("England", "France", "US", "Canada", "England", "France", "US", "Canada", "England")
  OnTime <- c("On Time", "On Time", "Overdue", "On Time", "Overdue", "On Time", "Overdue","On Time", "On Time")
  Gate <- c(1,2,3,2,3,2,1,2,3)
  Quantity <- c(1,1,1,1,1,1,1,1,1)

  data <- data.frame(Customer,OnTime,Gate, Quantity)

  output$OnTime <- renderHighchart(

    Lvl1GroupingStatus <- aggregate(data$Quantity, by = list(data$OnTime),FUN=sum)
    Lvl1dfStatus <- data_frame(name = Lvl1GroupingStatus$Group.1,y = Lvl1GroupingStatus$x,drilldown = tolower(name))

    Lvl2WIPOverDue <- data[data$OnTime == "Overdue",]
    Lvl2WIPOverDueb <- aggregate(Lvl2WIPOverDue$Quantity, by = list(Lvl2WIPOverDue$Customer),FUN=sum)
    Lvl2dfWIPOverDue <- arrange(data_frame(name = Lvl2WIPOverDueb$Group.1,value = Lvl2WIPOverDueb$x),desc(value))

    Lvl2WIPOnTime <- data[data$OnTime == "On Time",]
    Lvl2WIPOnTimeb <- aggregate(Lvl2WIPOnTime$Quantity, by = list(Lvl2WIPOnTime$Customer),FUN=sum)
    Lvl2dfWIPOnTime <- arrange(data_frame(name = Lvl2WIPOnTimeb$Group.1,value = Lvl2WIPOnTimeb$x),desc(value))

    highchart() %>%
      hc_chart(type = "column") %>%
      hc_xAxis(type = "category") %>%
      hc_legend(enabled = FALSE) %>%
      hc_yAxis(gridLineWidth = 0) %>%
      hc_plotOptions(series = list(column = list(stacking = "normal"), borderWidth=0,dataLabels = list(enabled = TRUE))) %>%
      hc_add_series(data=Lvl1dfStatus,name="Status", colorByPoint = TRUE,colors = c("#003395","#D20000")) %>%

      hc_drilldown(
        allowPointDrilldown = TRUE,
        series = list(
          list(id = "overdue", data = list_parse2(Lvl2dfWIPOverDue), name="Customer"),
          list(id = "on time", data = list_parse2(Lvl2dfWIPOnTime), name="Customer")

        )
      )
  )


  output$Table <- DT::renderDataTable( data)



#Combines Dasboard and Data together
shinyApp(ui, server)

【问题讨论】:

【参考方案1】:

在这篇 SO 帖子的帮助下解决了这个问题!

How to know information about the clicked bar in highchart column r shiny plot

希望这对其他人有所帮助!

library (shiny)
library (shinydashboard)
library (dplyr)
library (tibble)
library (highcharter)
library(shinyjs)
library (DT)

rm(list=ls())
header <- dashboardHeader()
sidebar <- dashboardSidebar()

body <- dashboardBody(
  fluidRow(
    box(
      tags$head(tags$style(HTML("#OnTimeheight:20vh !important; "))),
      title = "On Time", status = "primary", solidHeader = TRUE, width = 6,
      highchartOutput("OnTime")
    )
  ),
  fluidRow(
    box(
      title = "WIP Table", status = "primary", solidHeader = TRUE,
      DT::dataTableOutput("Table")
    )
  ),
  fluidRow(
    box(
      textOutput("text")
    )
  )
)

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output) 

  Customer <- c("England", "France", "US", "Canada", "England", "France", "US", "Canada", "England")
  OnTime <- c("On Time", "On Time", "Overdue", "On Time", "Overdue", "On Time", "Overdue","On Time", "On Time")
  Gate <- c(1,2,3,2,3,2,1,2,3)
  Quantity <- c(1,1,1,1,1,1,1,1,1)

  data <- data.frame(Customer,OnTime,Gate, Quantity)

  output$OnTime <- renderHighchart(

    Lvl1GroupingStatus <- aggregate(data$Quantity, by = list(data$OnTime),FUN=sum)
    Lvl1dfStatus <- data_frame(name = Lvl1GroupingStatus$Group.1,y = Lvl1GroupingStatus$x,drilldown = tolower(name))

    Lvl2WIPOverDue <- data[data$OnTime == "Overdue",]
    Lvl2WIPOverDueb <- aggregate(Lvl2WIPOverDue$Quantity, by = list(Lvl2WIPOverDue$Customer),FUN=sum)
    Lvl2dfWIPOverDue <- arrange(data_frame(name = Lvl2WIPOverDueb$Group.1,value = Lvl2WIPOverDueb$x),desc(value))

    Lvl2WIPOnTime <- data[data$OnTime == "On Time",]
    Lvl2WIPOnTimeb <- aggregate(Lvl2WIPOnTime$Quantity, by = list(Lvl2WIPOnTime$Customer),FUN=sum)
    Lvl2dfWIPOnTime <- arrange(data_frame(name = Lvl2WIPOnTimeb$Group.1,value = Lvl2WIPOnTimeb$x),desc(value))

    ClickFunction <- JS("function(event) Shiny.onInputChange('Clicked', event.point.name);")

    highchart() %>%
      hc_chart(type = "column") %>%
      hc_xAxis(type = "category") %>%
      hc_legend(enabled = FALSE) %>%
      hc_yAxis(gridLineWidth = 0) %>%
      hc_plotOptions(series = list(column = list(stacking = "normal"), 
                                   borderWidth=0,
                                   dataLabels = list(enabled = TRUE),
                                   events = list(click = ClickFunction)
                                   )
                     ) %>%
      hc_add_series(data=Lvl1dfStatus,name="Status", colorByPoint = TRUE,colors = c("#003395","#D20000")) %>%

      hc_drilldown(
        allowPointDrilldown = TRUE,
        series = list(
          list(id = "overdue", data = list_parse2(Lvl2dfWIPOverDue), name="Customer"),
          list(id = "on time", data = list_parse2(Lvl2dfWIPOnTime), name="Customer")

        )
      )
  )

  makeReactiveBinding("outputText")

  observeEvent(input$Clicked, 
    outputText <<- paste0(input$Clicked)
    )

  output$text <- renderText(
    outputText
    )

  output$Table <- DT::renderDataTable(

    temp <- data
    rowcheck <- temp[temp$OnTime == input$Clicked,]

    if (nrow(rowcheck)!=0) 
      temp <- temp[temp$OnTime == input$Clicked,]
      Lvl1Click <<- input$Clicked
    
    else 
      temp <- temp[temp$OnTime == Lvl1Click,]
      temp <- temp[temp$Customer == input$Clicked,]
    

    return (temp)

    )


#Combines Dasboard and Data together
shinyApp(ui, server)

【讨论】:

以上是关于Highcharter - 单击事件以过滤图表中的数据的主要内容,如果未能解决你的问题,请参考以下文章

R Highcharter:用同步缩放/工具提示分隔图例或多个图表的巧妙方法?

如何使用 Highcharter 创建两个独立的向下钻取图?

单击Kendo Grid中的“过滤器”按钮时会调用什么事件

R 闪亮并巧妙地获得图例点击事件

R Highcharter:工具提示自定义

谷歌图表上的点击事件