在Vaadin图表中设置标题样式

时间:2014-12-25 07:17:59

标签: java vaadin vaadin7 vaadin-charts

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

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

是否有一些命令或一些CSS挂钩用于控制标题的字体大小和边距/填充?

1 个答案:

答案 0 :(得分:6)

主题

控制图表外观的各种Theme在尺寸上有很大差异。新的Valo主题(ValoLightThemeValoDarkTheme,与Vaadin的新Valo主题相匹配)往往比之前的默认值VaadinTheme大得多(匹配Vaadin的Reindeer主题)。

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

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

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

Title对象> Style对象

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

  • font family
  • 字体大小
  • 颜色

字体大小

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

  

图表对象&gt; <配置对象>标题对象&gt;样式对象

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

看似简单,但有一个问题。 Style对象是可选的。默认情况下,存在。换句话说,Style对象是为了让您和我覆盖已经定义的内部格式。

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

在Java 8中使用Vaadin 7.3.7和全新的(as of 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 );

图例

图例类似于TitleConfiguration包含Legend个对象。 Legend包含Style个对象。

  

图表对象&gt; <配置对象> 样式对象

传奇项目

Legend中的项目(标记和系列名称)有自己的样式。要更改这些系列名称的字体或字体大小,请访问项目的样式对象。问题是没有“LegendItem”对象层。请拨打Legend方法getItemStyle

,而不是访问此类对象
  

图表对象&gt; <配置对象> getItemStyle方法