如何在同一个图中获得不同的图表类型答案

【问题标题】：How to get different chart types in same plot如何在同一个图中获得不同的图表类型
【发布时间】：2020-08-29 12:24:07
【问题描述】：

有没有办法在R 的highchart js 包中组合各种图表类型，如线条+区域？我找到了hc_add_series() 的函数，但不明白我应该如何使用它。以下是我的代码-

   library(highcharter)
library(dplyr)

Data = data.frame(date = seq(Sys.Date(), Sys.Date()-20, by = '-1 day'), value1 = 10:30, variable = "A") %>% mutate(value2 = cumsum(value1))

hchart(Data, 
        "column", 
        hcaes(x = date, y = value1, group = variable)) %>%        
        hc_add_series(data = Data, hcaes(x = date, y = value2), type = 'area', yAxis = 1)

这实际上没有任何情节。为什么？我想将value2 绘制为area plot w.r.t。 secondary axis 但该轴应保留为 invisible。

任何指针都将受到高度赞赏。

【问题讨论】：

标签： javascript highcharts r-highcharter

【解决方案1】：

您在开发人员控制台中有一个error 18，表示您将系列连接到不存在的轴。确实如此 - 您将系列连接到具有索引 1 的轴 yAxis: 1 但您尚未创建该轴。

通常，您不需要创建另一个轴。你可以删除这个yAxis: 1，两个系列都会显示：

library(highcharter)
library(dplyr)

Data = data.frame(date = seq(Sys.Date(), Sys.Date()-20, by = '-1 day'), value1 = 10:30, variable = "A") %>% mutate(value2 = cumsum(value1))

hchart(Data, 
       "column", 
       hcaes(x = date, y = value1, group = variable)) %>%        
  hc_add_series(data = Data, hcaes(x = date, y = value2), type = 'area')

但是，如果这是有意的，并且您确实想为每个系列创建单独的轴并单独显示它们，那么请告诉我，我会为您提供帮助。

编辑：这里我使用hc_yAxis_multiple创建了第二个轴，我将区域系列连接到它并隐藏了这个轴：

library(highcharter)
library(dplyr)

Data = data.frame(date = seq(Sys.Date(), Sys.Date()-20, by = '-1 day'), value1 = 10:30, variable = "A") %>% mutate(value2 = cumsum(value1))

hchart(Data, 
       "column", 
       hcaes(x = date, y = value1, group = variable)) %>%    
  hc_yAxis_multiples(
    list(), # first yAxis
    list(visible = FALSE) # second yAxis
  ) %>% 
  hc_add_series(data = Data, hcaes(x = date, y = value2), type = 'area', yAxis = 1)

编辑 2： 这是根据您的新要求调整的更新代码。我设置了tooltip.shared: true (hc_tooltip(shared = TRUE) %>%) 并为一个系列设置了 zIndex：

library(highcharter)
library(dplyr)

Data = data.frame(date = seq(Sys.Date(), Sys.Date()-20, by = '-1 day'), value1 = 10:30, variable = "Column") %>% mutate(value2 = cumsum(value1))

hchart(Data, 
       "column", 
       hcaes(x = date, y = value1, group = variable), zIndex = 1, opacity = 0.9) %>%  
  hc_tooltip(shared = TRUE) %>%
  hc_yAxis_multiples(
    list(), # first yAxis
    list(visible = FALSE) # second yAxis
  ) %>% 
  hc_add_series(data = Data, hcaes(x = date, y = value2), type = 'area', name = 'Area', yAxis = 1, zIndex = 0)

我还在列系列上设置了不透明度 0.9，但您可以将其移除。

【讨论】：

我想为 value2 创建新轴作为次要轴，但希望保持该轴不可见
我编辑了我的答案。你能确认这是否是你要找的吗？
非常感谢。是否可以将面积图推到柱形图后面并将两者的tootip合二为一？在这种情况下，如果我们可以沿着光标移动有某种垂直线来组合工具提示，那可能会更漂亮
我再次编辑了我的答案；）你可以投票并标记为正确吗？

【解决方案2】：

我认为没有太大区别，您使用 R 或 Ruby on Rails 进行自定义。要在一个图表中组合多种图表类型，您只需创建一系列不同类型：当您实例化 Highcharts 实例时，您可以通过显示不同的类型来设置 series。

 series: [{
type: 'column',
name: 'Jane',
data: [3, 2, 1, 3, 4] },  {
type: 'column',
name: 'John',
data: [2, 3, 5, 7, 6] },  {
type: 'column',
name: 'Joe',
data: [4, 3, 3, 9, 0] },  {
type: 'spline',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33] }]

这是来自官方文档的示例。正如您在代码 sn-p 中看到的，您可以设置要绘制的 type。例如column，spline，等等... 并根据其类型设置data。

https://www.highcharts.com/demo/combo https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/combo/

但请注意，此解决方案适用于 Javascript。您可能想看看如何将这种方法与R 一起使用

【讨论】：