R Package Highcharter：如何深入查看多个系列堆叠柱形图？

Posted 2023-03-24

【中文标题】R Package Highcharter：如何深入查看多个系列堆叠柱形图？

【英文标题】：R Package Highcharter: How do I drilldown to multiple series stacked column graph?

【发布时间】：2019-06-15 10:29:36

【问题描述】：

我想深入研究多个系列。

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

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

这是初始图表，点击 Job A 将向下钻取到图表 2：

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

【问题讨论】：

从我目前所看到的情况来看，我假设您并不想进行深入研究，但您想在点击时更改您的类别。我对吗？对我来说，完全理解你到底想要达到什么很重要，因为也许有比向下钻取更简单的解决方案。

嗨@raf18seb，是的。点击 Job A 栏将变为 Job A 的子类别

【参考方案1】：

我需要重新构建一点您的代码。您需要在 chart.events.drilldown 事件中使用 chart.addSingleSeriesAsDrilldown() 方法。这是你的全部代码：

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

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