0

在 Vaadin Charts 2（刚刚发布 2014-12）中，如何设置图表的标题和副标题？

默认字体大小很大。我在每个布局中显示多个图表，所以我无法承受浪费在标题上的这么多空间。

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

4

1 回答 1

6

主题

控制图表外观的各种Theme控制方式的大小差异很大。新的 Valo 主题（ValoLightTheme和ValoDarkTheme匹配 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（例如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方法。传递由HorizontalAlignLEFT、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方法

于 2014-12-25T09:03:23.467 回答