带状可视化

带状 可视化显示随时间推移的数据组的上限和下限边界。边界通过对指定窗口期内的数据应用聚合函数来确定，然后为指定的上限、主边界或下限边界设置聚合函数。

设置带状可视化

要在 带状图 可视化中查看带状（边界），您必须设置两个或三个边界以进行比较。

在数据浏览器中设置带状可视化

1. 单击导航栏中的 数据浏览器 图标。

   数据浏览器

2. 输入您的查询（请参阅 使用 Flux 和数据浏览器探索数据）。您必须在查询中包含用于确定带状图可视化边界的聚合函数。

3. 从左上角的可视化下拉列表中选择 带状图 选项，然后单击 自定义。

4. 在 数据 下，选择以下内容

   • 对于 X 轴列 和 Y 轴列，选择要在 x 轴和 y 轴上显示的列。
   • 对于 时间格式，选择要在可视化中显示的时间戳格式。

5. 在 聚合函数 下，选择一个函数来确定每个边界（列）以进行比较（选择两个或三个）

   • 在 上限列 字段中，为上限边界选择一个函数。
   • 在 主边界列 字段中，为主边界选择一个函数。
   • 在 下限列 字段中，为下限边界选择一个函数。

6. （可选）继续自定义您的可视化，包括插值、颜色、悬停维度和 y 轴设置等选项。有关更多信息，请参阅下面的 选项 和 Y 轴。

   提示： 如果您在 带状图 可视化中看不到阴影边界，请验证查询窗口期是否包含足够的数据点以用于所选的聚合函数。默认情况下，窗口期自动设置为十秒（10s）。要调整您的窗口期，请选择 自定义，然后输入支持的时间单位（例如纳秒 (ns)、微秒 (us)、毫秒 (ms)、秒 (s) 或小时 (h)）。

在脚本编辑器中设置带状图可视化

1. 单击导航栏中的 数据浏览器 图标。

   数据浏览器

2. 单击 脚本编辑器。

3. 从左上角的可视化下拉列表中选择 带状图 选项。

4. 创建三个聚合函数：一个用于主边界，一个用于上限边界，一个用于下限边界。以下示例使用 mean()、max() 和 min() 函数

from(bucket: "bucket_1")
    |> range(start: v.timeRangeStart, stop: v.timeRangeStop)
    |> filter(fn: (r) => r["_measurement"] == "cpu")
    |> filter(fn: (r) => r["_field"] == "usage_system")
    |> filter(fn: (r) => r["cpu"] == "cpu0" or r["cpu"] == "cpu1")
    |> aggregateWindow(every: 15s, fn: mean, createEmpty: false)
    |> yield(name: "mean")

from(bucket: "bucket_1")
    |> range(start: v.timeRangeStart, stop: v.timeRangeStop)
    |> filter(fn: (r) => r["_measurement"] == "cpu")
    |> filter(fn: (r) => r["_field"] == "usage_system")
    |> filter(fn: (r) => r["cpu"] == "cpu0" or r["cpu"] == "cpu1")
    |> aggregateWindow(every: 15s, fn: max, createEmpty: false)
    |> yield(name: "max")

from(bucket: "bucket_1")
    |> range(start: v.timeRangeStart, stop: v.timeRangeStop)
    |> filter(fn: (r) => r["_measurement"] == "cpu")
    |> filter(fn: (r) => r["_field"] == "usage_system")
    |> filter(fn: (r) => r["cpu"] == "cpu0" or r["cpu"] == "cpu1")
    |> aggregateWindow(every: 15s, fn: min, createEmpty: false)
    |> yield(name: "min")

5. （可选）通过编辑 yield() 函数中的 name 参数来自定义每个函数的生成结果的名称。例如，要将第一个函数的名称从 mean 更改为 Average，请将最后一行修改为以下内容

|> yield(name: "Average")

6. 单击左上角的 自定义。
7. 在 聚合函数 下，输入您创建的函数，以确定每个边界（列）以进行比较。如果您更改了上述任何函数的 yield 名称，请在此处输入修改后的名称，而不是函数名称
   • 在 上限列名 字段中，输入要用于上限边界的结果集。
   • 在 主边界列名 字段中，输入要用于主边界的结果集。
   • 在 下限列名 字段中，输入要用于下限边界的函数。
8. （可选）继续自定义您的可视化，包括插值、颜色、悬停维度、静态图例和 y 轴设置等选项。有关更多信息，请参阅下面的 选项 和 Y 轴。

自定义列名

带状行为

与折线图类似，带状可视化显示值如何随时间变化。此外，它还显示测量值的上限和下限“带”。

例如，在上面的带状图表中，线条表示 cpu 测量值中 cpu0 和 cpu1 的平均 usage_system 值。带状的上限和下限分别由 max 和 min 聚合函数定义。

带状控件

要查看 带状 控件，请单击可视化下拉列表旁边的 自定义。

数据

• 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 轴刻度线的数量，请选择此选项，然后输入以下内容
    • 刻度线总数：输入要显示的时间戳刻度线的总数。
    • 刻度线起始于：以 RFC3339 格式输入开始显示刻度线的时间。使用 日期选择器 字段自动为此字段生成 RFC3339 格式的时间戳。
    • 刻度线间隔：输入每个时间戳刻度线之间的毫秒数。

Y 轴

• Y 轴标签：输入 y 轴的标签。
• Y 值单位前缀：选择要添加到 y 值的前缀
  • 无：选择不添加前缀。
  • SI：（默认）选择添加国际单位制 (SI) 或公制前缀。
  • 二进制：选择添加二进制倍数前缀。
• Y 轴前缀：输入要添加到 y 值的前缀。
• Y 轴后缀：输入要添加到 y 值的后缀。
• 生成 Y 轴刻度线：选择生成 y 轴刻度线的方法
  • 自动：选择自动生成刻度线。
  • 自定义：要自定义 y 轴刻度线的数量，请选择此选项，然后输入以下内容
    • 刻度线总数：输入要显示的刻度线总数。
    • 刻度线起始于：输入刻度线开始的值。
    • 刻度线间隔：输入每个刻度线之间的间隔。
• Y 轴域：选择生成 y 轴值范围的方法
  • 自动：选择根据数据集中的值自动确定值范围。
  • 自定义：要自定义 y 轴域，请手动指定最小 y 轴值、最大 y 轴值或同时包括两者来指定范围。
    • 最小值：输入最小 y 轴值。
    • 最大值：输入最大 y 轴值。

图例

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