!!!###!!!title=200- 环形图 hover 的时候,如何配置边框的样式?——VisActor/VChart FAQ 文档!!!###!!!

环形图 hover 的时候,如何配置边框的样式?

问题描述

环形图的交互中,当指针悬停在环形图的扇区上时,如何改变扇区的边框颜色、边框粗细、调整扇区的半径大小以及改变扇区的填充透明度? 除此之外,如何处理其他扇区,即非悬停状态下的扇区的样式?

解决方案

VChart 图表已经提供了对应的功能,VChart 对图元上的各种常用交互抽象为了图元的状态,将图元的状态分为了以下几种:

  • hover 指针悬浮状态,图元被鼠标指针悬浮时的状态。
  • hover_reverse 非指针悬浮状态,当有图元进入了 hover 状态时,其他图元的状态。
  • selected 选中状态,图元被选中时的状态。
  • selected_reverse 非选中状态,当有图元进入了 selected 状态时,其他图元的状态。
  • dimension_hover 维度悬浮状态,鼠标指针悬浮在某一段 x 轴区域内时的状态。
  • dimension_hover_reverse 非维度悬浮状态,当有图元进入了 dimension_hover 状态时,其他图元的状态。

如果想要 hover 到环形图时,改变图元的样式,可以在 pie 配置中,设置图元的 hover 状态。 参考文档:图元的状态

代码示例

在以下示例中,pie.state 中设置了 4 个状态

  • hover: 指针悬浮到的图元, 显示描边,填充透明度变低,扩展外半径。
  • hover_reverse:其它未悬浮到的图元,缩小外半径。
  • selected:指针选中的图元,扩大内半径和外半径。
  • selected_reverse:其它未选中的图元,填充透明度变低。

相关文档