Несколько всплывающих подсказок HighcharteR открываются с помощью hideDelay

В основном я пытаюсь сделать так, чтобы всплывающие подсказки оставались на месте в течение нескольких секунд и не закрывались при наведении курсора на другую область, т. е. оставляли след из старых открытых всплывающих подсказок как в этом примере

Данные испытаний:

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, но есть ли возможность сделать так, чтобы всплывающая подсказка оставалась активной (не закрываясь) при наведении курсора на другой регион? Есть ли вариант для этого, или, может быть, существует пользовательская функция всплывающей подсказки?

В качестве альтернативы решение с всплывающей подсказкой при щелчке также могло бы помочь, если бы была возможность указать, что старые всплывающие подсказки не будут закрываться при следующем щелчке.


r javascript highcharts r-highcharter
person runr    schedule 04.12.2018    source источник
comment
Вот как это можно сделать в javascript: jsfiddle.net/highcharts/yrpv0kuc   -  person ewolden    schedule 04.12.2018
comment
@eolden спасибо, не уверен, что он правильно отображается для меня, хотя на jsfiddle. Я вижу, что всплывающая подсказка зафиксирована с правой стороны и вообще не движется.   -  person runr    schedule 04.12.2018
comment
Это было бы tooltip.positioner, здесь то же самое без этого; jsfiddle.net/ewolden/7bsx5zug. Это все, что нужно в примере, чтобы отключить скрытие всплывающей подсказки: Highcharts.Tooltip.prototype.hide = function () {};   -  person ewolden    schedule 04.12.2018
comment
@eolden, но при быстром просмотре значений нет следов старых всплывающих подсказок. Я ищу что-то как в представленном примере, попробуйте быстро перемещать мышь по карте, изображение должно выглядеть что-то вроде этого, с более чем одной открытой всплывающей подсказкой.   -  person runr    schedule 04.12.2018
comment
@eolden в качестве примечания, просматривая исходный код страницы, они, кажется, достигают этого, отображая каждое состояние как новую карту? То есть mapIt('nf','Newfoundland and Labrador', 44,56 ,1.2,1.5, '10'); mapIt('pe','Prince Edward Island', 0,100 ,0,0.2, '30'); и так далее, где mapIt — это function mapIt(province, title, data1, data2, price1, price2, dis) { $('.'+province).highcharts. Может, это ключ?   -  person runr    schedule 04.12.2018
comment
Возможно. Вот как вы можете решить это в javascript: jsfiddle.net/ewolden/7bsx5zug/33 (теперь со следом)   -  person ewolden    schedule 04.12.2018
comment
@ewolfen хорошо, спасибо! Это похоже на решение! Я подумаю, как реализовать это на R.   -  person runr    schedule 04.12.2018
comment
@Nutle Мне удалось реализовать это в R. Посмотри на ответ;)   -  person raf18seb    schedule 06.12.2018

Ответы (1)


arrow_upward
2
arrow_downward

Как предложил @eolden, вы можете обернуть функцию 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)
                }")
                )
              ))
person raf18seb    schedule 06.12.2018
comment
Однако не ожидал, что потребуется такая длительная переработка функции updatePosition. Но требовалось ли это из-за совместимости с R? Мне просто любопытно, так как у меня нет опыта работы с js :) - person runr; 06.12.2018