xObserve

  1. 图表 Panel
  2. 覆盖 Override

截止目前，我们基本都是在 图表 标签页下设置图表的属性，这里的设置会应用到图表的所有曲线上。

但是有时候我们希望对某个曲线设置不同的属性，这时候就需要用到 覆盖 。

创建图表

首先，创建一个图表，选择 图表 可视化，然后添加两个数据源查询：

panel-with-two-queries

大家别忘了将 图例 Legend 字段设置为 {{__name__}}，这样可以在图表的图例中显示曲线的名称。

本章节创建的图表将在后续的 阈值 Thresholds 和 交互性 章节继续使用

设置通用的选项

现在，你可以看到 图表 图表中有两个曲线：node_load1 和 node_load5，让我们为它们设置一些通用的选项。

区域填充

首先，我们将为所有曲线设置区域填充样式：

fill-area

单位

接下来，我们将为图表中的所有曲线设置单位：

unit

大家需要注意，单位 中的值实际上是 / load5，前面有一个空格。

panel-with-common-options

有些奇怪， load1 曲线也使用了 load5 的单位，让我们先修复它。

覆盖选项

为了修复 load1 曲线的单位，唯一的办法就是覆盖掉 load1 曲线的相应设置。

但如果你仔细观察 图表 标签页，你会发现 load1 曲线并没有 Y 轴空间来显示它的单位 / load1。

因此我们需要为 load1 曲线添加一个新的 Y 轴，并将其单位设置为 / load1：

为 load1 新建覆盖项

点击 覆盖 标签页，然后为 load1 曲线添加一个新的覆盖项：

override-item

新建 Y 轴覆盖

点击 添加覆盖规则，选择 Series.separateYAxis 类型，然后启用它：

yaxis-override

上图中箭头指向的就是我们为 load1 曲线新建的 Y 轴。

现在，我们需要为它设置单位。

新建单位覆盖

点击 添加覆盖规则，选择 Series.Unit 类型，然后设置它的值如下:

override-unit

点击 提交 按钮后，可以看到 load1 曲线已经有了自己的 Y 轴和单位。

但是，现在又有一个问题：load1 和 load5 曲线混在了一起。也许我们应该将它们分开。

一个可行的办法是将 load1 曲线显示在 负 Y 轴 上。

新建负 Y 轴覆盖

目前我们不再需要 separateYAxis 了，所以将它改为 negativeY：

negativey-override1

如上图所示，此时两条曲线不再混在一起显示，并且都有了各自正确的单位。

覆盖颜色和填充透明度

如下图所示新建覆盖：

styles-override
  1. 覆盖 Series.style，将 node_load1 曲线从通用设置中的 Lines 类型修改为 Points 类型
  2. 覆盖 Series.fill 为 10 ，这样 node_load1 曲线的填充区域会更加透明
  3. 覆盖 Series.lineWidth 为 0， 可以移除掉线条
  4. 覆盖 Series.color, 为 node_load1 填充一个新颜色，而不是让 xObserve 自动选择一个颜色

最终效果

在覆盖了这么多选项后，我们的图表看起来还不赖:

override-final