Пузырьковая диаграмма Highcharts — как переместить метку данных отдельной точки (dataLabel) на передний/верхний план

У меня есть пузырьковая диаграмма Highcharts, где многие точки будут иметь одинаковые или очень похожие значения. В настоящее время видна только метка данных верхней точки. У меня есть функциональность, позволяющая подсвечивать точки (используя метод select()). Когда точка выбрана, я также перемещаю ее вверх с помощью point.graphic.toFront(), но я также хочу, чтобы метка данных выбранной точки также перемещалась вверх. Я не могу понять, как это сделать и возможно ли это.

Есть ли способ переместить метку данных отдельной точки на передний/верхний план, чтобы ее можно было увидеть?

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


highcharts bubble-chart
person jbgarr    schedule 12.04.2016    source источник
comment
Не могли бы вы опубликовать живой пример, например jsFiddle? Будет быстрее работать над существующим кодом, чем писать все заново.   -  person Kacper Madej    schedule 13.04.2016
comment
@KacperMadej здесь очень простой пример: jsfiddle.net/jlbriggs/3d3fuhbb/136 (я пробовал что-то выработать раньше, но далеко не ушло) А впереди, Б спрятано. Как B может иметь приоритет?   -  person jlbriggs    schedule 13.04.2016
comment
Извините, я не предоставил jsFiddle. Я надеялся, что в этом нет необходимости, но большое спасибо за помощь в этом, @jlbriggs.   -  person jbgarr    schedule 13.04.2016

Ответы (1)


arrow_upward
2
arrow_downward

Если вы определите labelrank как свойство точки, это позволит вам контролировать скрытие/отображение меток, когда метки перекрываются.

    data: [{
        x: 1, y: 1, labelrank: 1, name: 'A'
        },{
        x: 1, y: 1, labelrank: 2, name: 'B' 
        }]
    }]

Пример: http://jsfiddle.net/x5sfcekL/

person Kacper Madej    schedule 13.04.2016
comment
Это здорово! Где информация о labelrank в документах? Я никогда не видел никаких упоминаний об этом. В любом случае, большое спасибо за помощь в этом. Это решило мою проблему. - person jbgarr; 13.04.2016
comment
Хороший. И просто примечание - кажется, вы могли бы пропустить его назначение для каждой точки и обновить его только в точках, где есть конфликт, который вы хотите перезаписать, установив точку, которую вы хотите сверху, на 1. - person jlbriggs; 13.04.2016
comment
@jlbriggs На самом деле это именно то, что я сделал. Итак, для дальнейшего использования вот важная часть кода обновления, которая была полезна для меня: point.update({labelrank: 1}) - person jbgarr; 13.04.2016
comment
@jbgarr Это задокументировано в Highmaps API, но является частью Highcharts и работает в Highcharts. API: api.highcharts.com/highmaps#series‹map›.data. labelrank Если этого недостаточно, боюсь, вам придется изучить Поднимите код и найдите labelrank, но он имеет только 6 вхождений, так что это не должно быть проблемой. - person Kacper Madej; 14.04.2016
comment
@KacperMadej Хорошо, приятно это знать. Я собираюсь предложить добавить его и в Highcharts API, поскольку он там не задокументирован и очень полезен. Я знаю, что есть другие, которые столкнулись с той же проблемой, и трудно использовать API, если вы даже не знаете, что он существует. Большое спасибо, что указали на это. - person jbgarr; 14.04.2016
comment
@jbgarr Добро пожаловать. Я передал это предложение разработчикам Highcharts — они рассмотрят его. И я вижу, что вы разместили это предложение на github. И обновлен API - github.com/highcharts/highcharts/issues/5217 Спасибо. за предложение :) - person Kacper Madej; 15.04.2016