Стилизация заголовков в чартах Vaadin

В Vaadin Charts 2 (только что выпущенном в 2014–2012 гг.), как мне оформить заголовок и подзаголовок диаграмм?

Размер шрифта по умолчанию огромен. Я показываю несколько диаграмм на макет, поэтому я не могу позволить себе тратить столько места на заголовки.

Есть ли какая-то команда или какие-то CSS-хуки для управления размером шрифта заголовков и отступами/отступами?


person Basil Bourque    schedule 25.12.2014    source источник


Ответы (1)


Тема

Различные Theme, управляющие внешним видом диаграмм, сильно различаются по размеру. Новые темы Valo (ValoLightTheme и ValoDarkTheme, что соответствует новому Valo), как правило, намного больше, чем предыдущая по умолчанию, VaadinTheme (соответствует Vaadin). тема северного оленя).

Таким образом, один из простых способов изменить размеры меток диаграммы — переключить тему. Тема не устанавливается на отдельной диаграмме. Вместо этого используйте глобальную настройку, влияющую на все диаграммы в UI ( конкретное окно/вкладка/портлет веб-браузера). ChartOptions имеет setTheme.

ChartOptions.get().setTheme( new VaadinTheme() ); // All charts within a UI share the same Theme object.

Если у вас нет особых потребностей, я предлагаю поместить этот код в метод init вашего подкласса UI (например, MyVaadinUI в проектах Vaadin, созданных Maven, или подключаемом модуле Vaadin для NetBeans/Eclipse).

Title Объект > Style Объект

В диаграммах Vaadin 2 заголовок и подзаголовок диаграммы представлены объектами с соответствующими именами, Title и Subtitle. У каждого есть необязательный Style объект. Этот объект имеет несколько настроек, соответствующих обычным свойствам CSS, в том числе:

  • семейство шрифтов
  • размер шрифта
  • цвет

Размер шрифта

Таким образом, установка размера шрифта — это вопрос выборки:

Объект диаграммы > объект конфигурации > объект заголовка > объект стиля

…а затем передать строковое значение размера текста в setFontSize.

Вроде просто, но есть одна загвоздка. Объект Style является необязательным. По умолчанию он не существует. Другими словами, объект Style предназначен для того, чтобы вы и я переопределяли уже определенное внутреннее форматирование.

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

Пример кода с использованием Vaadin 7.3.7 со свежим новым (по состоянию на 2014-12) Vaadin Charts 2 в Java 8.

final Configuration configuration = chart.getConfiguration();  // As per usual, interact with the chart via its Configuration object.
Title t = configuration.getTitle();  // Obtain the object representing the title (or Subtitle for subtitle).
if ( t.getStyle() == null ) {  // If not yet existing…
    t.setStyle( new Style() );  // Instantiate a Style object and install on the Title object.
}
Style st = t.getStyle();  // Obtain the Style object (whether new or pre-existing).
st.setFontSize( "0.5em" );  // Half an em is teeny-tiny, but demonstrates this approach works to change the font size.

Выравнивание слева направо

Чтобы установить выравнивание заголовка по левому или правому краю диаграммы, объект Style не нужен. Сам объект Title имеет setHorizontalAlignment. Передайте значения, определенные HorizontalAlign перечисление для LEFT, CENTER, RIGHT.

final Configuration configuration = chart.getConfiguration();  // As per usual, interact with the chart via its Configuration object.
Title t = configuration.getTitle();  // Obtain the object representing the title (or Subtitle for subtitle).
t.setHorizontalAlign( HorizontalAlign.LEFT );

Легенда

Легенда похожа на Title. Configuration содержит Legend объект. Legend содержит Style объект.

Объект «Диаграмма» > объект «Конфигурация» > объект «Легенда» > объект «Стиль»

Предмет легенды

Элементы (маркер и название серии) в легенде имеют собственный стиль. Чтобы изменить шрифт или размер шрифта названий этих серий, обратитесь к объекту Style элементов. Загвоздка в том, что нет слоя объекта "LegendItem". Вместо доступа к такому объекту вызовите метод Legend getItemStyle

Объект диаграммы > объект конфигурации > объект легенды > метод getItemStyle

person Basil Bourque    schedule 25.12.2014