图表中如何自定义tooltip的位置，偏移量？

作者站长头像
站长
· 阅读数 20

我在使用VChart图表时，遇到了图表提示框与鼠标指针距离很近的问题，这样一来在高分辨率的大屏幕上鼠标指针放大后可能会遮挡提示框，有没有什么办法能解决这个问题？图表中如何自定义tooltip的位置，偏移量？

回复
1个回答
avatar
test
2024-06-27

解决方案

VChart图表已经提供了对应的功能，你只需要在图表的spec里设置tooltip.offset即可。官网上有对应的配置文档。https://visactor.io/vchart/option/barChart#tooltip.offset

代码示例

spec.tooltip.offset = {
    x: 40,
    y: 40,
}

结果展示

在线Demo: https://codesandbox.io/s/tooltip-offset-mns4gl?file=/src/inde...

answer image

相关文档

tooltip option：https://visactor.io/vchart/option/barChart#tooltip.offsetgithub：https://github.com/VisActor/VChartTooltip tutorials: https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Conc...Tooltip demos:https://www.visactor.io/vchart/demo/tooltip/custom-mark-tooltip

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容