Dygraph 自定义 y 轴刻度

我们在使用 Dygraph 的时候，假如需要设定固定的 Y 轴的刻度，那需要怎么做呢？

前言

在 Dygraph 绘图中，假设我们有下面的枚举值：

typescript 复制代码

export enum BODY_POSITION {
  POSITION_0 = "右侧卧",
  POSITION_1 = "左侧卧",
  POSITION_2 = "直立",
  POSITION_3 = "俯卧",
  POSITION_4 = "仰卧"
}

Y 轴的区间数据是 0 - 4。上面的枚举值对应 0 -> POSITION_0，1 -> POSITION_1，以此类推...

这里演示，设置的 Dygraph 元素节点的高度为 80px。

设置 Y 轴的区间范围值

绘制图形返回数据，如果我们没有设置 Y 轴的区间数值，会出现边缘数据跟 X 轴重合，不好查看的现状，且 Y 轴范围数字过大。如下图：

为了更好地展示，我们合理设置 Y 轴的区间，这里设置为 -0.5 ~ 4.5：

typescript 复制代码

new Dygraph(
  dom,
  data,
  {
    axes: {
      y: {
        valueRange: [-0.5, 4.5]
      }
    }
  }
)

不错，这样数据展示得很宽松。

设置 Y 轴的单位区间

上面虽然让曲线看起来很友好，但是 Y 轴上的值并没有展示出来。这就需要我们设置 Y 轴的单位区间距离：

typescript 复制代码

new Dygraph(
  dom,
  data,
  {
    axes: {
      y: {
        valueRange: [-0.5, 4.5],
        // 追加
        pixelsPerLabel: 11
      }
    }
  }
)

上面已经设定 canvas 的高度是 80px，我们设置了值 valueRange: [-0.5, 4.5] 相当于六个单元，再加上一个单元进行缓冲。则有 80 / 7 = 11。当然，数值可以根据使用习惯调整，你也可以设置 80 / 8 等。

👌，我们正常展示了数字，下面我们对数字进行映射就行了。

映射 Y 轴数字对应值

这一步其实就是自定义 axisLabelFormatter 方法，将其返回信息进行自定义。我们更改如下：

typescript 复制代码

new Dygraph(
  dom,
  data,
  {
    axes: {
      y: {
        valueRange: [-0.5, 4.5],
        pixelsPerLabel: 11,
        // 追加
        axisLabelFormatter: function(val: number) {
          return BODY_POSITION[`POSITION_${val}`]
        }
      }
    }
  }
)

成功映射后效果：

咦，怎么都粘连在一起了呢？这是样式的问题，我们可以返回个元素，并进行样式设置：

typescript 复制代码

axisLabelFormatter: function(val: number) {
  let _yLabel: string = BODY_POSITION[`POSITION_${val}`]; 
  return `<span class='position-y-label position-y-label_${val}'>${_yLabel}</span>`;
}

设置样式：

css 复制代码

.position-y-label {
  font-size: 12px;
  display: inline-block;
  width: 40px;
  height: 12px;
  line-height: 12px;
  text-align: left;
}
.position-y-label_0 {
  position: relative;
  top: 2px;
}

效果如下：

Not Bad, Right? 样式的设置，根据实际场景设置，这里我将 axisLabelWidth 的值隐藏了，即设置了 axisLabelWidth = 0，后再添加样式。

Dygraph 自定义 y 轴刻度

前言

设置 Y 轴的区间范围值

设置 Y 轴的单位区间

映射 Y 轴数字对应值

参考