根据您的评论，Highcharts 将作为 Plotly 的替代品。
这是一个解决方案，可以并排创建两个带有同步工具提示的图表，无论您将鼠标悬停在左侧图表还是右侧图表上。
嘿，你;来自各国的问候！顺便说一句，如果您没有正确拼写标签名称（Kat），那么不会通知我。我只是碰巧又遇到了你的问题。
我最终添加了一些故障安全代码，只有当您只有两个并排的图时，这些代码才可能真正起作用。里面有这么多数据economics，很多时候这两个提示会相差一年之久。额外的代码只是确保它们匹配。
因为我确信使用economics这不是您的最终目标，请告诉我您使用的任何配置是否不适用于此代码。
我在 Javascript 编码中添加了很多注释tags$script。我希望这些信息足以让您了解正在发生的事情。
Highcharts for R 有两种不同的绘图方法。
- 如果您熟悉 Python 的 Plotly，它有两个版本：express 和 go。这就是 R 的 Highcharts 中发生的情况。 (
hchart()更像是快递；highchart()更像是走）
- 如果您不熟悉 Python 的 Plotly，那么最好知道绘图以
hchart() or highchart()。它们的工作方式并不完全相同。
如果您想了解有关 Highcharts for R 的更多信息，在这里阅读更多相关信息 https://jkunst.com/highcharter/.
这个答案使用economics（正如您在问题中所做的那样），它来自图书馆ggplot2。此答案中使用的其他库是highcharter and htmltools。这些图表的设置与您为 Plotly 建立的问题完全相同，只是它们在 Highcharter 中呈现。
library(highcharter)
library(htmltools)
data(economics, package = 'ggplot2')
(hc1 <- highchart(elementId = "myChart") %>%
hc_xAxis(categories = economics$date, type = "datetime") %>%
hc_add_series(name = "Unemployed", data = economics$unemploy) %>%
hc_tooltip(useHTML = T))
(hc2 <- highchart(elementId = "myChart2") %>%
hc_xAxis(categories = economics$date, type = "datetime") %>%
hc_add_series(name = "Unemployment Duration",
data = economics$uempmed) %>%
hc_tooltip(useHTML = T))
下一段代码横向对齐这两个图并建立同步的工具提示。
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 */
/* evaluate for synchronization, to address lateral charts */
event.chartX = (event.chartX + $('[id$=Chart]').width()) % $('[id$=Chart]').width();
point = chart.series[0].searchPoint(event, true); /* get closest point */
if (point) { /* if point found, tip it */
point.highlight(e); /* trigger tooltip */
}
} /* this code is to ensure the tooltips match */
var gr = $('div.highcharts-label.highcharts-tooltip');/* collect visible tooltips */
var gr0 = gr[0].firstChild.firstChild.textContent; /* collect 1st x-axis tooltip text */
var gr1 = gr[1].firstChild.firstChild.textContent; /* collect 2nd x-axis tooltip text */
if(gr0 !== gr1) { /* the tips don't match due to data point proximity, fix it */
var p = Highcharts.charts[1].series[0].points; /* find all points in chart 1 */
point = p.find(o => o.category === gr0); /* get point matching chart 0 tip */
if(point) { /* if point found, tip it */
point.highlight(e); /* trigger tooltip */
}
}
});
}, 500);
Highcharts.Pointer.prototype.reset = function() { /* reset tooltip */
return null;
};
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 */
};
")),
div(id = "hc_container", # this id is used in the JQuery/Javascript above
div(hc1, style = 'height:100%; width: 50%; float:left;'), # first plot
div(hc2, style = 'height:100%; width: 50%; float:left;'), # second plot
style = "height:100%; width:100%; float:left;"))) # container styles
