javascript - HighcharteR 使用 hideDelay 打开多个工具提示

Question

基本上，我试图让工具提示停留几秒钟，并且在悬停在另一个区域时不关闭，即，留下旧的打开工具提示的踪迹 like in this example

测试数据:

require(dplyr)
require(highcharter)

mapdata <- get_data_from_map(download_map_data("countries/us/us-all"))
set.seed(1234)

data_fake <- mapdata %>% 
  select(code = `hc-a2`) %>% 
  mutate(value = 1e5 * abs(rt(nrow(.), df = 10)))

hcmap("countries/us/us-all", data = data_fake, value = "value",
      joinBy = c("hc-a2", "code"), name = "Fake data",
      dataLabels = list(enabled = TRUE, format = "{point.name}"),
      borderColor = "#FAFAFA", borderWidth = 0.1,
      tooltip = list(valueDecimals = 2, valuePrefix = "$", valueSuffix = "USD", 
hideDelay = 3, followPointer = F)) 

我找到了 hideDelay 的选项，但是是否有一个选项可以使工具提示在悬停在另一个区域时保持事件状态(而不关闭)？是否有一个选项，或者可能存在自定义工具提示功能？

或者，单击工具提示的解决方案也会有所帮助，它有一个选项指定旧的工具提示在再次单击时不会关闭。

Answer 1

正如@ewolden建议的，您可以包装 Highcharts.Tooltip.prototype.updatePosition 函数。要使其在 R 中工作，您可以将此函数包装在 Chart.load 事件中，如下例所示:

require(dplyr)
require(highcharter)

mapdata <- get_data_from_map(download_map_data("countries/us/us-all"))
set.seed(1234)

data_fake <- mapdata %>% 
  select(code = `hc-a2`) %>% 
  mutate(value = 1e5 * abs(rt(nrow(.), df = 10)))

hcmap("countries/us/us-all", data = data_fake, value = "value",
      joinBy = c("hc-a2", "code"), name = "Fake data",
      tooltip = list(followPointer = F), chart = list(
        events = list(
          load = JS("Highcharts.Tooltip.prototype.updatePosition = function(point) {
                var chart = this.chart,
                label = this.getLabel(),
                pos = (this.options.positioner || this.getPosition).call(
                this,
                label.width,
                label.height,
                point
                ),
                anchorX = point.plotX + chart.plotLeft,
                anchorY = point.plotY + chart.plotTop,
                pad,
                cloneToolTip;



                // Set the renderer size dynamically to prevent document size to change
                if (this.outside) {
                pad = (this.options.borderWidth || 0) + 2 * this.distance;
                this.renderer.setSize(
                label.width + pad,
                label.height + pad,
                false
                );
                anchorX += chart.pointer.chartPosition.left - pos.x;
                anchorY += chart.pointer.chartPosition.top - pos.y;
                }

                // do the move
                this.move(
                Math.round(pos.x),
                Math.round(pos.y || 0), // can be undefined (#3977)
                anchorX,
                anchorY
                );
                cloneToolTip = chart.tooltip.label.element.cloneNode(true);
                cloneToolTip = chart.container.firstChild.appendChild(cloneToolTip);
                setTimeout(function() {
                cloneToolTip.remove();
                }, 500)
                }")
                )
              ))