Vaadin 图表 – 将标题和图例放在同一行？

Question

在Vaadin Charts 2 中，有没有办法让Title 和Legend 出现在同一行？我的意思是，可以都出现在图表上方，还是都出现在图表下方？

将它们放在同一水平线上可以节省垂直空间。当在一个页面上同时呈现多个图表时，这些保存的像素更加宝贵。

Answer 1

setVerticalAlign

您可以通过在Legend 本身上调用setVerticalAlign 来使它们几乎位于同一水平线上。使用VerticalAlign 枚举中定义的常量。

final Configuration configuration = myChart.getConfiguration();
configuration.getLegend().setVerticalAlign( VerticalAlign.TOP );

版本 1 与 2

请注意，图例区域的位置在 Vaadin 图表 1 和 2 之间发生了变化。引用 the doc（在 Vaadin 图表后面的引擎中的 HighCharts）：

在 Highcharts 1.x 版本中，图例区域的位置由 CSS 确定。在 2.x 中，位置由 align、verticalAlign、x 和 y 等属性确定，但仍会解析样式以向后兼容。