「運維」看完這篇，成為Grafana高手！

一、背景

QQ直播前端團隊接入騰訊雲前端性能監控（RUM）後，對目前的監控能力以及上報資料進行了梳理， 并着手進行了前端性能監控的專項建設，其中監控資料大盤建設是不可或缺的一環。

可視化的監控大盤可以清晰明了的觀察到各項目運作情況，宏觀上能快速進行項目間的橫向對比，也可以非常便捷的進行項目各資料次元的詳細展示，縱向的分析各名額資料的統計。

通過對資料大盤支援能力的調研，我們采用Grafana進行了資料大盤的建設。通過搭建Grafana服務，然後添加監控上報資料，最終使得【QQ直播前端監控資料大盤】得以建設完成。

那麼什麼是Grafana？

Grafana是一款開源的資料可視化工具，使用Grafana可以非常輕松的将資料轉成圖表(如下圖)的展現形式來做到資料監控以及資料統計。

Grafana官方提供Linux，Windows，MacOS，Docker版本。

下載下傳連結: https://grafana.com/get/

本文将依托建設資料大盤的經驗，重點介紹一下Grafana的使用，助力小夥伴們成為Grafana高手。

二、資料與圖表

資料的可視化都是通過圖表為載體的，不同的圖表可以将資料進行不同側重點的展現，要進行資料大盤的建設，首先要對圖表有一個簡單的了解，這樣才能在資料大盤搭建過程中選擇合适的圖表，合理的進行可視化效果的展示。

認識Grafana的圖表Grafana的圖表的選擇路徑都是在Visualization類目下進行圖表的選擇

折線圖

示例圖表：Time series

圖表配置：Graph styles

• style: Lines
• Fill opacity: 3
• Gradient mode: scheme

柱狀圖

示例圖表：Time series

圖表配置：Graph styles

• style: Bars
• Fill opacity: 3
• Gradient mode: scheme

點狀圖

示例圖表：Time series

圖表配置：Graph styles

• style: Points
• Point size: 5
• Stack series: Normal

餅狀圖

示例圖表：Pie chart

單一狀态圖

示例圖表：Stat

圖表配置：Graph styles

• style: Bars
• Fill opacity: 3
• Gradient mode: scheme

儀表盤

示例圖表：Gauge

表格

示例圖表：Table

文本

示例圖表：Text（支援Markdown和HTML兩種格式）

三、資料與圖表的搭配

（一）按照資料格式區分

柱狀圖， 折線圖， 餅狀圖的圖表都需要資料具有時間序列，用于展示在一定的時間區間或者是連續的時間範圍内，單一資料或者多種分類資料的變化趨勢，或者是數量占比。

狀态圖， 表格資料，儀表盤等則對資料沒有時間序列要求，狀态圖，儀表盤可用于進行一些總結性的資料展示，例如速度，溫度，進度，完成度等， 表格資料則更适合展示複雜資料或者多元度資料。

（二）按照使用意圖區分

資料比較：柱狀圖，折線圖比較合适，可以實作單資料，多種類資料的比較，能清晰看到變化趨勢。

占比分類：餅圖，儀表盤， 單一狀态圖等比較合适，可以清晰的看到每個資料整體性的占比。

趨勢比較：折線圖，面積圖(折線可設定覆寫面積) 等比較合适，能直覺展現資料變化。

分布類：餅圖， 散點圖等比較合适。

（三）其他

文字類圖表就如同名字含義一樣，可用于展示文字相關資訊，并且個性化定制程度，靈活性排布支援都非常高（得益于Markdown和HTML的強大靈活性）

表格對于日志類型，或者是其他多元度資料展示較為合适，适用于整體性給出一個報表，并且具備排序等公共功能，友善資料快速比較。

四、資料與圖表的添加與擴充

資料源與圖表的擴充Grafana都采用插件的形式，是以我們想要擴充某個類型的資料源或者圖表時，都需要先在Grafana插件市場找到目标插件，然後進行安裝，如下圖代碼

FROM grafana/grafana:8.3.1
USER root
RUN grafana-cli plugins install grafana-clickhouse-datasource //資料源插件
RUN grafana-cli plugins install auxmoney-waterfall-panel //圖表插           

