背??景在接入腾讯云前端性能监控（RUM）后，QQ直播前端团队梳理了目前的监控能力和上报数据，开始了前端性能监控的专项建设。缺少链接。可视化的监控大盘，可以清晰的观察到各个项目的运行状态，可以在宏观层面快速的进行项目之间的横向对比，也可以非常方便的展现项目的详细数据维度，纵向分析各个指标数据的统计情况.通过对数据市场支撑能力的研究，我们使用Grafana搭建了数据市场。通过搭建Grafana服务，然后添加监控和上报数据，终于完成了【QQ直播前端监控数据大盘】。那么Grafana是什么？Grafana是一个开源的数据可视化工具。使用Grafana可以很方便的将数据转化为图表（如下图所示）进行数据监控和统计。Grafana官方提供Linux、Windows、MacOS、Docker版本下载链接：https://grafana.com/get/本文将凭借搭建数据市场的经验，重点介绍Grafana的使用，帮助小伙伴成为格拉法纳大师。数据和图表数据的可视化是由图表来承载的。不同的图表可以显示不同侧重点的数据。搭建数据面板首先要对图表有一个简单的了解，这样才能在数据面板上进行搭建。过程中选择合适的图表，合理展示视觉效果。了解Grafana的图表Grafana的图表选择路径都是在Visualization类别下选择图表Linechartexamplechart:TimeseriesChartconfiguration:Graphstylestyle:LinesFillopacity:3Gradientmode:schemeHistogramexamplechart:Timeserieschartconfiguration:Graphstylestyle:BarsFill不透明度：3Gradient模式：schemePoint图表示例图表：时间序列图表配置：Graphstylestyle：PointsPoint大小：5Stackseries：NormalPiechart示例图表：PiechartSinglestatechartExamplechart：StatChartconfiguration：Graphstylestyle：BarsFillopacity：3Gradientmode：schemeDashboard样图：仪表表样图：表格文字样图：文本（支持Markdown和HTML两种格式）数据与图表搭配（1）按数据格式区分条形图，折线图和饼图都要求数据有一个时间序列，用于展示单个数据或多个分类数据的变化趋势，或所占比例一定时间间隔或连续时间范围内的数量。状态图、表格数据、仪表盘等对数据没有时间序列要求。状态图和仪表板可以用来展示一些汇总数据，比如速度、温度、进度、完成等，表格数据更适合展示复杂的数据。数据或多维数据。(2)根据使用目的区分数据比较：直方图和折线图比较合适，可以实现单一数据和多种数据的比较，可以清楚地看到变化趋势。分类：饼图、仪表盘、单状态图等比较合适，可以清楚的看到各个数据的整体比例趋势比较：折线图、面积图（可以设置折线的覆盖区域）等。比较合适，能直观展示数据变化分布的：饼图、散点图等。比较合适（3）其他文字图表，顾名思义。它们可以用来展示文本相关的信息，定制化程度和灵活的布局支持都非常高（得益于Markdown和HTML强大的灵活性）。表格多用于日志类型，或者其他多维度的数据展示更适合，适合作为一个整体给出报告，并且具有排序等公共功能，方便数据的快速对比。数据和图表的添加和扩展Grafana使用插件来扩展数据源和图表。因此，当我们要对某类数据源或图表进行扩展时，需要先在Grafana插件市场中找到目标插件，然后进行安装。以下代码FROMgrafana/grafana:8.3.1USERrootRUNgrafana-clipluginsinstallgrafana-clickhouse-datasource//数据源插件RUNgrafana-clipluginsinstallauxmoney-waterfall-panel//图表插入（1）添加数据源打开GrafanaPlatform，点击左侧“设置”图标，进入DataSource管理面板。在“添加数据源”面板中选择合适的数据源，配置数据库信息。下图以Promethrus为例。添加数据源需要进行必要的配置，如数据源的ip、端口、认证信息等。(2)添加图表插件打开Grafana平台，点击左侧：“设置”图标，进入Plugins管理面板，在tab栏过滤已安装的插件，可以看到添加的插件已经安装可以使用已经安装在图表面板中，可以直接点击创建面板时指定类型开始使用Grafana这里要使用，需要区分两个概念：dashboard：一个的集合或者多个数据图表面板（panel）：构成仪表盘的图表之一（1）创建仪表盘（dashboard））创建数据可视化面板的前提是需要访问数据源。具体接入方式见AddingandExpandingDataandCharts打开Grafana平台，点击左侧“加号”，点击Create类下的Dashboard按钮，新建一个空表的看板，四个选项为默认情况下会弹出添加面板。添加一个空白面板并添加一个新行，用于面板分类。复制现有面板，然后单击面板的右上角以保存面板。输入看板的名称，输入简单的描述，选择看板的类别（用于对看板进行分类管理），为看板设置Tag，标记看板的特性。稍后，您可以根据Tag筛选看板。其他选项可以根据需要定制。（2）创建面板（panel）点击上图所示的图表，会弹出创建面板的四个选项，可以根据自己的需要自行创建。我们以创建一个空白面板为例，点击添加新面板按钮，就会创建一个空白数据图表面板，如下图（3）面板数据的获取如上所述，创建一个图表的前提是数据可视化看板是数据源接入的需要。因此，如果我们要获取数据，就必须选择数据源access数据源（Datasource）配置并选择好要访问的数据源后，就可以编写相关数据获取的语法了。这里不同的数据源之前需要的语法不同，大家可以根据自己的情况选择。因为QQ直播的数据源是influxdb，所以下面的例子都会以influxdb语法为例。SQL语句编写Grafana面板语法编辑有两种形式，简单模式和高级模式Grafana支持一个面板多条SQL语句简单模式：简单模式数据获取主要通过下拉框来选择具体的指标和判断条件，支持添加多个条件高级模式：点击编辑图标切换编辑模式。在高级模式下，所有的SQL语句都被写入。这种模式对语法有一定的要求，但是获取数据会更加灵活。(4)面板编辑完获取数据的SQL语句后，面板上应该会显示相关的数据。这时候你可以根据自己的数据格式和显示要求选择相应的图表。图表的具体选择可以参考上面的数据和图表的搭配下面以时间序列默认的折线图为例简单介绍一下面板的基本配置。通过SQL语句选择并加载面板的基本信息。加载数据后，图表将具有我们的默认样式。此时，如果对面板没有其他要求。你只需要配置面板的基本信息就可以完成Grafana的看板配置。基本信息包括标题描述、背景是否透明，可以选择Single单提醒，All显示所有数据，Hidden不显示图例（legend）显示设置。Showthelegend图例的位置Bottom，显示在图表的底部Right，显示在图表的右侧Legendvaluedisplay会有一个下拉列表供我们选择图例的显示数据，默认不显示，用户也可以选择数据显示形式，例如最大值、最小值、平均值等坐标轴（Axis）配置坐标轴的基本配置一般只需要设置名称坐标轴（Label），其余设置按默认值更改。下面简单介绍配置可以选择Width选项的含义来设置坐标轴（Label）的比例宽度。Softmin和Softmax用于设置纵坐标显示的最大值和最小值。显示网格线可用于设置是否显示背景的网格线。scale用于设置是否对数据进行放大，目的是为了让数据对比更加清晰。通过以上一个图表面板的基本配置，我们的一个图表就基本成型了，可以达到数据可视化的正常展示目的。剩下的就是加强我们自己的数据格式类型分析和配置根据自己的视觉诉求选择合适的图表面板，可以使用多个图表添加完成我们第一个版本的数据可视化看板Grafana进阶使用当我们选择数据可视化的图表插件时，图表的一些属性会帮我们设置默认值，但是基于更广泛的兼容性，这些默认值可能不会是最适合我们选择图表的显示效果，所以为了进一步提高图表的显示效果，我们可以通过以下属性进一步美化面板。(1)Chart属性配置(Standardoptions)这个选项框里的属性配置可以让我们的数据显示的更加准确，比如纵坐标的单位，我们不想在Label上使用一般意义上的命名和标注单位，比如消耗时间（ms），那么可以在这里选择单位属性（Unit）来更准确的显示单位（Unit），在单位选项中，可以进行非常精细的选择，选项框包含了几乎所有的类别使用的单位属性，如百分比、长度单位、时间单位、角度单位等。显示范围(Min,Max)在Min,Max选项中，允许用户输入一个数字来限制显示范围，则图表为超出显示范围数据将不会显示在图表中。比如我把耗时限制在0~3000的范围内，那么3000以外的数据就会被隐藏。Decimals选项可用于设置纵坐标数据的小数点范围。DisplayName选项可用于设置图例显示名称，但由于限制，仅适用于只有一种数据类型的情况。如果数据类型比较多，这里简单的设置就会覆盖所有的图例数据，所以图例的名字在写SQL语句的时候最好显示一下即可。当然，还会有其他的方法分别设置各种图例数据别名。图表颜色配置（Colorscheme）通常图表颜色的显示会有默认值，但是如果我们想改变当前图表曲线的颜色分类，可以点击这里进行设置。我们可以选择整体图表的颜色方向或者颜色分布，但是一般曲线显示的颜色还是会根据数据进行适配，所以如果我们想改变某条曲线的颜色，可以直接点击颜色图例前面的图标可以更改颜色选择。我们可以根据提供的选项进行选择，也可以自定义颜色。(2)阈值设置(Thresholds)有些图表插件支持设置阈值。阈值的设置可以让我们对数据的合规程度有一个清晰的对比，可以直观地衡量当前数据的好坏。因此，阈值设置也是面板美化显示的一个重要部分，如上例所示。我们为耗时图设置了两个阈值。上图的意思是：将阈值设置在3000ms和5000ms会被认为是健康的，颜色标记为绿色的3000ms~5000ms会被认为是健康的。亚健康，颜色标记黄色5000ms以上视为警告，颜色标记为红色阈值模式，绝对值有两种选择，即根据标记的阈值数据比较百分比，阈值是最大值的百分比。阈值显示形式有四种：不显示（off）、只显示阈值线（aslines）、只显示区域（asfilledregions）、同时显示阈值线和区域（asfilledregions）和线条）。区域的阈值示例图，从中可以看到数据在不同阈值区间的分布以及与阈值的对比，可以直观的评价数据的好坏(3)制作了值映射图的展示很多值是由点和线组成的。相反，图表是数据值的显示。在图表中，有时候有些数据并不是我们理想的值，或者我们想特意让某些值显示为其他值（写SQL语句也可以实现），这时候可以使用numericalmappingoption数值映射即可有以下四种形式：某个值到某个范围的简单映射区间映射正则表达式映射针对某类值的映射，例如例子中，如果我们不关心健康手环数据的具体值，但只关心整体数据波动范围是否在健康范围内，我们可以将0~3000ms的范围映射为健康，那么在详细展示的时候，就不再有具体的数值给我们了，而unity会显示健康度，如下图：这个功能比较适合表格数据，比如我们显式映射空数据为空或者0的场景，如下图（4）数据覆盖（Overrides)数据覆盖Allows我们对之前设置好的图表进行了个性化设置，相当于对图表进行了更高级的设置。覆盖范围可以是整条SQL语句得到的数据，也可以是数据中某类图例数据覆盖的具体数据类别：某类数据正则匹配某类数据。对整个SQL查询数据设置Override后，可以进一步配置子项。子项中的属性与上面介绍的图表属性几乎相同。通过覆盖属性的配置，您可以我们把它修改成我们之前整体设置好的图标样式。比如我们通过SQL查询得到了js\_ready和css\_ready的耗时数据，但是我们想要让这两个数据的对比更加清晰明了，可以看到整体的趋势，也可以看到某些类型数据的个别更改。这时候我们可以通过override属性进行配置，让两条数据的纵坐标分别在左右两侧，分别用虚线和直方图来表示数据展示。具体override配置属性如下：对于css\_ready数据配置：图表显示为直方图，直方图的数据点以纵坐标数据为中心显示在右侧，颜色为浅绿色，标题设置为CSS耗时(ms)对于js\_ready数据配置：默认基本配置折线图默认纵轴显示设置颜色红色标题设置为JS耗时(ms)最终结果如下：(5)变量和Grafana中的模板，学会使用变量，你会发现打开了一片新天地如果你用好变量，你的工作量可能会减少一半，甚至更多。变量有很多使用场景。比如我们SQL语句中的时间选项（$\_\_interval）就是一个内置变量。通过这个时间变量，可以控制多个图表在不同时间范围内的显示。因此使用一个好的变量可以让我们只配置一个图表就可以达到在不同情况下展示数据的目的，而不是为每种情况都设置一个图表。Grafana中模板的最简单含义是任何包含变量的查询。【变量设置】变量设置基于看板。看板中设置的变量由看板中的所有面板共享。点击看板设置，进入变量设置页面。【变量类型】在添加变量的可选下拉框中，可以选择要添加的变量类型。一共有以下变量可供选择。变量类型描述查询查询变量允许您编写可以返回指标名称、标记值或键列表的数据源查询。例如，查询变量可能会返回服务器名称、ID或数据中心的列表。变量值随数据源查询动态获取选项而变化。自定义手动定义变量选项，使用逗号分隔的列表文本框显示带有可选默认值常量的自由文本输入字段设置常量数据源以快速添加数据源变量间隔变量表示时间跨度自动添加临时过滤器对数据源所有索引查询的Key/value过滤器（仅限InfluxDB、Prometheus和Elasticsearch）其他添加变量的输入框选项可以直接看英文意思，比如设置facet标签信息、描述信息、Set是否隐藏在看板中，对于某些变量类型，还可以设置是否可以选择多个选项或者是否包含所有值等，这些设置可以根据自己的需要进行选择。[变量的使用]设置变量后，有两种使用变量的形式：$varname，这是最直接的方式，但是这种语法有局限性，就是不能在单词中间使用，例如示例：apps.frontend。$varname.requests.count${var\_name}，如果你想在表达式中间插入变量，请使用这个语法，这个语法还有一些高级用法，${var\_name:
