Dygraphs 中 x 轴等间距实现

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第16天，点击查看活动详情

本文，我们来探讨下，如何在 Dygraphs 中的 X 轴上等间距的展示每一条竖线，间隔是 1s，如上图。

我们的思路是怎样的呢？

在 Dygraphs 中没有相关的 api 直接调用，但是我们发现了这么一个属性 pixelsPerLabel 属性。

pixelsPerLabel 表明 x 轴或者 y 轴标签之间的宽度。（可以理解为控制轴两点之间的距离）单位是 px。

So，我们下面就有思路了，我们只针对 x 轴来实现（y 轴同理，感兴趣的读者可以自行实现）：

计算 chart 容器的宽度 chartWidth，单位是 px
用户选中填充容器的时间是 t 毫秒
取 x 两点直接的距离 distance，单位是 px，则有 distance = (chartWidth / t / 2) * 1000

⚠️ 对于为什么 除以2，了解的读者可以留言交流下。经过测试 /2 能满足

相关实现的核心代码如下：

let options: any = {
  axes: {
    x: {
      pixelsPerLabel = (this.chartWidth / this.t / 2) * 1000
    }
  }
}

// 不存在 Dygraph 对象的情况下，新建 Dygraph 对象
if(!this.dygraph) {
  this.dygraph = new Dygraph(this.chart, this.data, options);
} else { // 存在 Dygraph 对象的情况下，只需要更新数据就行了
  this.dygraph.updateOptions(options);
}
复制代码

到这里为止，我们已经是实现了相关的功能。但是，我们也仅仅是实现了粗糙的功能而已。我们还需要考虑下面的问题：

1. 当浏览器缩放，我们怎么处理

针对浏览器的缩放，进行一个监听 addEventListener，重新绘制图形，这是一个不错的选择。在 angular 中，我们一般选择 @HostListener 进行调用。

@HostListener('window:resize')
private onResize(): void {
  this.drawChart(); // 重新绘制
}
复制代码

2. 当我们需要动态选择时间，我们怎么存储数据

当我们再次进入浏览器的时候，我们希望直接使用之前设置好的时间模式展示。那么，我们就需要用到浏览器的缓存技术 localStorage。将关键的信息存放起来，下次进来的时候，先判断时候已经调试好，如果调试好，直接使用缓存，如果未调试好，直接让用户调试。这样做的好处是：减少用户参与的动作，也就是所谓的提升用户体验。

往期精彩推荐

如果读者觉得文章还可以，不防一键三连：关注➕点赞➕收藏

Dygraphs 中 x 轴等间距实现

往期精彩推荐

猜你喜欢