（一）資料源添加

打開Grafana平台，點選左側“設定”圖示，進入DataSource管理面闆。

在“Add data source"面闆中選擇合适的資料源，并配置資料庫資訊。下圖以Promethrus為例，添加資料源需要進行必要的配置，例如資料源的ip，port以及鑒權資訊等。

（二）圖表插件添加

打開Grafana平台，點選左側：“設定”圖示，進入Plugins管理面闆。

在tab欄篩選已經安裝的插件，就可以看到已經安裝可以使用的插件。

圖表面闆已經安裝，可以直接在建立面闆的時候指定類型使用。

五、Grafana入門使用

這裡需要區分兩個概念：

• 看闆（dashboard）: 一個或多個資料圖表形成的集合。
• 面闆（panel）：組成看闆的其中一個圖表。

（一）建立一個看闆 (dashboard)

建立一個資料可視化看闆的前提是需要有資料源的接入， 具體具體接入方法見資料與圖表的添加與擴充。

打開Grafana平台，點選左側"加号"，點選Create類目下的Dashboard 按鈕，新建立一個空表的看闆， 會預設彈出四個添加panel的選項

• 添加一個空白面闆
• 添加一個新的行，用于面闆的分類
• 從面闆庫添加一個面闆
• 從剪貼闆添加一個面闆，可以用來快速複制一個已有的面闆

點選看闆右上角儲存看闆。

• 輸入看闆名稱
• 輸入簡單描述文字
• 選擇看闆所屬目錄（用來分類管理看闆）
• 可選為看闆設定Tag，标記看闆的特征，後期可根據Tag來篩選看闆
• 其他選項可按需自主定義

（二）建立面闆 (panel)

點選上圖所示的圖表，會彈出建立面闆的四種選擇，可以根據自己的需求自主建立，下面我們以建立空白面闆為例

擊Add a new panel按鈕，你就會建立一個空白資料的圖表面闆，如下圖

（三）面闆資料的擷取

前文已經提到， 建立一個資料可視化看闆的前提是需要有資料源的接入，是以，我們想要擷取資料，必須要進行資料源的接入。

選擇資料源（Data source）

配置選擇自己接入的資料源後，後續才能進行相關資料擷取的文法編寫，這裡不同的資料源之前需要的文法也不一樣，是以大家可以自己根據自己的條件自主選擇， 因為QQ直播接入的資料源是influxdb, 是以後面的例子将會以influxdb文法為例。

SQL語句的編寫

Grafana的面闆文法編輯有兩種形式， 簡易模式與進階模式。

Grafana一個面闆支援多條SQL語句。

簡易模式：簡易模式資料的擷取主要通過下拉框的形式選擇具體的名額以及判斷條件， 支援添加多個條件。

進階模式：通過點選編輯圖示可以進行編輯模式的切換，進階模式下為全部的SQL語句的編書寫，此模式對于文法有一定的要求，但是擷取資料會更加的靈活。

（四）面闆的基礎配置

在編輯完成資料擷取的SQL語句之後，面闆上應該已經有了相關資料的展示，此時可以根據自己的資料格式，以及展示訴求來選擇對應的圖表，圖表具體選擇參考上文資料與圖表的搭配。

我們以預設的Time series的折線圖為例，簡述一下面闆的基礎配置。

面闆的基礎資訊

在通過SQL語句選擇加載完成資料後，圖表會有預設的樣式給到我們，此時如果對面闆無其他要求，隻需配置一下面闆的基礎資訊就可完成Grafana的看闆配置。

基礎資訊包括

• 标題
• 描述
• 背景是否透明

資料提示

Tootip配置項用于配置當滑鼠經過（hover）圖表資料點的時候的提示資訊， 可選為Single單個提醒， All顯示所有資料， Hidden都不顯示。

圖例（legend）顯示設定

圖例顯示模式有三種

• List (預設)， 圖例資料橫向依次展示
• Table， 圖例資料會按照表格形式展示
• Hidden, 不展示圖例

圖例的位置

