Ошибка всплывающей подсказки в amchart v4, не перезагружается на срезе круговой диаграммы - PullRequest
Новая
       6

Ошибка всплывающей подсказки в amchart v4, не перезагружается на срезе круговой диаграммы

0 голосов
/ 29 ноября 2018 
series.slices.template.events.on("over", function(ev) {
    series.slices.template.tooltipHTML=showHtml(ev, series.name);
}, this);

Ошибка всплывающей подсказки в amchart4: не перезагружается на срезе круговой диаграммы.

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

Я думаю, что предыдущие данные HTML где-то кешируются.Пожалуйста, помогите мне.

1 Ответ

0 голосов
/ 21 декабря 2018

Это может помочь увидеть, что делает showHtml.Но мы обойдемся без этого.

Есть несколько проблем с этим кодом.

По кодам, наиболее очевидной является эта строка: 

series.slices.template.tooltipHTML=showHtml(ev, series.name);

Вы сбрасываете tooltipHTML шаблона вместо реального tooltipHTML среза. Шаблон по умолчанию имеет applyOnClones как true, поэтому он будет распространяться на все другие срезы, поэтому, если это сработало, это было случайно.Если в showHtml имеются какие-либо специфичные для среза настройки, которые не зависят от заполнителей данных , это приведет к поломке tooltipHTML для следующего среза, наведенного на указатель.

Однако реальная проблема заключается в том, чтоподход.

Пока заданы tooltipHTML или tooltipText, при наведении появится всплывающая подсказка .

Лучше использовать адаптер для tooltipHTML в данном случае.

В качестве быстрого теста, чтобы определить, кто выигрывает условие гонки, событие при наведении курсора или адаптер tooltipText / HTML, создать обработчик для каждого и навести курсор на срез: 

series.slices.template.events.on("over", function(){
  console.log("hover");
});

// override tooltipText so tooltipHTML is actually used
series.slices.template.tooltipHTML = "something...";
series.slices.template.adapter.add("tooltipHTML", function(tooltipHTML) {
  console.log("adapter");
  return tooltipHTML;
});

// console:
// "adapter"
// "hover"

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

Так что используйте адаптер, простоОбязательно настройте свою функцию showHtml, чтобы ее первый аргумент сам принимал target вместо event (возможно, нет необходимости иметь другой аргумент с изменяемым tooltipHTML, поскольку он всегда будет отправлять исходный tooltipHTML неформатированная строка, так что ее можно ссылаться вручную как на строку или переменную).

Адаптер может выглядеть следующим образом: 

var originalTooltipHTML = "<strong>{country}: </strong>"
series.slices.template.tooltipHTML = originalTooltipHTML;
series.slices.template.adapter.add("tooltipHTML", function(tooltipHTML, target) {
  // #2: If we had used an event, here you would work on the target itself, event.target, not the template.
  // The showHtml might not even be needed, perhaps whatever it does can go in here instead.
  return showHtml(target);
});

Вот демонстрационная версия со всем, что было собрано вместе:

https://codepen.io/team/amcharts/pen/a0122e572d27cf513a78384345cad3a6

...