kibana如何製做出好看酷炫的圖表？

網關開發工做中不免會監控nodejs服務器的運行狀況，nodejs的進程運行以及流量咱們可能會使用grafana來展現，下圖是展現咱們其中一個網關項目的運行狀態（包括CPU、內存、堆棧使用、Event loop的延時狀況以及GC狀況(GC的截圖放不下了~)）：

瞭解這塊的童鞋可能知道Kibana，不少人大部分拿kibana來作日誌的聚合收集查詢，其實Kibana還有不少牛逼的功能，此次咱們將使用Kibana的圖表功能來展現項目的業務數據，手把手教你製做出好看的數據統計圖表。

咱們先看看效果：

另一個項目：

上面的工具都是開源的，能夠在內網部署，徹底免費，能夠給公司節省一大筆開支哦^_^

一、前期準備工做

這個準備工做最重要了，決定了你可否展現圖表。

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.二、配置收集埋點文件和給每一個字段創建索引

這一部分由於是交給大數據團隊的童鞋搞的，因此具體怎麼操做我也不知道(捂臉哭~)。若是實在沒大數據團隊，谷歌一下總有解決辦法的，能夠查閱官網文檔：elastic,實在不會的留言給我吧，我幫大家去問問看~

反正最後咱們要的效果是這樣的：

因而萬事具有，只欠配置了~

二、Kibana的圖表配置

Kibana側邊欄有兩個菜單是用來製做和展現圖標用的，以下圖：

點擊Visualize以後，咱們能夠看到有個+的按鈕，點擊加號以後，能夠看到kibana提供了衆多的圖表展現：

限於篇幅，咱們只講幾個經常使用的圖表的配置方法，其餘的圖表你們能夠觸類旁通。其中有一個地圖功能，作起來的效果也是一點不差的，以下圖：

2.一、餅圖的製做

在以前的效果圖中，咱們利用餅圖來直觀描述發送請求的成功與失敗比例，在後一張效果圖中，咱們用來表示長鏈接消息發送類型的分佈比例，因此涉及到比例展現的無疑使用餅圖是最佳方案。

選中餅圖以後或者說是選中製做的某種類型圖表以後kibana都會讓你選擇展現圖表使用的哪個項目，以下圖：，還貼心地問你是否從已有的圖表中fork出來

咱們選擇好項目以後就到這樣的一個界面：

因而咱們開始配置，記得點擊上圖紅框中的配置(上圖的kibana是新版的Version: 6.5.4，點擊的配置叫作Split Series，而舊版本的kibana界面(Version: 5.6.3)點擊的配置叫作Split Slices)，配置結果以下：

，

而後點擊上圖實例箭頭所指的三角形，就能夠看到效果：

若是咱們想指定的時間範圍或者其餘過濾條件，界面的最上面模塊你可使用到：

接下去的一些圖表就再也不說這麼詳細了，羅列出對應的配置便可。

2.二、折線圖

折線圖來展現上述效果圖中每一條請求在單位時間內的個數，利用kibana的分類功能，咱們使用下面的配置：

實現以下的效果：

2.三、柱狀圖

柱狀圖適合作一些對比或者趨勢性的展現，這裏咱們使用柱狀圖來展現幾個大城市的請求量或者展現每一個城市長鏈接實時在線人數，配置以下：

效果以下：

三、圖表聚合展現

這個時候咱們就用到左邊菜單欄中Dashboard，咱們點擊加號一樣來到新建的界面：

點擊Add以後就會彈出想要展現的面板：

以後你能夠將同一個項目的全部面板匯聚在一塊兒，從而就有最早開始的兩張效果圖

因而大功告成~

四、最後

好了，目前我用到的也就這三種，其餘的圖表的展現其實都一個道理，相信你們能夠觸類旁通，作成更多酷炫的圖標供團隊使用。有問題歡迎留言討論~

若是你們對grafana的配置也感興趣的話，能夠下次再寫一篇介紹grafana使用的文章~