• Bottom, 陳列在圖表底部
• Right, 陳列在圖表的右側

圖例值展示

此處會有一個下拉清單供我們選擇圖例的顯示資料，預設不展示，使用者也可以選擇資料展示形式，例如最大值，最小值，平均值等。

坐标軸（Axis）配置

坐标軸的基礎配置一般隻需要設定一下坐标軸的名稱（Label）即可，其餘的設定可以按照預設值不用修改，下面簡述一下配置的含義

• Width選項可以選擇設定坐标軸（Label）的占比寬度
• Soft min以及Soft max用來設定縱坐标的顯示的最大值最小值
• Show gride lines可以設定是否顯示背景的網格線
• Scale用來設定是否進行資料的放大，目的是讓資料對比更加清晰

通過以上對一個圖表面闆的基礎配置，我們的一個圖表基本上已經成型，可以達到資料可視化的正常顯示目的，剩下的就是加強對自己資料格式類型的分析以及基于自己的可視化訴求來進行合适的圖表面闆的配置選擇，就可以通過多個圖表的添加來完成自己初版的資料可視化看闆。

六、Grafana進階使用

當我們選擇一個圖表插件進行資料可視化的時候，圖表的一些屬性會幫我們設定好了預設值，但是基于相容性更廣的特性，這些預設值也許并不是我們選擇圖表最合适的展示效果，是以為了進一步提升圖表的展示性，我們可以通過以下屬性來進行面闆的進一步美化。

（一）圖表屬性配置 (Standard options)

此選項框中的屬性配置，可以使得我們的資料展示更加的準确，例如縱坐标的機關，我們不想采用通用意義上的在Label上進行命名标注機關例如耗時（ms）, 那麼就可以選擇此處的機關屬性（Unit）進行更精确的展示。

機關（Unit）

在機關選項中， 你可以進行非常精細化的選擇，選項框中幾乎包含了所有品類用到的機關屬性，例如百分比，長度機關，時間機關，角度機關等等。

顯示範圍（Min, Max）

在Min, Max 選項中，允許使用者輸入一個數字進行顯示範圍的限制，那麼圖表上在顯示範圍之外的資料将不會在圖表中顯示，例如我将耗時限制在0~3000範圍，那麼3000以外的資料将會被隐藏。

Decimals 選項可以用來設定縱坐标資料的小數點範圍

Display Name 選項則可以用來設定圖例顯示名字，但是由于限制，隻能在隻有一類資料時比較适用，如果資料類别較多，單純在此處設定會将全部圖例資料覆寫，是以圖例的名稱最好在SQL語句編寫的時候就做好展示。當然後面也會講有别的方法進行多種圖例資料别名的單獨設定。

圖表顔色配置（Color scheme）

一般圖表顔色的展示都會有預設值，不過我們想要改變現在圖表曲線的顔色分類可以在此處進行設定。

我們可以選擇整體圖表的顔色走向或者是顔色分布，但是一般曲線展示的顔色還是會根據資料自己适配，是以如果我們想要改變某一條曲線的顔色，可以直接點選圖例前面的顔色icon，進行顔色選擇。我們可以根據提供選項進行選擇，也可以自定義設定顔色。

（二）門檻值設定 (Thresholds)

有些圖表插件是支援設定門檻值的，門檻值的設定可以使得我們對資料的合規程度有清晰的對比，能夠直覺的衡量出目前資料的品質，是以門檻值設定也是面闆美化展示的一個重要部分。

如上圖示例，我們設定對耗時的圖表設定了兩個門檻值，上圖的意義是：

• 在3000ms和5000ms設定門檻值
• 3000ms以下将視為健康，顔色标記為綠色
• 3000ms~5000ms視為亞健康，顔色标記黃色
• 5000ms以上視為警示，顔色标記為紅色

門檻值的模式有兩種選擇：

• 絕對值, 即按照标記的門檻值資料進行比較
• 百分比, 門檻值為相對于最大值的占比

門檻值展示的形式有四種：

• 不展示（off）
• 隻展示門檻值線 （as lines）
• 隻展示區域 （as filled regions）
• 同時展示門檻值線和區域 （as filled regions and lines）

