在Vaadin Charts 2(刚刚发布的2014-12)中,我如何设定图表的标题和副标题?
默认字体很大。我在每个布局中显示多个图表,因此我无法承受如此多的空间浪费在标题上。
是否有一些命令或一些CSS挂钩用于控制标题的字体大小和边距/填充?
答案 0 :(得分: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
方法中(例如由Maven或Vaadin插件创建的Vaadin项目中的MyVaadinUI
)的NetBeans / Eclipse的)。
Title
对象> Style
对象在Vaadin Charts 2中,图表的标题和副标题由适当命名的对象Title
和Subtitle
表示。每个都有一个可选的Style
对象。该对象有几个与常用CSS属性相关的设置,包括:
因此设置字体大小取决于:
图表对象&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 );
图例类似于Title
。 Configuration
包含Legend
个对象。 Legend
包含Style
个对象。
图表对象&gt; <配置对象>
Legend中的项目(标记和系列名称)有自己的样式。要更改这些系列名称的字体或字体大小,请访问项目的样式对象。问题是没有“LegendItem”对象层。请拨打Legend
方法getItemStyle
图表对象&gt; <配置对象>