Как добавить всплывающую подсказку к меткам оси X на диаграммах высоких значений?

Как добавить всплывающую подсказку к меткам оси X на диаграммах высоких значений?

xAxis: {
  categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
  labels: {
    x: 5,
    useHTML: true,
    formatter: function () {
      return categoryImgs[this.value];
    }
  }
}

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


jquery highcharts tooltip axis-labels labels
person maximumride    schedule 19.02.2014    source источник

Ответы (3)


arrow_upward
9
arrow_downward

Как правило, Highcharts не поддерживает всплывающие подсказки на этикетках.

Однако у вас есть два решения:

  • используйте плагин Custom-events, чтобы добавить событие на ярлыки: https://www.highcharts.com/products/plugin-registry/single/15/Custom-Events (в демонстрации есть щелчок, наведение указателя мыши должно работать так же, чтобы отображалась настраиваемая всплывающая подсказка)
  • используйте какой-нибудь плагин (Tooltipsy и т. д.), например: http://jsfiddle.net/gW4p6/196/ < / а>
person Paweł Fus    schedule 19.02.2014
comment
Он работает, просто всплывающая подсказка в демонстрации загружается с github, а некоторое время назад github отключил загрузку js напрямую из репо. См. Демонстрацию с загруженной подсказкой в ​​теге скрипта: jsfiddle.net/gW4p6/272 - person Paweł Fus; 14.12.2016
comment
@ PawełFus somedirection означает, что первый плагин Custom-events больше не доступен на сайте. - person tnkh; 26.10.2017
comment
Я бы посоветовал не использовать ничего, сделанное из Black Label, так как в наши дни почти все не поддерживается, и это очень неуклюже (если вообще работает) с Highcharts v6 и выше. Особенно, если вы используете @typings. - person SovietFrontier; 01.05.2019
comment
Привет @SovietFrontier, Спасибо за сообщение. Все Highcharts, а также некоторые плагины Black Label находятся в процессе миграции, поэтому они могут полностью поддерживать TypeScript. Если у вас есть какие-либо препятствия или комментарии при использовании плагинов или Core Highcharts, было бы здорово, если бы вы могли предоставить нам эту информацию, чтобы мы могли улучшить и подготовить продукт, который будет все больше и больше соответствовать потребностям наших клиентов. - person Grzegorz Blachliński; 07.06.2019

arrow_upward
2
arrow_downward

вы можете использовать форматировщик, чтобы сделать метку как div. вы можете написать для него свое собственное событие jquery MuseOver.

formatter: function(){
    return "<div class='myClass'> " + this.value + "</div>"
}

Я надеюсь, что это поможет вам

person Strikers    schedule 19.02.2014
comment
Спасибо нападающим, это тоже сработает, но плагин от Pawel, похоже, также дает много полезных функций! - person maximumride; 20.02.2014
comment
это довольно мощный ответ - person Rooster; 24.05.2018

arrow_upward
1
arrow_downward

Я думаю, что нашел более простое решение этого вопроса, которое включает только Bootstrap и JQuery.

См. http://jsfiddle.net/key2xanadu/zfsfz0c9/.

Решение включает в себя идентификацию щенков, а затем всплывающую подсказку внизу:

$('document').ready(function () { 
    $("#text_title").tooltip({placement: 'bottom', title:"HELLO TITLE!"});
    $("#label_one").tooltip({placement: 'bottom', title:"HELLO ONE!"});
    $("#label_two").tooltip({placement: 'bottom', title:"HELLO TWO!"});
});

Пример также показывает, как добавлять всплывающие подсказки к заголовку!

person xke    schedule 23.12.2014