下圖為我們選擇絕對值模式下，展示線和區域的門檻值示例圖， 由圖可以看出資料在不同門檻值區間的分布，以及與門檻值的對比，是以我們能直覺的評估出資料的品質。

（三）數值映射 (Value mappings)

圖表的展示都是由許多的值來組成的一個個點，連線，反過來講，圖表就是資料值的展現，在圖表中，有時候有些資料并不是我們理想的數值，或者說我們想特異性的讓某些值顯示為其他值（寫SQL語句也可以實作），這時候可以使用數值映射選項。

數值映射的形式可以有以下四種：

• 單純的某個值映射
• 一段範圍區間映射
• 正規表達式映射
• 針對某類值映射

例如在示例中，假如我們健康波段資料具體值不關心， 隻是關心整體的資料波動範圍是否在健康範圍之内，我們可以把0~3000ms的範圍映射為健康，那麼再具體顯示的時候，不再會有具體值給到我們，統一會展示健康，如下圖：

這個功能更加适用于表格資料，例如我們明确的将空資料映射為空或0的場景，如下圖：

（四）資料覆寫 (Overrides)資料覆寫允許我們對之前已經設定好的圖表進行個性化設定，它相當于圖表更進階的設定，覆寫的範圍可以是整個SQL語句擷取的資料，也可以是資料中某一類圖例資料。

具體覆寫的資料類别：

• 某一類資料
• 正則比對到的資料
• 某些類型的資料
• 整個SQL查詢的資料

在設定了一個Override之後，就可以進一步進行子項的配置，子項裡面的屬性幾乎與上文介紹的圖表屬性一緻。

我們通過覆寫屬性的配置，可以讓修改到之前我們已經在整體設定好的圖示樣式。

例如我們現在經過SQL查詢，已經擷取到了js_ready和css_ready的耗時資料，但是我們想讓這兩種資料對比更加明确，既能夠清晰的看到整體的趨勢，也能看到某類資料單獨的變化，這時我們可以通過override屬性進行配置，讓兩個資料的縱坐标分别在左右兩邊，并且資料展示用折線和柱狀圖分别表示。

具體override配置屬性如下圖：

對css_ready資料配置：

• 圖表展示為柱狀圖， 柱狀圖資料點居中
• 縱坐标資料靠右展示，顔色為淺綠色
• 标題設定為CSS耗時（ms）

對js_ready資料配置：

• 預設基礎配置折線圖
• 預設縱坐标靠左展示
• 設定顔色紅色
• 标題設定為JS耗時（ms）

最終結果如下圖：

（五）變量與模闆

在Grafana裡面，學會使用變量，會發現打開了新世界的大門，用好變量，可能你的工作量就會縮減一半，甚至更多。

變量的使用場景有很多，例如我們編寫SQL語句中的時間選項（$__interval），就是内置的一個變量，通過這個時間變量，可以控制多個圖表在不同時間範圍内的展示情況，是以一個好的變量的使用，可以讓我們隻配置一個圖表，達到展示不同條件下的資料的目的，而不用去為每一種情況設定一個圖表。

模闆在Grafana中最簡單的含義就是任何一條包含變量的查詢（query)。

【變量的設定】

變量的設定是基于看闆的，看闆内設定的變量，對看闆内的所有面闆是共享的。

點選看闆設定，進入變量設定頁面。

【變量的種類】

在添加一個變量的可選下拉框中，可以選擇添加的變量類型，共計有以下幾種變量可以選擇。

變量類型	描述
query	查詢變量允許編寫可以傳回名額名稱、标簽值或鍵清單的資料源查詢。例如，查詢變量可能會傳回伺服器名稱, ID 或資料中心的清單。變量值随着資料源查詢動态擷取選項而變化。
custom	手動定義變量選項,使用逗号分隔的清單
text box	顯示具有可選預設值的自由文本輸入字段
constant	設定一個常量
data source	快速添加一個資料源的變量
interval	代表時間跨度的變量
ad hoc filters	自動添加到資料源的所有名額查詢的鍵/值過濾器（僅限 InfluxDB、Prometheus 和 Elasticsearch）

