R包Highcharter:如何向下钻取到多个系列的堆叠柱形图? [英] R Package Highcharter: How do I drilldown to multiple series stacked column graph?

问题描述

我想深入了解多个系列.

I want to drilldown to multiple series.

在向下钻取后如何更改x轴类别并仍然保持我的系列?

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

这是初始图形，单击作业A"将向下钻取至图形2:

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

从作业A向下钻取的结果:

Result of drilling down from Job A:

推荐答案

我需要重新构建一些代码.您需要在 chart.events.drilldown 事件中使用 chart.addSingleSeriesAsDrilldown()方法.这是您的整个代码:

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

在这里，您可以看一下纯JS实现: https://jsfiddle.net/BlackLabel/m089w4yh

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

这篇关于R包Highcharter:如何向下钻取到多个系列的堆叠柱形图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！