You need to enable JavaScript to run this app.
导航

计量图

最近更新时间2024.03.28 10:17:49

首次发布时间2023.12.07 15:37:11

日志服务提供计量图方式展示日志查询分析结果,本文介绍计量图的各项图表参数配置。

图表说明

计量图由一个或多个条形图组成,支持将每个查询字段简化为单个值来简化数据,可以直观查看数据在单个值特定范围的占比。计量图支持基本单色、梯度变色、分段条图和仪表盘等多种展示样式,配合配色方案可以呈现出多样化的效果。
在仪表盘中添加计量图的操作步骤,请参考添加图表到仪表盘

说明

使用统计图表之前,请先阅读注意事项

通用配置

对指定类型的统计图表进行全局配置,该配置对整个图表范围生效。计量图支持的通用配置如下。

配置项

说明

面板配置

标题

设置计量图的标题。

显示图表标题栏

勾选显示图表标题栏后,将在计量图左上角显示标题。

检索分析字段

主字段来源列

选择在计量图中展示的字段,支持设置多个字段。

最大值

设置计量图中展示的最大值。

  • 开启通过字段查询最大值后,需选择最大值字段来源列,系统将使用该列的最大值作为最大值。
  • 关闭通过字段查询最大值后,可自定义设置最大值

最小值

设置计量图中展示的最小值。

  • 开启通过字段查询最小值后,需选择最小值字段来源列,系统将使用该列的最小值作为最大值。
  • 关闭通过字段查询最小值后,可自定义设置最小值

字段配置

数据展示模式

计量图的展示模式。

  • 计算值:仅展示经由计算函数计算后的值。
  • 所有值:展示检索分析结果中指定字段的所有值。

计算函数

设置展示模式计算值时,应同时设置计算函数,用于计算检索分析结果。例如将计算函数设置为第一个值,则计量图中将展示各个检索分析结果中的第一个值。

标签

设置展示模式计算值时,可添加计量图的标签信息。

个数限制

设置展示模式所有值时,此参数用于控制计量图中展示的条形数量。

图例标签显示字段

展示模式设置为所有值时,此参数用于设置条形图的描述字段,字段值将展示为每个条形的分类。

标准配置

格式化

根据不同的单位换算方式将数值字段格式化。

保留小数点

设置数值小数点后的位数。

自定义单位

设置数值的单位。

计量图样式

图表类型

设置计量图的样式。支持基本单色、梯度变色、分段条图和仪表盘。

配色方案

设置计量图的配色方案。

  • 默认:使用默认颜色作为配色,支持选择默认颜色。
  • 阈值:指定阈值点和颜色后,如果某个条形的实际值大于该阈值点,则显示为对应的颜色。
  • 百分比阈值:指定阈值点和颜色后,如果某个条形的百分比大于该阈值点,则显示为对应的颜色。

布局方式

设置计量图中每个条形图的展示方式,支持设置为横向、纵向或自适应。

主字段字号

设置主字段的字体大小。

说明字段字号

设置说明字段的字体大小。

标题

选择是否显示每个条形的标题。

显示百分比

选择是否显示每个条形图的百分比数值。

值映射

值映射

单击添加映射值并设置映射方式后,日志服务会自动将匹配到的内容映射为指定文本。

字段配置

字段配置区域选择字段名称之后,可以为此字段添加自定义的样式配置,此配置仅对指定字段生效,其他字段仍沿用通用配置。字段配置的配置项含义与通用配置相同,各个配置项的说明请参考通用配置
例如,下图示例表示对 healthCnt 列添加字段配置。
图片

示例

通过计量图展示各个集群健康请求的次数和比例。

  • 检索分析语句

    * | SELECT __source__, SUM(cnt) as allCnt, SUM(if(status='health', cnt, 0)) as healthCnt FROM( SELECT __source__,  status, COUNT(status) as cnt FROM ( SELECT  __source__ , if(httpStatusCode>=200,'health','error') as status ) GROUP BY status, __source__) GROUP BY __source__
    
  • 图表设置

    • 主字段来源列:指定为 healthCnt。其中 healthCnt 代表Status等于health的日志条数。
    • 最大值字段来源列:指定为 allCnt。通过 SUM(cnt) 统计总值,作为计量图的最大值指标。
    • 数据展示模式:选择所有值
    • 图例标签显示字段:设置为__source__
  • 统计图表
    图片

    <div style="text-align: center">      </div>