R Highcharter：来自单点的 Select 类别

Question

在 R 中使用高图（使用 highcharter 包）当 selecting 任何单个点时，我试图 select 单个类别的所有点。下面的代码允许 select 在堆叠条形图中插入单个堆叠切片。我希望通过单击任何堆叠条切片将整个堆叠条变为 selected/deselected。

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], b_alt = LETTERS[11:20], c = 11:20, d = 21:30, e = 31:40)

  output$hcontainer <- renderHighchart({      

    canvasClickFunction <- JS("function(event) {Shiny.onInputChange('canvasClicked', [this.name, event.point.series.chart.series[0].options.additionalInfo[event.point.index]]);}")
    legendClickFunction <- JS("function(event) {Shiny.onInputChange('legendClicked', this.name);}")

    highchart() %>% 
      hc_xAxis(categories = a$b) %>% 
      hc_add_series(name = "c", additionalInfo = a$b_alt, data = a$c, color = "red") %>%
      hc_add_series(name = "d", data = a$d) %>% 
      hc_add_series(name = "e", data = a$e) %>%
      hc_plotOptions(series = list(stacking = TRUE, allowPointSelect = TRUE, 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)

Answer 1

你可以在点点击时触发事件（让我们称之为点击点clickedPoint）循环遍历所有系列然后遍历所有点，检查点是否与我们的 clickedPoint 如果是，select 它使用 point.select() 方法。

主要代码如下：

hc_plotOptions(series = list(stacking = TRUE, events = list(click = canvasClickFunction, legendItemClick = legendClickFunction), point = list(events = list(click = JS(
    "function() {
      var clickedPoint = this;
        clickedPoint.series.chart.series.forEach(function(series) {
          series.points.forEach(function(point) {
            if (point.category === clickedPoint.category) {
              if (point.selected) {
                point.select(false, true)
              } else {
                point.select(true, true)
              }
            }
          })
        })
      }"
  ))))) %>%

这是完整的代码：

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], b_alt = LETTERS[11:20], c = 11:20, d = 21:30, e = 31:40)

  output$hcontainer <- renderHighchart({      

    canvasClickFunction <- JS("function(event) {Shiny.onInputChange('canvasClicked', [this.name, event.point.series.chart.series[0].options.additionalInfo[event.point.index]]);}")
    legendClickFunction <- JS("function(event) {Shiny.onInputChange('legendClicked', this.name);}")

highchart() %>% 
  hc_xAxis(categories = a$b) %>% 
  hc_add_series(name = "c", additionalInfo = a$b_alt, data = a$c, color = "red") %>%
  hc_add_series(name = "d", data = a$d) %>% 
  hc_add_series(name = "e", data = a$e) %>%
  hc_plotOptions(series = list(stacking = TRUE, events = list(click = canvasClickFunction, legendItemClick = legendClickFunction), point = list(events = list(click = JS(
    "function() {
      var clickedPoint = this;
        clickedPoint.series.chart.series.forEach(function(series) {
          series.points.forEach(function(point) {
            if (point.category === clickedPoint.category) {
              if (point.selected) {
                point.select(false, true)
              } else {
                point.select(true, true)
              }
            }
          })
        })
      }"
  ))))) %>% 
  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)

API: https://api.highcharts.com/class-reference/Highcharts.Point#select https://api.highcharts.com/highcharts/plotOptions.column.point.events.click

带有纯 JS 实现的 jsFiddle：https://jsfiddle.net/BlackLabel/p135s4vm/

R Highcharter：来自单点的 Select 类别

R Highcharter: Select category from a single point

r

highcharts

r-highcharter