在Vaadin图表中设置标题样式

Question

在Vaadin Charts 2(刚刚发布的2014-12)中,我如何设置图表的标题和副标题？

默认字体大小很大.我在每个布局中显示多个图表,因此我无法承受如此多的空间浪费在标题上.

是否有一些命令或一些CSS钩子来控制标题的字体大小和边距/填充？

Answer 1

主题

Theme控制图表外观的各种因素在尺寸上有很大差异.新的Valo主题(ValoLightTheme以及ValoDarkTheme与Vaadin的新Valo主题相匹配)往往比之前的默认主题大得多VaadinTheme(与Vaadin的驯鹿主题相匹配).

因此,更改图表标签大小的一种简单方法是切换主题.主题未在单个图表上设置.而是使用影响UI(Web浏览器的特定窗口/选项卡/ portlet)中的所有图表的全局设置.这个ChartOptions班有一个setTheme方法.

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

除非您有特殊需求,否则我建议将该代码放在子类的init方法中UI(例如MyVaadinUI在Maven创建的Vaadin项目或NetBeans/Eclipse的Vaadin插件中).

Title对象> Style对象

在Vaadin Charts 2中,图表的标题和副标题由适当命名的对象表示,Title并且Subtitle.每个都有一个可选Style对象.该对象有几个与常用CSS属性相关的设置,包括:

• 字体系列
• 字体大小
• 颜色

字体大小

因此设置字体大小取决于获取:

图表对象>配置对象>标题对象>样式对象

...然后将文本大小的字符串值传递给setFontSize方法.

看似简单,但有一个问题.Style对象是可选的.默认情况下,它确实不存在.换句话说,该Style对象旨在让您和我覆盖已定义的内部格式.

因此,您必须首先检查Style对象是否存在,如果为null,则实例化它.

使用Vaadin 7.3.7和Java 8中的全新(截至2014-12)Vaadin Charts 2的示例代码.

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对象.

图表对象>配置对象>图例对象>样式对象

传奇项目

Legend中的项目(标记和系列名称)有自己的样式.要更改这些系列名称的字体或字体大小,请访问项目的样式对象.问题是没有"LegendItem"对象层.而不是访问这样的对象,请调用该Legend方法getItemStyle

图表对象>配置对象>图例对象> getItemStyle方法