今天，我们来讲讲 Dygraph 移除默认图表 Hover 的效果。

默认，在 Hover 的过程中：

  • 线条高亮展示
  • 线条上存在系列定位点

线条 Hover 不高亮展示

Dygraph 移除图表 Hover 默认_JavaScript

上图，最大圆点所在的线条为高亮

我们将其统一为非高亮：

public isSame:boolean = true;

let options = {
  highlightSeriesBackgroundAlpha: this.isSame ? 1 : 0.5,
  highlightSeriesOpts: {
    strokeWidth: 1,
    strokeBorderWidth: 1,
  }
};

this.dygraph = new Dygraph(this.chartDom, this.data, options);

当 isSame 为真，不设置 hover 样式区别。false 时 hover 有高亮。

isSame 为 true 效果图如下：

Dygraph 移除图表 Hover 默认_JavaScript_02

移除线条 Hover 的定位点

上图的展示还有定位点的存在，那么，我们怎么移除它呢？

如下：

public isSame:boolean = true;

let options = {
  highlightSeriesBackgroundAlpha: this.isSame ? 1 : 0.5,
  highlightCircleSize: this.isSame ? 0 : 3, // other seria
  highlightSeriesOpts: {
    strokeWidth: 1,
    strokeBorderWidth: 1,
    highlightCircleSize: this.isSame ? 0 : 5 // highligh seria
  }
};

this.dygraph = new Dygraph(this.chartDom, this.data, options);

效果如图：

Dygraph 移除图表 Hover 默认_typescript_03

参考

  • Interactive Elements
  • custom circle
  • Disable highlighting at all

Dygraph 移除图表 Hover 默认_JavaScript_04