我们在使用 Dygraph 的时候，假如需要设定固定的 Y 轴的刻度，那需要怎么做呢？
前言
在 Dygraph 绘图中，假设我们有下面的枚举值：
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：
new Dygraph(
dom,
data,
{
axes: {
y: {
valueRange: [-0.5, 4.5]
}
}
}
)
不错，这样数据展示得很宽松。
设置 Y 轴的单位区间
上面虽然让曲线看起来很友好，但是 Y 轴上的值并没有展示出来。这就需要我们设置 Y 轴的单位区间距离：
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 方法，将其返回信息进行自定义。我们更改如下：
new Dygraph(
dom,
data,
{
axes: {
y: {
valueRange: [-0.5, 4.5],
pixelsPerLabel: 11,
// 追加
axisLabelFormatter: function(val: number) {
return BODY_POSITION[`POSITION_${val}`]
}
}
}
}
)
成功映射后效果：
咦，怎么都粘连在一起了呢？这是样式的问题，我们可以返回个元素，并进行样式设置：
axisLabelFormatter: function(val: number) {
let _yLabel: string = Diagnosis.BODY_POSITION[`POSITION_${val}`];
return `<span class='position-y-label position-y-label_${val}'>${_yLabel}</span>`;
}
设置样式：
.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，后再添加样式。
参考
© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END
