前端折线图中背景_时序图在SLS中的使用技巧

场景问题

• 通过SQL分析出实际场景中的数据，如果有数据缺失怎么办？
• 在折线图中如果有一些显著的异常点，能否主动的标记出来？
• 能否自定义某个观测指标的区间，在折线图中，添加区间的绘制能力？
• 能否支持多张图表在相同的时间轴上的联动操作？

基础数据的提取

假设我们现在有一个网站的访问日志，我们去找某个域名("http://aaa.aliyun.log.com")，访问的路径为("/account/query") 的分钟级别的流量，通过如下SQL，我们可以得到一条时序曲线，我们选择普通的折线图，我们可以发现，折线图中横坐标显示的比较凌乱，没有很好的适应数据本身对时间进行格式化。

* and __topic__: version_1 and domain: "aaa.aliyun.log.com" and url: "/account/query" | 
SELECT date_trunc('minute', __time__) AS time, SUM(body) AS body
FROM log GROUP BY time ORDER BY time LIMIT 500

配置折线图的高级属性

日常的分析中，很多数据都有明显的时序特征（至少有一列数据是时间列），日志服务团队的前端同学在折线图的基础上，进行了功能的增强，只要配置一下，就能提供整体报表的逼格，同时也能使用高级的联动功能：

• 图表中时间轴的自适应显示
• 可以主动配置时序曲线中的异常点（可以设置异常点的上下界限）
• 可以定制高亮显示的曲线区间，让图表更加丰富
• 可以设置时序图中局部放大的功能（类似Zoom In操作）
• 可以设置多时序图的联动机制（在相同的时间维度下，进行联动操作）

---

，我们一起来看下时序图的具体配置吧！

• 通过SQL语句，我们可以得到如下的一张折线图，默认配置

• 在 属性配置 这个选项卡找到如下的第一张图，接下来具体描述下，新增配置项的说明
  • 异常点上界：选择维度中的数数据值 > 用户给定值，则在图表中对应的位置标记红圈
  • 异常点下界：选择维度中的数数据值 < 用户给定值，则在图表中对应的位置标记红圈
  • 区域上界维度：当你的SQL结果中有多列数据时，比如每个时间区间的95分位数，可以标记为上区间
  • 区域下界维度：当你的SQL结果中有多列数据时，比如每个时间区间的50分位数，可以标记为下区间
  • 时间序列：需要用户选择指定的维度（这个维度最后是通过date_trunc或者date_format得到的结果）
  • 自动补点：用户开启自动补点后，在图表可视化这一层，可以通过指定的策略对缺失点进行补齐
  • 机器学习：开启机器学习后，默认提供三种功能：异常点检测、时序预测、周期检测，降低用户写SQL的门槛

配置多时序图的联动

• 配置多个时序图中的联动操作
  • 在选择“时间序列” 生效后，我们将属性卡切到“交互行为”这一栏
  • 在事件行为所对应的下拉列表中选择“拖动修改时间”，选择对应的应用范围
  • 保存到对应的仪表盘中

Show下配置的联动效果

SLS中时序图的联动效果https://www.zhihu.com/video/1213761648206462976