html鼠标悬停显示竖线,【惊呆了，还能这样玩】Excel图表中的鼠标悬停交互技术...

图表上的鼠标悬停交互技术&＃xff0c;可以实现一种高级的选择器和交互手段&＃xff0c;当用户把鼠标悬停在图表的某个元素、数据点上时&＃xff0c;我们可以利用图表事件捕获到&＃xff0c;并用这个结果去驱动一个动态图表&＃xff0c;实现动态图表和交互效果。

在《经济学人的动态图表与交互设计》课程的第6章&＃xff0c;鼠标滑过折线图的动态图表&＃xff0c;就是一种悬停技术应用的形式。用户把鼠标在股市折线图上滑过&＃xff0c;则动态显示当前数据点日期的相关数据&＃xff0c;并图表中进行突出显示。这种滑过即选取的交互方式&＃xff0c;非常轻盈&＃xff0c;无需选择或者点击鼠标&＃xff0c;体现的是一种数据灵动之美。

悬停技术是利用了Excel图表的 mouse_move 事件&＃xff0c;实现过程比较复杂&＃xff0c;我是在 J-walk 的《VBA编程宝典》这本书里学到的技术方法&＃xff0c;运用到自己的图表形式&＃xff0c;弄出各种各样的交互形式和效果。以下是书中的简单示例步骤&＃xff0c;难度较大&＃xff0c;高能预警。

vba新手不一定需要弄懂这些代码&＃xff0c;老实说我也不是都弄懂了&＃xff0c;我们能够依葫芦画瓢做出来就可以了。如果看不懂这两页纸又希望学会这个技术&＃xff0c;可以参加经2季课程&＃xff0c;学习第6章的视频讲解。PS&＃xff1a;这个课程的难度较高&＃xff0c;参加的话需要有一定基础和思想准备哦。

第7章也是这个技术的应用形式&＃xff0c;是滑过折线图驱动一个动态仪表盘图表。

利用这种悬停技术&＃xff0c;可以做出类似切片钻取的交互操作。当然&＃xff0c;在新一代的商业智能软件里&＃xff0c;比如Tableau、PowerBI&＃xff0c;基于同一个 cube 的多个图表之间&＃xff0c;都是可以相互切片钻取的了&＃xff0c;这就是软件越来越强大的地方。

不过&＃xff0c;在适当的代价之内&＃xff0c;在传统的 Excel 里做些这样的动态图表&＃xff0c;还是不错的。下面贴几个 Excel 制作的鼠标滑过动态图表的应用范例&＃xff0c;以供参考。

这是最近仿微信分析图表的一个图&＃xff0c;鼠标滑过折线图突出显示数据点的动态图表&＃xff0c;悬停时&＃xff0c;小圆点、竖线、数据标签同时突出显示。

这个例子里&＃xff0c;上方还有鼠标滑过单元格的选项卡选择形式&＃xff0c;这是一种单元格悬停交互技术&＃xff0c;经2季课程里面也有详细介绍&＃xff0c;我最喜欢的Excel技巧之一。

这是之前的一个范例&＃xff0c;背后的浅色柱形图&＃xff0c;既用来捕获鼠标&＃xff0c;又用来突出显示当前选择对象&＃xff0c;一举两得。

这是以前仿NY的一个动态图表&＃xff0c;鼠标滑过的小有多平板折线面积图&＃xff0c;所有小图表上的小黑点、竖线、年份、标签一起同步流动&＃xff0c;很有意思。这个之前有写过教程帖子&＃xff0c;范例文件链接也还在&＃xff0c;可以下载。【提示&＃xff1a;本帖下载资源在这个链接里】

将悬停技术和前面的射线技术结合起来&＃xff0c;则可以制作下面的动态图表&＃xff0c;鼠标悬停突出显示的射线地图。这个比较复杂&＃xff0c;暂时没空写贴讲解&＃xff0c;有兴趣的朋友可以自行研究。

看了这些鼠标滑过的动态图表范例&＃xff0c;是不是觉得这种交互形式很好很强大&＃xff1f;是的&＃xff0c;一旦学会了这种技术&＃xff0c;你可以 DIY 出很多新颖的动态图表交互形式。也不需要记住方法步骤代码&＃xff0c;有一个范例文件用来依葫芦画瓢就可以了。