r - dygraphs/highcharter 在两个图上突出显示 - 交互性

Question

我正在尝试在 dyGraph 或 highcharter 中复制以下绘图。

df %>% 
  ggplot(aes(x = mts2, y = price)) +
  geom_point() +
  geom_jitter() +
  facet_wrap(~ type, scales = "free_y", ncol = 1) +
  stat_smooth(method = "lm", formula = y ~ x + I(x^2), size = 1, color = "red")

但是，我希望它具有交互性，因此当用户将鼠标悬停在其中一个点上时，会绘制一条线来连接租赁和购买。因此，当我将鼠标悬停在回归线上时，它将突出显示其他图中的回归。

我正在尝试重新创建相同的绘图，但在 dygraphs 或 highcharter 中我可以突出显示两个回归中的相同点。 (即，当我们将鼠标悬停在 80 mts2 和 400,000 价格附近的点时，它应该突出显示顶部图表中 1,500 附近的点

代码:

library(dygraphs)
df %>% 
  filter(type == "comprar") %>% 
  select(-c(type, habs)) %>%
  dygraph(main = "myTitle") %>% 
  dyOptions(drawPoints = TRUE) %>% 
  dySeries(drawPoints = TRUE, color = "#0099F9")
  
  library(highcharter)
  df %>% 
    highchart() %>% 
    hc_title(text = "Scatter chart with size and color") %>% 
    hc_add_series(df, "scatter", hcaes(x = price, y = mts2, size  = mts2, color = mts2))

数据:

df = structure(list(price = c(1600, 1200, 249000, 288000, 775000, 
350000, 715000, 330000, 375000, 925, 1250, 300000, 425000, 489000, 
1200, 550000, 1895, 310000, 289000, 450000, 1250, 288000, 1000, 
600, 1100, 350000, 1200, 339000, 405000, 427000, 299000, 218000, 
159900, 360000, 365000, 725, 405000, 300000, 715000, 1300, 1400, 
1500, 415000, 1500, 663, 350000, 365000, 230000, 515000, 259000, 
310000, 405000, 288000, 350000, 288000, 1300, 350000, 1350, 715000, 
350000, 715000, 185000, 2200, 288000, 353800, 290000, 229000, 
365000, 1900, 1300, 590000, 180000, 1050, 1900, 1100, 1950, 288000, 
1995, 112000, 369000, 593000, 550000, 365000, 715000, 1800, 713000, 
1100, 260000, 375000, 715000, 338000, 288000, 1900, 288000, 2800, 
2450, 1990, 260000, 415000, 745000), habs = c(1, 1, 1, 4, 3, 
4, NA, 4, 2, 2, 2, 2, 4, 3, 3, 4, 2, 2, 3, 4, 1, 4, 1, 1, 2, 
5, 3, 4, 3, 4, 2, 2, NA, 4, 3, 1, 3, 3, 3, 3, 3, 2, 4, 2, 1, 
3, 3, 3, 2, 1, 2, 3, 4, 4, 4, 3, 4, 3, NA, 3, 3, 1, 3, 4, 1, 
4, 3, 3, 1, 2, 3, 2, 1, 1, 2, 2, 4, 2, 1, 3, 2, 4, 3, 3, 2, 3, 
3, NA, 2, 3, 3, 4, 1, 4, 4, 4, 1, NA, 4, 3), mts2 = c(70, 65, 
55, 76, 121, 87, 109, 85, 81, 46, 65, 55, 100, 102, 65, 122, 
66, 51, 85, 99, 50, 75, 55, 10, 75, 87, 71, 75, 83, 118, 85, 
57, 45, 112, 63, 40, 83, 75, 109, 91, 74, 58, 100, 75, 42, 82, 
90, 65, 104, 52, 55, 83, 79, 87, 76, 77, 87, 88, 109, 83, 109, 
46, 145, 76, 40, 66, 63, 90, 45, 65, 115, 44, 46, 45, 73, 90, 
79, 110, 42, 81, 73, 115, 94, 109, 70, 104, 75, 58, 80, 109, 
92, 79, 45, 76, 122, 160, 47, 58, 100, 104), type = c("alquiler", 
"alquiler", "comprar", "comprar", "comprar", "comprar", "comprar", 
"comprar", "comprar", "alquiler", "alquiler", "comprar", "comprar", 
"comprar", "alquiler", "comprar", "alquiler", "comprar", "comprar", 
"comprar", "alquiler", "comprar", "alquiler", "alquiler", "alquiler", 
"comprar", "alquiler", "comprar", "comprar", "comprar", "comprar", 
"comprar", "comprar", "comprar", "comprar", "alquiler", "comprar", 
"comprar", "comprar", "alquiler", "alquiler", "alquiler", "comprar", 
"alquiler", "alquiler", "comprar", "comprar", "comprar", "comprar", 
"comprar", "comprar", "comprar", "comprar", "comprar", "comprar", 
"alquiler", "comprar", "alquiler", "comprar", "comprar", "comprar", 
"comprar", "alquiler", "comprar", "comprar", "comprar", "comprar", 
"comprar", "alquiler", "alquiler", "comprar", "comprar", "alquiler", 
"alquiler", "alquiler", "alquiler", "comprar", "alquiler", "comprar", 
"comprar", "comprar", "comprar", "comprar", "comprar", "alquiler", 
"comprar", "alquiler", "comprar", "comprar", "comprar", "comprar", 
"comprar", "alquiler", "comprar", "alquiler", "alquiler", "alquiler", 
"comprar", "comprar", "comprar")), row.names = c(NA, -100L), class = c("tbl_df", 
"tbl", "data.frame"))

Answer 1

我将尝试一下我认为您正在寻找的东西。您可以使用这些库做很多事情。我也不知道您想在回归工具提示中看到什么。

对于此解决方案，我选择使用 highcharter。

首先，我使用 imap 创建两个图。我添加了许多评论，以便您可以了解通话的目的。如果有任何不清楚的地方，请告诉我。

library(highcharter)
library(tidyverse)
library(htmltools)

imap(unique(df$type), function(j, k) {                   # index & type in df
  plt <- df %>% filter(type == j) %>%                    # filter for the type
    hchart("point", regression = T,                      # add poly reg line
           regressionSettings = list(color = "red", type = "polynomial",
                                     hideInLegend = T),  # no legend
           hcaes(x = mts2, y = price)) %>% 
    hc_add_dependency("plugins/highcharts-regression.js") %>%  # tie-in reg dep
    hc_xAxis(min = 5, max = 160, crosshair = T) %>%      # all w/ same x rng
    hc_tooltip(useHTML = T, crosshair = T)
  assign(paste0("plt", k), plt, envir = .GlobalEnv)      # add plot to env
})

现在，为了将两个图与同步的工具提示一起渲染，我使用了可浏览。如果您使用的是 RStudio 或其他带有查看器 Pane 的 IDE，则需要将结果发送到浏览器以查看合并的图。在 Rstudio 中，您只需单击图标即可将其发送到那里。该图标看起来像这样...(在查看器 Pane 中居中)。

剩下的代码几乎全部是 Javascript/JQuery。同样，我在这里添加了很多评论来解释正在发生的事情。

我想指出一行:

point = chart.series[1].searchPoint(event, true); /* get closest point; reg line only */

在 point 对象的声明中，series 之后的 [1] 告诉整个代码块仅对齐图之间的回归。例如，如果您将其更改为 [0]，它将忽略回归线并关注两个图中的点。

browsable(tagList(
  tags$script(HTML("
  setTimeout(function() {                                   /* using id from div */
    $('#hc_container').bind('mousemove touchmove touchstart', function(e) {
      var chart, point, i, event;
      for (i = 0; i < Highcharts.charts.length; i++) {      /* loop through both charts */
          chart = Highcharts.charts[i];                     /* identify the chart */
          event = chart.pointer.normalize(e.originalEvent); /* find chart coordinates */
          point = chart.series[1].searchPoint(event, true); /* get closest point; reg line only */
          if (point) {                                      /* if point found, tip it */
              point.highlight(e);
          }
      }
    });
  }, 500);
  Highcharts.Point.prototype.highlight = function(event) { /* executes tooltip from trigger */
    event = this.series.chart.pointer.normalize(event);    /* capture that event occurred */
    this.onMouseOver();                                    /* show marker */
    this.series.chart.tooltip.refresh(this);               /* show tooltip */
    this.series.chart.xAxis[0].drawCrosshair(event, this); /* show crosshair */
  };
  Highcharts.Pointer.prototype.reset = function() {        /* vigilant tooltip */
    return null;
  };
")),
div(id = "hc_container",     # this id is used in the JQuery/Javascript above
    div(plt1, style = 'height:50%; width: 100%;'), # first plot
    div(plt2, style = 'height:50%; width: 100%;'), # second plot
    style = "height:100%; width:100%;")))          # container styles

要自定义回归线中的工具提示(或回归线的任何其他设置)等内容，请使用 this site 。由于某种原因，当我随机访问此网站时，自述文件不会加载。如果我刷新浏览器，它会立即显示。我不确定这是怎么回事，但如果它对你来说是空白的，这就是你所要做的。

如果您有任何疑问，请告诉我。