Highchart: Как рассчитать расстояние между каждым столбцом в гистограмме

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

  1. Можно ли дать некоторый запас между каждой меткой и показать полосу в центре, выровненную по метке? (с изменением расстояния между каждым стержнем или без него)
  2. Можно ли рассчитать расстояние между каждым баром?
  3. Можно ли рассчитать количество строк, которые займет метка?

Здесь я устанавливаю высоту графика с количеством баров в нем со случайным предположением каждой метки, занимающей 4 строки.

Изображение изменено, иногда на нем есть метки с одной линией, а иногда и с несколькими линиями.

Пример:

Пример изображения


person PSN    schedule 06.11.2017    source источник
comment
Расстояние между столбцами полностью зависит от 1) высоты области диаграммы/графика, 2) количества столбцов, 3) ширина стержней. Все это вы контролируете. Вычисление пространства между стержнями — это просто базовая математика, основанная на этих факторах. Подсчет количества строк, которые займет метка, значительно сложнее.   -  person jlbriggs    schedule 06.11.2017
comment
Я могу подтвердить, что трудно узнать, сколько строк. Наши бизнес-правила в HTML заключаются в том, что мы можем разрешить многоточие, но при экспорте нам нужно показывать полный текст. Много работы, проб и ошибок и тестов потребовалось, чтобы разработать общую формулу, которая регулирует высоту диаграммы в зависимости от длины категорий. Однако единого алгоритма для всех не существует.   -  person wergeld    schedule 06.11.2017
comment
@jlbriggs: я рассчитываю высоту области графика, считая количество полос, каждая полоса имеет фиксированные 18 пикселей. но так как я не должен показывать многоточие. Я беру приведенное выше и умножаю на случайное число, которое даст достаточно места для отображения 4 строк метки.   -  person PSN    schedule 06.11.2017
comment
Или используйте моноширинный шрифт, чтобы было очень легко предсказать размеры, необходимые для текстовой метки.   -  person pokeybit    schedule 06.11.2017


Ответы (1)


Эта информация может быть полезна в контексте вопроса 3 (ответы на вопросы 1 и 2 приведены в комментариях под вопросом):

Разделение текста метки на отдельные строки (в случае, когда useHTML === false) выполняется в функции Highcharts.SVGRenderer.prototype.buildText.

В этой демонстрации я перезаписал эту основную функцию и добавил console.log, которая выводит количество <tspans>, сгенерированных для конкретной строки: http://jsfiddle.net/kkulig/x2619jmv/

Кажется, что Highcharts может запускать его несколько раз, прежде чем найдет правильную конфигурацию меток.

person Kamil Kulig    schedule 07.11.2017