图表 + 单值统计可视化

图表 + 单值统计 视图在一个折线图中显示指定的时间序列，并将最近的单个值以大的数值形式覆盖显示。

从左上角的可视化下拉菜单中选择 图表 + 单值统计 选项。

图表 + 单值统计 行为

图表可视化会为查询数据集中的每个表格（或序列）进行颜色编码。当存在多个序列时，它会根据选定的 线条颜色选项 自动分配颜色。

单值统计可视化显示单个数值数据点。它使用查询返回的第一个表格（或序列）中的最新数据点。

图表 + 单值统计 控件

要查看 图表 + 单值统计 控件，请单击可视化下拉菜单旁边的 自定义。

数据

• X 轴列：选择要在 x 轴上显示的列。
• Y 轴列：选择要在 y 轴上显示的列。
• 时间格式：选择时间格式。选项包括
  • YYYY-MM-DD HH:mm:ss ZZ
  • YYYY-MM-DD hh:mm:ss a ZZ
  • DD/MM/YYYY HH:mm:ss.sss
  • DD/MM/YYYY hh:mm:ss.sss a
  • MM/DD/YYYY HH:mm:ss.sss
  • MM/DD/YYYY hh:mm:ss.sss a
  • YYYY/MM/DD HH:mm:ss
  • YYYY/MM/DD hh:mm:ss a
  • HH:mm
  • hh:mm a
  • HH:mm:ss
  • hh:mm:ss a
  • HH:mm:ss ZZ
  • hh:mm:ss a ZZ
  • HH:mm:ss.sss
  • hh:mm:ss.sss a
  • MMMM D, YYYY HH:mm:ss
  • MMMM D, YYYY hh:mm:ss a
  • dddd, MMMM D, YYYY HH:mm:ss
  • dddd, MMMM D, YYYY hh:mm:ss a

选项

• 线条颜色：选择要用于图表的配色方案。
• 悬停维度：选择在悬停在图表上时要在工具提示中显示的数据
  • 自动 或 X 轴：沿 y 轴显示所有具有相同 x 值的点。
  • Y 轴：沿 x 轴显示所有具有相同 y 值的点。
  • X 轴和 Y 轴：仅显示当前悬停的点。
• 填充图表下方区域：填充图表线条下方的区域。

X 轴

• 生成 X 轴刻度线：选择生成 x 轴刻度线的方法
  • 自动：选择自动生成刻度线。
  • 自定义：要自定义 x 轴刻度线的数量，请选择此选项，然后输入以下内容
    • 总刻度线数：输入要显示的总刻度线数。
    • 刻度线起始值：输入刻度线的起始值。
    • 刻度线间隔：输入每个刻度线之间的间隔。

Y 轴

• Y 轴标签：y 轴的标签。
• Y 值单位前缀:
  • 无：无前缀。
  • SI：国际单位制 (SI) 或公制前缀。
  • 二进制：二进制倍数前缀。
• Y 轴前缀：要添加到 y 值的前缀。
• Y 轴后缀：要添加到 y 值的后缀。
• 生成 Y 轴刻度线：选择生成 y 轴刻度线的方法
  • 自动：选择自动生成刻度线。
  • 自定义：要自定义 y 轴刻度线的数量，请选择此选项，然后输入以下内容
    • 总刻度线数：输入要显示的总刻度线数。
    • 刻度线起始值：输入刻度线的起始值。
    • 刻度线间隔：输入每个刻度线之间的间隔。
• Y 轴域：y 轴值范围。
  • 自动：根据数据集中的值自动确定值范围。
  • 自定义：手动指定最小 y 轴值、最大 y 轴值，或通过同时包含两者来指定范围。
    • 最小值：最小 y 轴值。
    • 最大值：最大 y 轴值。
• 定位:
  • 覆盖：将图表线相互覆盖显示。
  • 堆叠：将图表线堆叠在彼此之上显示。

自定义单值统计

• 前缀：要添加到单值统计的前缀。
• 后缀：要添加到单值统计的后缀。
• 小数位数：为单值统计显示的小数位数。
  • 自动 或 自定义：启用或禁用自动设置。

着色阈值

• 基色：从选择列表中选择基色或背景色。
• 添加阈值：根据当前值更改单值统计的颜色。
  • 值是：输入单值统计应以所选颜色显示的值。从值旁边的下拉菜单中选择颜色。
• 着色方式：选择 文本 以使单值统计根据配置的阈值更改颜色。选择 背景 以使图表背景根据配置的阈值更改颜色。

悬停图例

• 显示悬停图例:
  • 隐藏：隐藏悬停时出现的图例。
  • 显示：悬停时显示图例。
    • 方向：选择图例的方向
      • 水平：选择水平显示图例。
      • 垂直：选择垂直显示图例。
    • 不透明度：使用滑块调整悬停图例的不透明度。
    • 行着色：选择以彩色显示悬停图例行。

静态图例

• 显示静态图例:
• 隐藏：隐藏静态图例。
• 显示：始终显示静态图例。
  • 方向：选择图例的方向
    • 水平：选择水平显示图例。
    • 垂直：选择垂直显示图例。
  • 不透明度：使用滑块调整静态图例的不透明度。
  • 行着色：选择以彩色显示静态图例行。
  • 显示值：选择 最新 Y 轴 或 最新 X 轴 以确定图例上显示 y 轴还是 x 轴。
  • 高度：使用滑块调整静态图例的高度。

图表 + 单值统计 示例

图表 + 单值统计可视化的主要用例是显示当前或最新值以及历史值。

显示当前值和历史值

以下示例显示了当前已用内存百分比以及随时间变化的内存使用情况

查询内存使用百分比

from(bucket: "example-bucket")
    |> range(start: v.timeRangeStart, stop: v.timeRangeStop)
    |> filter(fn: (r) => r._measurement == "mem" and r._field == "used_percent")

带有静态图例的内存分配百分比可视化