Dygraph 移除图表 Hover 默认

Jimmy_is_jimmy

发布于 2023-07-09 15:01:38

1360

发布于 2023-07-09 15:01:38

文章被收录于专栏：call_me_R

今天，我们来讲讲 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);

效果如图：