添加變量的其他輸入框選項可以直接根據英文的意義非常直白的看出，例如設定面标簽資訊，描述資訊，以及設定是否在看闆中隐藏，對于某些變量類型還可以設定是否可以多選或者是否包含所有的值的選項等等，這些設定可以根據自己的需求來選擇。

【變量的使用】

設定完成變量之後，變量的使用有兩種形式：

• $varname， 這是最直接的方式， 但是這種文法會有限制，就是不能在一個詞的中間使用例如：apps.frontend.$varname.requests.count。
• ${var_name}， 如果想要在表達式中間插入變量，請使用此文法，另外這種文法還有一些進階用法，${var_name:<format>}，這種格式可以更好地控制 Grafana 如何插入值，具體的用法可以參考官方文檔。

【變量簡單使用示例】

沿用上文的資料，我們建立一個簡單的自定義變量，url_event,如下圖：

擷取資料的時候，sql文法就可以寫成如下：

這樣，我們隻建立了一個圖表面闆，由于使用了變量，是以可以隻用變量的切換就實作看闆資料的變化，如下：

變量選擇 js_ready

變量選擇css_ready

（六）Link的使用

在Grafana中，可以使用連結來進行看闆的跳轉以及外鍊的跳轉，并且link的使用也非常靈活。

在一個資料面闆的設定中，link可以的設定主要有兩種方式。

整個面闆設定連結

在資料面闆的設定中，前文我們沒有細講link的選項，這裡其實是為整個資料面闆設定跳轉連結的入口，通過此處設定link，可以在面闆上增加一個icon, 實作我們在點選的時候進行跳轉, 具體效果如下圖：

為具體資料設定link(data links)。

data links屬性設定一般隻在柱狀圖、折線圖、表格面闆裡才有，并且，如果沒有搭配override屬性進行個性化設定的話，預設每個資料點都會設定上跳轉的連結，效果如下圖：

這樣的設定其實和整個面闆設定link類似，是以不同的data links 最好和override屬性搭配，來進行個性化的資料連結跳轉，以達到不通資料跳轉不同連結的目的。

（七）Link與變量的搭配Grafana的link設定非常靈活，在link設定中，可以直接使用已經設定的看闆變量以及系統的變量來進行連結的組合。

甚至在data links的設定中，還可以直接使用SQL語句查詢到的結果來進行連結的組合，這樣也可達到不同數值設定不同的跳轉連結的功能。

在添加連結的時候，如果想檢視可用變量清單，可以直接在資料連結URL字段中鍵入$來檢視變量清單，效果如下圖：

變量清單裡的變量主要可以分為三個類型：

• 全局内建的變量，例如時間變量的 from, to
• 使用者建立的模闆變量，例如上文示例建立的url_event
• 基于SQL語句查詢出來的資料，一般都在fields字段下

通過引用變量來建立圖表面闆的跳轉連結，可以較為靈活的實作基于資料的外鍊跳轉以及更為進階的資料看闆的之間的關聯，下文要講到的資料下鑽就是基于data links與變量的搭配來實作。

七、Grafana進階使用

（一）妙用Transform

前面講的一些Grafana的使用，都是以SQL語句查詢到的資料為基礎，在圖表可視化上進行的設定與操作，而Transform的功能，大部分是更底層的操作，直接對資料的操作，來達到改變圖表展示的目的，是資料可視化之前的操作。

tranform可以實作将我們查詢到的資料進行進一步加工，例如可以進行資料篩選，計算，重命名，排序以及控制隐藏等功能。

本文以幾個較為典型的功能簡單介紹一下。

通過計算添加資料（Add field from calculation）

資料的計算有兩種模式：

• Reduce row： 分别對選擇的特定字段資料的每一行進行聚合計算
• Binary option： 標明的兩個字段的值進行數學運算例如加減乘除

轉換資料的類型(Convert field type)

可以将選擇的特定字段的值的類型指定為固定的資料類型

根據名稱篩選資料展示(Filter data by name)：

