深入研究来自不同组的多个系列 - Highcharter(R 中)

Posted

技术标签:

【中文标题】深入研究来自不同组的多个系列 - Highcharter(R 中)【英文标题】:Drilldown to multiple series from different groups - Highcharter (in R) 【发布时间】:2020-01-10 16:41:50 【问题描述】:

我正在寻找一种使用 Highcharter for R 从不同组向下钻取到多个系列的方法。本质上,我想在 High Charts 中重现这个示例(来自 jsfiddle)- http://jsfiddle.net/wchmiel/v1o8dga9/3/

这是一些让我接近这一点的代码 -

library(highcharter)
library(dplyr)
library(purrr)

df <- tibble(x = c(1, 2, 3, 2, 3, 4, 3, 5, 4), y = c(1, 2, 1, 3, 3, 2, 4, 6, 5), key = c(rep("A", 3), rep("B", 3), rep("C", 3)),
             drilldown = c(rep("a", 3), rep("b", 3), rep("c", 3)))

drill1 <- data.frame(
  x = c(1,2,3),
  y = c(3, 3, 1)
)
drill1 <- list_parse2(drill1)

drill2 <- data.frame(
  x = c(1,2,4),
  y = c(1, 5, 1)
)
drill2 <- list_parse2(drill2)

drill3 <- data.frame(
  x = c(1,2,4),
  y = c(4, 3, 1)
)
drill3 <- list_parse2(drill3)


hchart(df, "line", 
       hcaes(x = x, y = y, group = key),
       color = c("#A63A50", "#37123C", "#DDA77B"),
       drilldown = TRUE) %>% 
  hc_plotOptions(line = list(marker = list(enabled = FALSE), legendIndex = 1)) %>% 
  hc_drilldown(
    allowPointDrilldown = TRUE,
    series = list(
      list(
        id = "a",
        data = drill1
      ),
      list(
        id = "b",
        data = drill2
      ),
      list(
        id = "c",
        data = drill3
      )
    )
  )

这个脚本让我可以深入到三个不同的图表,每个组一个。但是,每个向下钻取图表只有一个系列。我不知道如何在钻取图表中有多个系列

向下钻取图表包含返回主图表的按钮很重要(如在我的示例和 jsfiddle 示例中)。此外,我需要能够钻取来自不同组的不同图表,而不仅仅是一组。

所以基本上我需要在 highcharter 中复制的 jsfiddle 示例。我怀疑该解决方案涉及一些javascript

【问题讨论】:

【参考方案1】:

您可以使用 JS("...") 函数将提供的 jsFiddle 中的所有内容重写为 R。

这是一个例子:

library(highcharter)
library(dplyr)
library(purrr)

df <- tibble(x = c(1, 2, 3, 2, 3, 4, 3, 5, 4), y = c(1, 2, 1, 3, 3, 2, 4, 6, 5), key = c(rep("A", 3), rep("B", 3), rep("C", 3)),
             drilldown = c(rep("a", 3), rep("b", 3), rep("c", 3)))

drill1 <- data.frame(
  x = c(1,2,3),
  y = c(3, 3, 1)
)
drill1 <- list_parse2(drill1)

drill2 <- data.frame(
  x = c(1,2,4),
  y = c(1, 5, 1)
)
drill2 <- list_parse2(drill2)

drill3 <- data.frame(
  x = c(1,2,4),
  y = c(4, 3, 1)
)
drill3 <- list_parse2(drill3)


hchart(df, "line", 
       hcaes(x = x, y = y, group = key),
       color = c("#A63A50", "#37123C", "#DDA77B"),
       drilldown = TRUE) %>% 
  hc_chart(events = list(drilldown = JS("function(e) 
            e.preventDefault()
            var chart = this,
              series = [
                data: [5, 5, 5, 3, 2]
              , 
                data: [3, 3, 7, 3, 3]
              ];

            chart.addSingleSeriesAsDrilldown(e.point, series[0]);
            chart.addSingleSeriesAsDrilldown(e.point, series[1]);
            chart.applyDrilldown();
        "))) %>% 
  hc_plotOptions(line = list(marker = list(enabled = FALSE), legendIndex = 1)) %>% 
  hc_drilldown(
    allowPointDrilldown = TRUE,
    series = list(
      list(
        id = "a",
        data = drill1
      ),
      list(
        id = "b",
        data = drill2
      ),
      list(
        id = "c",
        data = drill3
      )
    )
  )

以及简化的 jsFiddle 示例:https://jsfiddle.net/BlackLabel/nx6czgwf

现在您只需要准备数据并使用 jsFiddle 中的代码。

【讨论】:

这很好用。谢谢你的帮助。诀窍是复制 'function(e)' 之后所有内容的 javascript 并将其粘贴到 events = list(drilldown = JS([paste here])) 中,就像您在本示例中所做的那样。

以上是关于深入研究来自不同组的多个系列 - Highcharter(R 中)的主要内容,如果未能解决你的问题,请参考以下文章

HighChar 案例

虚拟机研究系列-「GC本质底层机制」SafePoint的深入分析和底层原理探究指南

深入研究浏览器对HTML解析过程

.net Kafka.Client多个Consumer Group对Topic消费不能完全覆盖研究总结

Java技术专题-JVM研究系列(24)深入挖掘Java对象的内存结构

☕Java深层系列「并发编程系列」深入分析和研究MappedByteBuffer的实现原理和开发指南