Highcharts: Подсказка переполнена другим элементом DOM

_Временное решение_
Используйте пользовательский HTML <div> и применяйте стили CSS.

Демо:

• http://jsfiddle.net/7wVDV/147/

Обходной путь

Существует также альтернативный подход, позволяющий сохранить маленький указатель оригинальной всплывающей подсказки. Он помещает всплывающую подсказку в отдельное поле svg : http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/studies/tooltip-outside .

@sebastianbochan спасибо, это кажется хорошим подходом, но он не решает мою проблему, потому что, как я уже сказал, моя диаграмма заключена в div с переполнением: прокрутка.
Проверьте эту скрипку на наличие проблемы http://jsfiddle.net/7wVDV/201/

Другой обходной путь работает: http://jsfiddle.net/highcharts/7wVDV/202/

Спасибо, @TorsteinHonsi за обходной путь, я попробую.
Является ли опция «appendToBody» чем-то, что вы с нетерпением ждете реализации в будущем выпуске?

@TorsteinHonsi Есть некоторые проблемы с обходным путем.

1. Полоса прокрутки появляется на теле, если всплывающая подсказка создается на краю экрана. http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/studies/tooltip-outside-box/ (установите ширину демонстрационного окна на ширину 2 диаграмм и наведите курсор на первую точка справа)

2. В IE11 setSize (строка JS 86) не создает окно просмотра меньшего размера. Например, эта демонстрация показывает обрезанную всплывающую подсказку в Chrome и обычную всплывающую подсказку в IE11. http://jsfiddle.net/Lguddypf/

3. При отображении в таблице и вам нужно прокрутить, чтобы увидеть диаграмму, тогда позиция всплывающей подсказки неверна: http://jsfiddle.net/Lguddypf/1/ (прокрутите сайт до диаграммы и наведите указатель мыши на точку, чтобы увидеть, что позиция всплывающей подсказки переместился влево.

Откройте http://jsfiddle.net/1jp9e4rw/3/show/ на iPad или в Chrome. Якоря для всплывающих подсказок, появляющиеся под точкой данных, не отображаются:

Это проблема с изучением всплывающей подсказки вне коробки. При стандартной реализации всплывающие подсказки в порядке.

Обходной путь для вышеуказанной проблемы: http://jsfiddle.net/1jp9e4rw/9/

@pawelfus На самом деле мы пробовали аналогичный обходной путь (H.wrap()) в нашем коде, но оказалось, что обходной путь никогда не решает проблему идеально, например, в нашем случае он может иметь некоторую производительность и проблемы с доступностью. , и даже в браузере Safari позиция всплывающей подсказки не рассчитывается так же, как в браузере Chrome. Поэтому вместо того, чтобы пытаться исправить ошибку с помощью обертки на стороне потребителя, было бы очень хорошо, чтобы highcharts исправили эту проблему в нативном коде.

Я вижу, что эта ошибка была зарегистрирована более одного года. Есть ли какие-либо сроки или план исправления этой ошибки?

Я также хотел бы иметь встроенное исправление для этой ошибки.
Копирование скрипта jQuery работает не совсем правильно, а в некоторых случаях даже хуже.

+1 за собственное исправление, а не полагаться на решение на основе плагинов. Мы также запускаем эту проблему в нашем приложении.

Вот обходной путь, предложенный Павлом, но без jQuery (и используются те же расчеты для получения размеров окна и документа) - http://jsfiddle.net/BlackLabel/1jp9e4rw/10/