• 可以将SQL語句查詢出的字段名稱陳列，并且自定義資料的展示與否
• 也可以直接根據正規表達式進行資料篩選

資料合并（Merge）

類似sql中的join，根據時間序列來進行合并不同的字段資料成為個資料表

重命名（Rename by regex）

可以使用這個功能來進行查詢結果名稱的轉換，允許我們使用正規表達式來進行重命名内容的比對

transform還有很多實用的功能，這裡就不一一陳列，如果有需要用到操作資料的功能，可以考慮transform功能，全部的功能可以直接看官方文檔。

（二）面闆的Repeat面闆的repeat也是需要搭配變量功能來使用，圖表面闆會根據使用者選擇的變量個數來進行分别加載，是以，此功能使用的前提是變量的值要大于1個，并且設定了允許多個變量可選，見下圖示例：

目前提條件滿足後，可以在面闆的repeat屬性進行設定

repeat可選加載的方向是橫向還是縱向，并且可以設定最大的重複個數，來避免造成加載展示問題以及性能問題。

當設定完成後，并不會馬上生效，需要儲存然後退出此圖表面闆然後重新加載一下資料看闆，然後資料圖表就會根據我們選擇的變量的個數來進行分别的展示。

以上文的示例設定之後，效果如圖：

（三）資料下鑽

要實作一個資料下鑽，需要link搭配變量來進行看闆之間的關聯，主要的思路大體如下：

• 模闆看闆B中設定好需要的變量
• 模闆看闆B查詢資料時引用變量
• 在源圖表面闆A中設定跳轉到模闆看闆B的連結，連結上引用我們設定或者是查詢的變量内容
• 跳轉至目标模闆資料看闆B時，模闆看闆B擷取從link上帶過來的變量值
• 變量指派，模闆看闆B根據變量值重新整理資料查詢

經過上面的步驟，那麼一個資料看闆之間的關聯就完成了，剩下的步驟就是豐富變量的設定以及看闆内圖表面闆的内容了。

那麼如何從跳轉過來的link上擷取到攜帶過來的變量的值呢？

在上文我們設定變量來控制資料面闆repeat的時候，我們設定了一個變量 url_event

當控制變量為 js_ready的時候，看闆的整體URL是

當控制變量為 css_ready的時候，看闆的整體URL是

是以我們可以看到，當我們看闆設定變量并且使用的時候，變量的内容是以query的格式顯示在URL上的，并且命名的格式如下：

var-{your_var_name} = {your_var_value}           

當變量在url上面顯式的标記的時候，Grafana會主動擷取連結上面聲明的變量的值并指派給模闆變量。

是以根據上面的格式，我們可以在link上面構造上述的資料query格式，為模闆的看闆變量指派。

于是實作一個的資料下鑽整體流程都變得清晰了，下面我們還是以上文的例子來構造一個簡單的資料下鑽的例子

構造一個整體的page render資料看闆A

将資料格式以table的形式展現，整體性的展示當天項目的render過程的各個事件平均耗時情況，如下圖：

設定一個詳細名額資料的模闆看闆B

建立另一個資料詳情的看闆，然後建立一個事件的變量

編寫具體事件詳細資料的查詢SQL語句，并引用變量

通過link實作看闆之間的關聯

配置資料看闆A的data link, 使得每一行資料可以進行下鑽詳情展示

經過上述步驟，就完成可一個簡單的資料下鑽，實作可一個項目page render過程的整體資料的可視化，并且可以點選具體加載事件檢視該事件詳細的資料分布趨勢。

效果如下:

總結

Grafana是一款非常優秀的開源可視化工具，能非常友善的将資料進行可視化，非常适合資料大盤建設，以及做資料監控和資料統計的工作。

本文基于實際業務中建設監控資料大盤的經驗，介紹了Grafana基本的一些圖表概念和使用方法，并對不同的資料類型選取合适的可視化圖表提供了一些建議和思考。

通過三個階段的介紹，總結了Grafana進行資料可視化入門教程以及一些進階使用技巧，希望能在未來你的業務中，資料大盤的建設過程中提供一些便利和思路。

文章來源：李甯_騰訊雲開發者