在今天的文章中，我们来使用 timelion 在 canvas 中实时画图。我将以 Elastic Stack 7.10 来进行展示。

准备数据

我们将以 Kibana 自带的索引来进行展示。打开 Kibana:

这样，我们就把索引kibana_sample_data_logs 导入到 Elasticsearch 中了。

在 canvas 中使用 timelion 画图

打开 canvas 应用：

我们把如下的代码拷贝到如下的编辑器中：

filters
| timefilter from="now-10d" to="now"
| timelion
  query=".es(index=kibana_sample_data_logs,q=geo.dest:CN, metric=avg:bytes).color(blue).label("CN"),  .es(index=kibana_sample_data_logs,q=geo.dest:US, metric=avg:btgcodeytes).color(red).label("US")"
| pointseries x="@timestamp" y="value" color="label"
| plot defaultStyle={seriesStyle lines=3 points="0"}
  palette={palette "#1ea593" "#2b70f7" "#ce0060" "#38007e" "#fca5d3" "#f37020" "#e49e29" "#b0916f" "#7b000b" "34130c" gradient=false } xaxis=false
| render

在上面，我们绘制了了两个 timelion 的时序图。如果大家对 timelion 还不是很熟的话，请参阅我之前的文章 “使用 Kibana Timelion 进行时间序列分析”。点击上面的 Run 按钮：

tgcode

我们可以看到两个不同的时序图，分别代表了以美国（US）和中国（CN）为目的地的平均流量图。