Не очень хороший обходной путь :(

Привет @MiroLiska
Судя по стилю полос прокрутки и ошибке логотипа JSFiddle - это IE11.
В этом браузере демо Paweł выглядит так же - я только убрал зависимость от jQuery, в коде/логике ничего не улучшилось.
Кстати: это вызвано прокруткой

Как насчет этого? http://jsfiddle.net/BlackLabel/1jp9e4rw/11/
Анимация отключена, чтобы избежать скачка полосы прокрутки, но вы можете обернуть анимацию всплывающей подсказки, чтобы убедиться, что она анимируется только в доступном пространстве или не вызывает никаких действий полосы прокрутки.

@KacperMadej большое спасибо за это! Мы сталкиваемся с аналогичной проблемой в нашем приложении, где нам нужны всплывающие подсказки, чтобы перекрывать другие элементы DOM. Ваше новое решение намного лучше. Однако небольшая критика заключается в том, что если у вас есть линейные диаграммы с несколькими сериями, если вы наведете курсор на всплывающую подсказку, чтобы перейти к другой серии, произойдет небольшая задержка, когда ничего не происходит, и опыт будет не очень хорошим.

Я думаю, что проблема здесь в том, что событие mouseOver не запускается, если оно зависает над всплывающей подсказкой. Но это только предположение

Еще один комментарий: нам нужно отформатировать и оформить это с помощью useHTML . Насколько мне известно, если вы используете этот плагин, вы не можете использовать useHTML и применять пользовательское форматирование, верно?

Привет @jackyliang

Давным-давно была ошибка с mouseOver и всплывающей подсказкой (около Highcharts v4.0) - это не должно быть проблемой, так как мы используем kd-tree для поиска ближайших точек. Может это регресс? Не могли бы вы воссоздать проблему в jsFiddle и поделиться ею? Спасибо!

По поводу useHTML - да, это ограничение.

Я думаю, что здесь действительно нужна отдельная всплывающая подсказка, никак не связанная с диаграммой. Например, мы можем использовать простой <div> , который будет обновляться при наведении курсора мыши и скрываться при выходе из него, демонстрация: http://jsfiddle.net/BlackLabel/xctq42n8/1/ — теперь мы можем писать что угодно внутри всплывающей подсказки, единственное, что требует улучшения, это позиционирование (демо использует только положение точки относительно графика, отсутствует положение графика в документе).

@pawelfus Привет Павел. У нас сейчас 6.1 (только что проверил). Отсутствие useHTML является большой проблемой, даже если бы мы могли позволить ему переполнять другие элементы DOM. Наша команда примерно на 95% выполнила миграцию наших старых диаграмм d3 в Highcharts (что, заметьте, было приятным опытом :D), но традиционно наши всплывающие подсказки выходят за рамки других элементов dom, поскольку каждая диаграмма находится в своем собственном элементе. Итак, с Highcharts прямо сейчас это выглядит так:

Как вы можете заметить, он имеет индивидуальный стиль с использованием useHTML , чтобы на 100% соответствовать нашим старым всплывающим подсказкам.

Есть ли шансы, что Highcharts найдет собственное решение для поддержки такого поведения переполнения без написания большого количества пользовательского кода?

Привет @jackyliang ,
На данный момент решение доступно только как обходной путь.

@pawelfus Привет, Павел, я также хотел бы знать, каковы шансы, что мы получим здесь собственное решение?
Мы выбрали Highcharts, потому что не хотели реализовывать обходные пути для подобных вещей, и кажется, что многие люди сталкиваются с этой проблемой.
Поскольку все упомянутые здесь обходные пути, по-видимому, имеют некоторые недостатки, получение чистого нативного решения для этого кажется мне правильным шагом.

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

@jackyliang @robinv Спасибо за добрые слова! :)

@jackyliang @robinv - учитывая популярность проблемы, нам нужно решить эту проблему. Я не могу установить ETA в данный момент.

Внутреннее примечание:
Решение может состоять в том, чтобы отделить класс Tooltip от класса Chart и отобразить в независимом элементе (основном теле?). Проблема здесь может заключаться в разделении классов Tooltip и Chart/Pointer (это сложно, как я пробовал в демо-версии Advanced Stock) + мы можем нарушить экспорт всплывающей подсказки в изображения (через tooltip.refresh() ). Тем не менее, было бы неплохо реализовать это для v7: мы могли бы использовать экземпляр Tooltip для стандартных кнопок/элементов меню и использовать его по своему усмотрению. @TorsteinHonsi

