В моих параметрах dataLabels для серии я установил allowOverlap на false. Тем не менее, я все еще получаю перекрывающиеся ярлыки. Моя реальная реализация, по общему признанию, действительно индивидуальна и сделана на заказ, и я попытался создать простой jsfiddle, чтобы воспроизвести это, но не могу.
Однако я отследил это до того, что, по моему мнению, является проблемой, по крайней мере, на выходе html.
В этом примере , когда я проверяю элементы меток в Chrome Dev Tools, я вижу что-то вроде следующего для первых нескольких меток:
Кажется, что класс highcharts-data-label-hidden идет вместе с opacity: 0, и это действует, чтобы скрыть соответствующую метку. Если метка класса не применяется, opacity устанавливается на 1, чтобы метка отображалась. Работает как надо; в этом примере нет перекрывающихся меток.
Однако с выводом моего собственного кода я вижу что-то вроде:
В моем выводе показаны все метки; никто не скрыт; и многие пересекаются. Кажется, что класс highcharts-data-label-hidden правильно применяется к определенным меткам, т.е. к тем, которые должны быть скрыты, чтобы избежать перекрытия. Но в то же время для opacity этих элементов установлено значение 1, а не 0 ... на самом деле все элементы имеют opacity из 1 ... и следовательно, все мои ярлыки отображаются, и в результате многие из них перекрываются.
Конечно, если я динамически редактирую теги стиля в Dev Tools, чтобы изменить opacity на 0 для те элементы, которые имеют класс highcharts-data-label-hidden, метки красиво выложены без какого-либо перекрытия.
Я тщетно пытался в течение нескольких часов выяснить, почему мой код устанавливает opacity на 1 даже для этих метки, которые должны быть скрыты, несмотря на то, что класс highcharts-data-label-hidden явно назначен правильно. Мне нужна ваша помощь, даже на основании этой, по общему признанию, ограниченной информации.
Одним из ключей может быть то, что я также заметил, что класс highcharts-data-label-color-0 появляется в рабочем примере для каждого элемента, тогда как highcharts-data-label-color-undefined появляется в моем. Глядя на исходный код H C, похоже, что это dataLabel.addClass(' highcharts-data-label-color-' + point.colorIndex ..., поэтому point.colorIndex в моем случае должно оканчиваться как undefined, но я не уверен, почему и связано ли это с проблемой. Я смотрю с нескрытыми ярлыками. Я делаю некоторые «продвинутые» вещи с раскраской точек и меток в своем коде, так что я могу установить цвет метки в соответствии с цветом точки, даже если действует цветовой градиент (это делается после диаграммы нагрузки). Но я ничего не делаю с непрозрачностью метки, насколько я знаю ... даже не знаю как ... объект dataLabels даже не имеет элемента opacity, который нужно изменить.
Любая помощь приветствуется!
РЕДАКТИРОВАТЬ
Наконец удалось сделать простую копию , просто чтобы доказать, что я не схожу с ума ! Если вы запустите этот пример и проверите перекрывающиеся элементы меток, вы увидите, что (как описано выше) многие из них имеют класс highcharts-data-label-hidden и, тем не менее, имеют opacity: 1, что делает их видимыми, когда они не должны быть.
(частичное) решение, похоже, состоит в том, чтобы делать series.update(false) после каждой серии l oop (только одна серия в этом примере), а не chart.update() в конце ... согласно этот обновленный пример . Вопрос: почему не обязательно передавать true в обновление?
Однако, хотя это улучшение, все же есть странность ... после загрузки попробуйте нажать кнопку Unset Extremes .. . метки снова перекрываются.
И это не просто вызов setExtremes() без аргументов ... загрузите этот пример и нажмите Set Extremes один раз (OK), а затем дважды ( НЕ ОК) ... единственное изменение в этом примере - использование более широких крайностей, чем в оригинале, так что метки перекрываются. Что еще более странно в этом примере, некоторые ярлыки остаются скрытыми, а другие нет ... это не все или ничего.
Даже с первым простым воспроизведением , которое не работает при открытии, если вы нажмете Set Extremes, затем Unset Extremes, метки больше не будут перекрываться. Но снова нажмите Unset Extremes, и они снова перекрываются. Не могу понять, что здесь происходит.
На самом деле, потратив некоторое время на создание этого репро, я теперь замечаю, что оригинальный пример , который я привел в самом начале моего поста также показывает это поведение, без необходимости в событии load() ... откройте это снова ... сначала выглядит нормально, но затем нажмите кнопку Unset Extremes ... метки перекрываются! И в этой небольшой модификации все, что я сделал, это расширил диапазон для Set Extremes ... загрузите это и нажмите Set Extremes (ОК), а затем снова (НЕ ОК).
Как сделать Я гарантирую, что метки не перекрываются в этом контексте, всегда, независимо от того, какие крайние значения оси установлены (и в каком порядке установлены крайние значения)?