Блог

Хотелось бы установить text-alingment значение center для метки метки оси x диаграммы JavaFX.

У меня есть ось X оси чисел JavaFX с датами, использующая многострочный текст для меток меток. Установка метки галочки на «дд / ММ ГГГГ» или «ЧЧ: мм недд / ММ» с AxisX.setTickLabelFormatter(getTimeAxisString()) помощью . Пользовательская функция getTimeAxisString() предоставляет форматированную строку для метки галочки. По умолчанию это приводит к выравниванию текста по левому краю, как показано на этом рисунке: метки меток оси

Существует ли метод JavaFX для изменения текста здесь? Могу ли я назначить класс CSS для метки галочки?

Удивительно, но стилизация меток для меток напрямую не поддерживается. Кроме того, все диаграммы и сотрудники проявляют большую осторожность, чтобы не раскрывать узлы в своей иерархии ни в одном API (даже внутри). Похоже, нам нужно полагаться на детали реализации Axis ..

• класс, инкапсулирующий состояние метки для метки, называется TickMark
• в нем есть поле типа String с именем label: это строковое представление значения, настраиваемое с помощью преобразователя value -> String
• в нем есть поле типа Text с именем TextNode: это узел, добавленный к оси, и узел, который мы хотим стилизовать
• Текст как таковой не имеет класса стиля по умолчанию, который недоступен через axis.lookup(style)
• TextNode не имеет пользовательского стиля по умолчанию, который мог бы быть задан его родительской осью (в отличие от метки оси)

Основная задача — получить доступ к тексту и затем оформить его, либо напрямую настроив его свойства, либо установив пользовательский класс стилей и настроив его с помощью css.

Основной путь решения — прослушивать дочерние элементы оси и настраивать свойства всех узлов типа Text при добавлении. Приведенный ниже фрагмент задает пользовательский класс стиля.

 xAxis.getChildrenUnmodifiable().addListener((ListChangeListener<Node>) c -> {
    while (c.next()) {
        if (c.wasAdded()) {
            for (Node mark : c.getAddedSubList()) {
                if (mark instanceof Text) {
                    mark.getStyleClass().add("axis-tick-mark-text-node");
                }
            }
            
        }
    }
});
  

Пример оформления:

 .axis-tick-mark-text-node {
    -fx-text-alignment: center;
    -fx-fill: red;
}