Dygraph 移除图表 Hover 默认

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

默认，在 Hover 的过程中：

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

线条 Hover 不高亮展示

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

我们将其统一为非高亮：

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 效果图如下：

移除线条 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);

效果如图：

参考

• Interactive Elements
• custom circle
• Disable highlighting at all

推荐阅读

• Dygraph 结合 Angular 实现多图表同步
• Dygraphs 中调整 x 轴 label 展示
• Dygraphs 中的高亮区间