R Package Highcharter: How do I drilldown to multiple series stacked column graph?

独自空忆成欢 提交于 2019-12-23 05:10:42

问题


I want to drilldown to multiple series.

How do I change the x axis categories after drilldown and still maintain my series?

hc <- highchart() %>%
  hc_chart(type = "column") %>%
  hc_title(text = "Job Ratio") %>%
  hc_xAxis(categories = c("Job A", "Job B")) %>%
  hc_plotOptions(series = list(stacking = "normal")) %>%
  hc_yAxis(max = 100) %>%
  hc_add_series(name = "Completed", 
                data = list(list(y = 40, drilldown = "job-a"), 
                            list(y = 35, drilldown = "job-a"))) %>%
  hc_add_series(name = "No progress", data = c(60, 65)) %>%
  hc_drilldown(
    allowPointDrilldown = TRUE,
    series = list(
      list(
        id = "job-a",
        categories = c("Job A1", "Job A2"),
        series = list(
          list(
            name = "Completed",
            data = list(
              list(y = 55), 
              list(y = 45)
            )
          ),
          list(
            name = "No Progress",
            data = list(
              list(y = 45),
              list(y = 55)
            )
          )
        )
      )
    )
  )
hc

This is the initial graph, clicking Job A will drilldown to graph 2:

Result of drilling down from Job A:


回答1:


I needed to rebuild a little bit your code. You need to use chart.addSingleSeriesAsDrilldown() method in chart.events.drilldown event. This is your whole code:

hc <- highchart() %>%
  hc_chart(
    type = "column",
    events = list(
      drilldown = JS(
        "function(e) {
          if (!e.seriesOptions) {
            var chart = this;
            chart.addSingleSeriesAsDrilldown(e.point, {
              color: Highcharts.getOptions().colors[0],
              name: 'Completed',
              data: [
                ['Job A1', 40],
                ['Job B1', 35]
              ]
            });
            chart.addSingleSeriesAsDrilldown(e.point, {
              color: Highcharts.getOptions().colors[1],
              name: 'No progress',
              data: [
                ['Job A1', 60],
                ['Job B1', 65]
              ]
            });

            chart.applyDrilldown();
          }
        }"
      )
    )
  ) %>%
  hc_title(text = "Job Ratio") %>%
  hc_xAxis(type = "category") %>%
  hc_plotOptions(series = list(stacking = "normal")) %>%
  hc_yAxis(max = 100) %>%
  hc_add_series(
    name = "Completed", 
    data = list(
      list(name = "Job A", y = 40, drilldown = T), 
      list(name = "Job B", y = 35, drilldown = T)
    )
  ) %>%
  hc_add_series(
    name = "No progress",
    data = list(
      list(name = "Job A", y = 60), 
      list(name = "Job B", y = 65)
    )
  ) %>%
  hc_drilldown(
    series = list()
  )
hc

And here you can take a look at the pure JS implementation: https://jsfiddle.net/BlackLabel/m089w4yh

API: https://api.highcharts.com/highcharts/chart.events.drilldown



来源:https://stackoverflow.com/questions/54300033/r-package-highcharter-how-do-i-drilldown-to-multiple-series-stacked-column-grap

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!