如何在R语言的highcharter中实现Highcharts多系列钻取？

我知道在JavaScript里已经有Highcharts钻取到多系列的解决方案，但我想用R语言的highcharter库来实现这个功能。我对JS不太熟悉，也刚接触highcharter，所以非常需要大家的帮助。

我写了一段实验性代码，虽然能运行，但没法实现预期的多系列图表钻取功能：

DATABrowser = list(
  list(y= 55.11 ,drilldown = list( 
    name = 'MSIE versions', 
    categories = list('MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'), 
    series = list(
      list( type = 'spline', name = 'MSIE versions 2000', data = list(10.85, 7.35, 33.06, 2.81) ),
      list( type = 'spline', name = 'MSIE versions 2010', data = list (1, 5, 10, 15) )
    ) 
  )),
  list(y = 21.6),
  list(y = 11.6),
  list(y = 7.3),
  list(y = 2.6) 
) 
categories = list('MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera') 
name = 'Browser brands' 

fn <-"function () { 
  var drilldown = this.drilldown; 
  var len = chart.series.length; 
  var name = null, catergories = drilldown.categories, data = drilldown, type =drilldown.type; 
  chart.xAxis[0].setCategories(categories); 
  for(var i = 0; i < len; i++){ 
    chart.series[0].remove(); 
  } 
  if(data.series){ 
    for( i = 0; i < data.series.length; i ++ ){ 
      chart.addSeries({ 
        name: data.series[i].name, 
        data: data.series[i].data, 
        type: data.series[i].type, 
      }); 
    } 
  } else { 
    chart.addSeries({ 
      name: name, 
      data: data, 
      type: type, 
    }); 
  } 
} " 

hc = highchart() %>% 
  hc_chart(type = "column") %>% 
  hc_title(text = "Basic Drilldown Big Bossing") %>% 
  hc_xAxis(categories = categories) %>% 
  hc_add_series( name = name ,data = DATABrowser ) %>% 
  hc_plotOptions( 
    column = list( 
      # allowPointSelect = TRUE, 
      cursor = "pointer", 
      point = list( 
        events = list( click = JS(fn) ) 
      ) 
    ) 
  ) 
hc

正确的实现方案：利用highcharter内置的钻取机制 #

其实highcharter已经内置了支持多系列钻取的功能，不需要手动写复杂的JS点击事件。下面是调整后的代码，完美实现点击MSIE柱子后钻取到两个折线系列的效果：

library(highcharter)

# 顶层数据：浏览器品牌的占比，每个可钻取的点指定drilldown的id
top_data <- list(
  list(y = 55.11, name = "MSIE", drilldown = "msie-versions"),
  list(y = 21.6, name = "Firefox"),
  list(y = 11.6, name = "Chrome"),
  list(y = 7.3, name = "Safari"),
  list(y = 2.6, name = "Opera")
)

# 钻取数据：对应MSIE的两个系列，注意要绑定到上面的drilldown id
drilldown_data <- list(
  list(
    id = "msie-versions",
    name = "MSIE Versions",
    type = "spline",
    xAxis = list(categories = c("MSIE 6.0", "MSIE 7.0", "MSIE 8.0", "MSIE 9.0")),
    series = list(
      list(name = "MSIE versions 2000", data = c(10.85, 7.35, 33.06, 2.81)),
      list(name = "MSIE versions 2010", data = c(1, 5, 10, 15))
    )
  )
)

# 构建图表
highchart() %>%
  hc_chart(type = "column") %>%
  hc_title(text = "Browser Market Share with Multi-Series Drilldown") %>%
  hc_xAxis(type = "category") %>%
  hc_add_series(name = "Browser Brands", data = top_data) %>%
  hc_drilldown(
    allowPointDrilldown = TRUE,
    series = drilldown_data
  ) %>%
  hc_plotOptions(
    column = list(
      cursor = "pointer",
      point = list(
        events = list(
          click = JS("function() { this.series.chart.drilldown(this.drilldown); }")
        )
      )
    )
  )

代码说明： #

• 顶层数据：每个点通过drilldown属性指定对应的钻取数据ID，这样点击时就能关联到正确的钻取内容。
• 钻取数据：用id和顶层数据的drilldown值绑定，series里包含需要展示的多个系列，同时指定x轴的分类。
• 内置钻取逻辑：通过hc_drilldown函数配置钻取功能，点击事件只需要调用内置的drilldown方法，不需要手动移除和添加系列，避免了原代码中JS变量错误和复杂的DOM操作。

这样调整后，点击MSIE的柱子就会自动切换到两个折线系列的图表，而且自带返回上一级的按钮，体验更流畅。

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