Я очень поддерживаю то, что сказал @robinv , потому что это также одна из основных причин, по которой мы перешли на Highcharts — мы хотели избежать написания слишком большого количества пользовательского кода. Наши старые диаграммы d3 имели множество пользовательских расширений/улучшений, и через некоторое время внесение изменений превратилось в беспорядок и кошмар. Я не говорю, что мы не хотим настраивать HC по своему вкусу (настройка != расширения), в основном конкретно говоря о расширениях; делать то, что по умолчанию HC пока не поддерживает.

Мы планируем развернуть нашу интеграцию HC для клиентов в течение 2-3 недель, и мы знаем, что клиенты будут жаловаться, если всплывающие подсказки не будут отображаться поверх других элементов dom. Если минимум, который мы получим, — это ETA, когда это можно будет сделать, это меня удовлетворило бы на данный момент, поскольку тогда мы можем определить, пытаемся ли мы написать собственное решение (на данный момент) или ждем нативного решения от Highcharts.

@sebastianbochan Я хотел отметить, что обходной путь на самом деле не является решением, поскольку аспект позиционирования немного шаткий.

Я был бы очень рад увидеть ETA для собственной реализации или плагина, который эмулирует поведение (без шатания позиционирования/наведения и позволяет использовать собственный HTML) текущей всплывающей подсказки с перекрытием DOM.

Спасибо @pawelfus и @jackyliang.

Павел, как упомянул Джеки, мы запускаем Highcharts для наших клиентов в ближайшие 2-3 недели, и это одно из основных препятствий для нашей реализации. Учитывая, что это ошибка, а не функция, можем ли мы решить эту проблему в ближайшие 2-3 недели?

Привет , @pawelfus. Я хотел уточнить по этому поводу, чтобы узнать, есть ли какая-то ясность по этому поводу / когда мы можем ожидать узнать? Это очень важно для нашего процесса планирования прямо сейчас, поэтому мы ждем дополнительной информации. Спасибо!

Привет, @wynnandrewj , мы обновим эту ветку, как только будет определено ожидаемое время прибытия. У нас есть планы выпустить v6.1.1 в ближайшие 2-3 недели, но я не могу обещать, что исправление этой проблемы будет включено.

Привет, @pawelfus , просто хотел связаться с тобой и твоей командой по этому вопросу. Мы очень близки к запуску Highcharts для клиентов (максимум 2-3 недели для первой партии клиентов), и это, безусловно, блокировщик. Я полностью понимаю, что трудно назвать точную дату, поэтому я не буду об этом спрашивать. Но любая информация о том, будет ли это решаться, и, возможно, приблизительные сроки, будут оценены.

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

Спасибо!

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

Теперь у нас есть кандидат, который вы можете протестировать на http://jsfiddle.net/highcharts/fqx10th9/.

Я считаю, что указанные выше проблемы исправлены, а именно useHTML , мигание при перемещении курсора вверх и появление полос прокрутки на узких страницах.

Пожалуйста, протестируйте этого кандидата. В случае успеха мы сделаем его частью релиза этой недели, Highcharts v6.1.1.

@TorsteinHonsi большое спасибо! Не могу дождаться, чтобы поиграть с этим.

@TorsteinHonsi
Я тоже проверял, работает во всех сценариях.

Это сработало для нас идеально, и добавление обратно заняло всего около 30 минут. ОГРОМНОЕ СПАСИБО за то, что так быстро и качественно все это реализовали!

@TorsteinHonsi, ваша скрипка больше не работает, потому что https://github.highcharts.com/feature/5784-tooltip-outside-box/highcharts.js не существует. я думаю ветка удалена

@BernardoFBBraga

В случае успеха мы сделаем его частью релиза этой недели, Highcharts v6.1.1.

и это было, поэтому мы сделали это. Вы можете использовать Highcharts v6.1.1+, чтобы использовать эту функцию.
Ссылка на API: https://api.highcharts.com/highstock/tooltip.outside
Демонстрация: http://jsfiddle.net/BlackLabel/c70h1akL/1/