Блог

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

Если я включу allowOverlap , метки … перекрывают друг друга. То есть они просто нарисованы друг на друге, без какого-либо отношения друг к другу. Они не меняют свой «порядок», даже когда я навожу курсор мыши на «самые низкие» из них, и даже если я нажимаю на них.

Однако, если я отключу allowOverlap , некоторые метки просто не будут отображаться вообще! Если я наведу курсор мыши на их маркер «шар» на временной шкале, появится небольшая метка, но это не «полная» метка, которая есть у других, и в любом случае я хочу, чтобы они всегда отображались и не нужно было ничего наводить.

Мне нужно, чтобы все метки отображались одновременно, но не перекрывались визуально.

Div контейнера имеет ширину 10 000 пикселей, поэтому для их визуального отображения более чем достаточно места. Есть тонны пустого пространства, как по бокам каждой метки, так и особенно над и под ними. И тексты меток тоже очень короткие, поэтому они даже не занимают много места.

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

Я, конечно, читал документацию — в течение многих часов — но не смог найти ни одного очевидного варианта, такого как allowMessyLabels .

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

Позвольте мне пояснить, как allowOverlap работает эта опция — логика вычисляет, достаточно ли места для каждой метки, чтобы отобразить ее без перекрытия. Если существует перекрытие allowOverlap , это опция, которая дает пользователю возможность отображать все метки независимо от того, перекрываются они или нет. Как предлагается в API, вы можете попытаться сделать логику менее чувствительной, установив значение dataLabels.padding 0.

API: https://api.highcharts.com/highcharts/plotOptions.line.dataLabels .allowOverlap

Если я наведу курсор мыши на их маркер «ball» на временной шкале, появится небольшая метка, но это не «полная» метка, которая есть у других, и в любом случае я хочу, чтобы они всегда отображались, и мне не нужно ничего наводить.

Это pops up всплывающая подсказка, которая представляет собой другую функцию — https://www.highcharts.com/docs/chart-concepts/tooltip

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