Dygraphs 中 x 轴等间距实现

·  阅读 859
Dygraphs 中 x 轴等间距实现

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

equal_distance.png

本文,我们来探讨下,如何在 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。将关键的信息存放起来,下次进来的时候,先判断时候已经调试好,如果调试好,直接使用缓存,如果未调试好,直接让用户调试。这样做的好处是:减少用户参与的动作,也就是所谓的提升用户体验

往期精彩推荐

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

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改