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

时间:2018-12-04 13:02:55

标签: javascript r highcharts r-highcharter

基本上,我正在尝试使工具提示停留几秒钟并且在将鼠标悬停在另一个区域时不会关闭,例如,留下一小段旧的打开的工具提示 like in this example < / p>

测试数据:

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的选项,但是是否有一个选项可以使鼠标悬停在另一个区域时保持提示状态(不关闭)?是否有选项,或者可能存在自定义工具提示功能?

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

1 个答案:

答案 0 :(得分:2)

按照@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)
                }")
                )
              ))