R Highcharter多堆叠柱状图同组高亮及列内分组排序实现咨询

功能1：按VALUE值排序堆叠顺序 #

直接在hc_plotOptions的column配置中添加stackSorting参数即可实现单根堆叠柱内的分组按数值自动排序，可通过sortDirection控制升序/降序：

• 降序排列：sortDirection = "desc"
• 升序排列：sortDirection = "asc"

功能2：同分组同步高亮效果 #

通过注入Highcharts原生JS事件实现：监听系列的mouseOver和mouseOut事件，悬浮时将当前系列所有点统一设置为悬浮状态，移出时重置状态即可实现跨柱同分组同步高亮。

完整可运行代码 #

library(highcharter)
library(dplyr)

## Sample dataframe
YEAR <- c(2019,2020,2021) 
CATEGORY <- c("dog", "cat", "mouse")
SAMPLE_DATA <- expand.grid(YEAR, CATEGORY)
names(SAMPLE_DATA)[1] <- "CATEGORY"
names(SAMPLE_DATA)[2] <- "YEAR"
SAMPLE_DATA$VALUE <- runif(n = 9, min = 400, max = 900) 

## Chart 
SAMPLE_DATA <- SAMPLE_DATA %>% 
  group_by(YEAR, CATEGORY) %>% 
  summarise(VALUE = sum(VALUE, na.rm = T)) 

highchart() %>%
  hc_add_series(data = SAMPLE_DATA, hcaes(x = YEAR, y = round(VALUE,0), group = CATEGORY), type = "column") %>%
  hc_plotOptions(
    column = list(
      stacking = "normal",
      # 堆叠按值排序配置，调整sortDirection可切换升序降序
      stackSorting = list(
        enabled = TRUE,
        sortDirection = "desc"
      )
    ),
    series = list(
      # 同步高亮事件配置
      events = list(
        mouseOver = JS("function() {
          this.points.forEach(function(point) {
            point.setState('hover');
          });
        }"),
        mouseOut = JS("function() {
          this.points.forEach(function(point) {
            point.setState('');
          });
        }")
      )
    )
  )

内容的提问来源于stack exchange，提问作者Lorenzo