kibana如何制作出好看酷炫的图表？

网关开发工作中难免会监控nodejs服务器的运行情况，nodejs的进程运行以及流量我们可能会使用grafana来展示，下图是展示我们其中一个网关项目的运行状态（包括CPU、内存、堆栈使用、Event loop的延时情况以及GC情况(GC的截图放不下了~)）：

了解这块的童鞋可能知道Kibana，很多人大部分拿kibana来做日志的聚合收集查询，其实Kibana还有很多牛逼的功能，这次我们将使用Kibana的图表功能来展示项目的业务数据，手把手教你制作出好看的数据统计图表。

我们先看看效果：

另外一个项目：

上面的工具都是开源的，可以在内网部署，完全免费，可以给公司节省一大笔开支哦^_^

1、前期准备工作

这个准备工作最重要了，决定了你能否展示图表。

1.1、生成埋点文件

首先你得需要埋点，把你想要关注的数据以固定的格式写到一个指定的文件中，我们一般写在bigdata目录下，比如第一张效果图中关注的是服务器请求的一些数据，于是我们使用代码埋点成这样类似的格式：

使用固定的格式(这个格式是你和大数据团队约定好的格式)，以及固定的字段，上图中的字段包含了这些：path、riderId、cityId、type、incoming、timestamp、pid、hostname、status、cost等等，只要你想关注的字段都可以埋点进去。

埋点的代码更简单了，在每一条请求进来的地方和出去的地方放上一段代码(仅供参考)：

this._statLogger.info({ // 这里的_statLogger是一个winston实例
  path: req.path,
  riderId: req.session.riderId,
  cityId: req.session.cityId,
  type: 'incoming'
})
...

this._statLogger.info({
  path: req.path,
  riderId: req.session.riderId,
  cityId: req.session.cityId,
  type: 'outcoming',
  status: 'success',
  cost: Date.now() - start
})

最后生成的数据便是上图的效果。

1.2、配置收集埋点文件和给每个字段建立索引

这一部分因为是交给大数据团队的童鞋搞的，所以具体怎么操作我也不知道(捂脸哭~)。如果实在没大数据团队，谷歌一下总有解决办法的，可以查阅官网文档：elastic,实在不会的留言给我吧，我帮你们去问问看~

反正最后我们要的效果是这样的：

于是万事具备，只欠配置了~

2、Kibana的图表配置

Kibana侧边栏有两个菜单是用来制作和展示图标用的，如下图：

点击Visualize之后，我们可以看到有个+的按钮，点击加号之后，可以看到kibana提供了众多的图表展示：

限于篇幅，我们只讲几个常用的图表的配置方法，其他的图表大家可以举一反三。其中有一个地图功能，做起来的效果也是一点不差的，如下图：

2.1、饼图的制作

在之前的效果图中，我们利用饼图来直观描述发送请求的成功与失败比例，在后一张效果图中，我们用来表示长连接消息发送类型的分布比例，所以涉及到比例展示的无疑使用饼图是最佳方案。

选中饼图之后或者说是选中制作的某种类型图表之后kibana都会让你选择展示图表使用的哪一个项目，如下图：，还贴心地问你是否从已有的图表中fork出来

我们选择好项目之后就到这样的一个界面：

于是我们开始配置，记得点击上图红框中的配置(上图的kibana是新版的Version: 6.5.4，点击的配置叫做Split Series，而旧版本的kibana界面(Version: 5.6.3)点击的配置叫做Split Slices)，配置结果如下：

，

然后点击上图实例箭头所指的三角形，就可以看到效果：

如果我们想指定的时间范围或者其他过滤条件，界面的最上面模块你可以使用到：

接下去的一些图表就不再说这么详细了，罗列出对应的配置即可。

2.2、折线图

折线图来展示上述效果图中每一条请求在单位时间内的个数，利用kibana的分类功能，我们使用下面的配置：

实现如下的效果：

2.3、柱状图

柱状图适合做一些对比或者趋势性的展示，这里我们使用柱状图来展示几个大城市的请求量或者展示每个城市长连接实时在线人数，配置如下：

效果如下：

3、图表聚合展示

这个时候我们就用到左边菜单栏中Dashboard，我们点击加号同样来到新建的界面：

点击Add之后就会弹出想要展示的面板：

之后你可以将同一个项目的所有面板汇聚在一起，从而就有最先开始的两张效果图

于是大功告成~

4、最后

好了，目前我用到的也就这三种，其他的图表的展示其实都一个道理，相信大家可以举一反三，做成更多酷炫的图标供团队使用。有问题欢迎留言讨论~