Стилизация заголовков в диаграммах Ваадина
В Vaadin Charts 2 (только что вышла в 2014-12), как я могу оформить название и подзаголовок диаграмм?
Размер шрифта по умолчанию огромен. Я показываю несколько диаграмм на макет, так что я не могу позволить себе так много времени тратить на титры.
Есть ли какая-то команда или несколько CSS-хуков для управления размером шрифта заголовков и полей / отступов?
1 ответ
тема
Различные Themeуправление внешним видом диаграмм сильно различается по размеру. Новые Вало темы (ValoLightTheme а также ValoDarkTheme в соответствии с новой темой Vaadin), как правило, намного больше, чем предыдущий по умолчанию, VaadinTheme (соответствует теме оленей Ваадина).
Таким образом, один простой способ изменить размеры меток диаграммы - это переключать темы. Тема не установлена на отдельном графике. Вместо этого используйте глобальные настройки, влияющие на все графики в пределах 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 Charts 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 enum для 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 объект.
Объект диаграммы> Объект конфигурации> Объект легенды> Объект стиля
Легенда
Элементы (маркер и название серии) в легенде имеют собственный стиль. Чтобы изменить шрифт или размер шрифта названий этих серий, откройте объект "Стиль". Подвох в том, что нет слоя объекта "LegendItem". Вместо доступа к такому объекту, вызовите Legend метод getItemStyle
Объект диаграммы> Объект конфигурации> Объект легенды>
getItemStyleметод