- 添加一个标题
- 更改系列类型
- 改变一个系列的颜色和不透明度
- 修改图例
在上一节中,你用两个系列创建了一个时间轴图表,让我们继续定制这个可视化。
在进行任何其他修改之前,将title()
函数附加到表达式的末尾,以添加具有有意义名称的标题,这将使不熟悉的用户更容易理解可视化目的。对于这个示例,将title('CPU usage over time')
添加到原始系列中,在Timelion 查询栏中使用以下表达式:
.es(offset=-1h,index=metricbeat-, timefield=‘@timestamp’, metric=‘avg:system.cpu.user.pct’).label(‘last hour’), .es(index=metricbeat-, timefield=‘@timestamp’, metric=‘avg:system.cpu.user.pct’).label(‘current hour’).title(‘CPU usage over time’)
为了进一步区分过去一小时系列,你将把图表类型更改为区域图表,为了做到这一点,你需要使用.lines()
函数来定制折线图,你将设置fill
和width
参数,分别设置折线图的填充和折线宽度。在本例中,你将通过添加.lines(fill=1,width=0.5)
将填充级别设置为1,边框宽度设置为0.5,在Timelion查询栏中使用以下表达式:
.es(offset=-1h,index=metricbeat-, timefield=‘@timestamp’, metric=‘avg:system.cpu.user.pct’).label(‘last hour’).lines(fill=1,width=0.5), .es(index=metricbeat-, timefield=‘@timestamp’, metric=‘avg:system.cpu.user.pct’).label(‘current hour’).title(‘CPU usage over time’)
让我们给这些系列涂上颜色,使当前的小时系列比过去一个小时系列流行一点,color()
函数可用于更改任何系列的颜色,并接受标准颜色名称、十六进制值或分组系列的颜色模式。对于这个示例,你将在过去一个小时使用.color(gray)
,而在当前小时使用.color(#1E90FF)
,在Timelion查询栏中输入以下表达式进行调整:
.es(offset=-1h,index=metricbeat-, timefield=‘@timestamp’, metric=‘avg:system.cpu.user.pct’).label(‘last hour’).lines(fill=1,width=0.5).color(gray), .es(index=metricbeat-, timefield=‘@timestamp’, metric=‘avg:system.cpu.user.pct’).label(‘current hour’).title(‘CPU usage over time’).color(#1E90FF)
最后但并非最不重要,调整图例,使其占用尽可能小的空间,你可以使用.legend()
函数来设置图例的位置和样式。在本例中,通过将.legend(columns=2, position=nw)
两列追加到原始系列,将图例放置在可视化的西北位置,使用以下表达式进行调整:
.es(offset=-1h,index=metricbeat-, timefield=‘@timestamp’, metric=‘avg:system.cpu.user.pct’).label(‘last hour’).lines(fill=1,width=0.5).color(gray), .es(index=metricbeat-, timefield=‘@timestamp’, metric=‘avg:system.cpu.user.pct’).label(‘curren