Блог

Главная - Вопросы по программированию - Highcharts — Ширина всплывающей подсказки в режиме стиля

Highcharts — Ширина всплывающей подсказки в режиме стиля

#highcharts #tooltip

Вопрос:

Я пытаюсь настроить динамическую ширину всплывающей подсказки в СТИЛИЗОВАННОМ РЕЖИМЕ.

Я пытаюсь написать оболочку всплывающей подсказки, но мне трудно понять, какую функцию я должен обернуть, может кто-нибудь посоветовать?

Ниже приведен пример такого подхода

 H.wrap(H.Tooltip.prototype, 'theFunc', (p) => {
  const label = this.label;
    const width = this.chart.plotWidth < 300 ? 100 : 200;
    label.css({width: width 'px'});
})

ОБНОВЛЕНИЕ:
Результат, который я получаю, когда useHTML имеет значение true

введите описание изображения здесь

Ответ №1:

Вам не нужно обертывать какой-либо метод, этого достаточно, если вы используете formatter функцию обратного вызова:

     tooltip: {
        useHTML: true,
        formatter: function() {
            const chart = this.series.chart;
            const width = chart.plotWidth < 300 ? 100 : 200;

            return '<div style="width:'   width   'px">'   this.y   '</div>'
        }
    }

Живая демонстрация: http://jsfiddle.net/Черная метка/5kdonwbj/

Ссылка на API: https://api.highcharts.com/highcharts/tooltip.форматер

Комментарии:

1. Ценю вашу помощь, однако решение по какой-то причине не сработало для меня. Я просто получаю пустое поле в нашем проекте (добавлен скриншот в тексте вопроса)- интересно, может ли что-то еще повлиять на настройки всплывающих подсказок? для справки мы используем highcharts 8.2.2

2. Привет @Sabira, Решение также отлично работает в версии 8.2.2, пример: jsfiddle.net/BlackLabel/rkqvaf47 Не могли бы вы воспроизвести проблему в jsfiddle?

3. Здравствуйте, извините, это была ошибка css и не была связана с highcharts. Ценю вашу помощь!

Метки: