今天，我们来讲讲 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);
效果如图：
参考
推荐阅读
© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END
