多图表的布局控制

1 概述

下面是展示了如何并排显示两张图片, 带有主副标题 :

如果不带主标题, 会像下面这样 :

2 多行

如果有两张以上的图片,可能需要将它们排列在多行中。可以使用 layout-nrow 属性 :

3 自定义布局

layout 属性则能够创建复杂的布局, 下面范例第一行是两张等宽的图,第二行是一张横跨整个行宽的图 :

layout="[[1,1], [1]]" 的含义是创建两行,第一行有两个等宽的列,第二行有一个单列。 下面范例第一行是 70% 和 30% 占比的两张图片 :

可以使用负值来增加间距 :

4 垂直布局

如果图片高度不同, 显示在一行的时候可以使用 layout-valign 属性控制垂直对齐 :

注意 : 垂直对齐不限于图片, 面板(panel)里的任何其他元素(图表、表格、文本块等)也可以这样对齐

5 链接