Axure 9.0 原生组件：让折线图实现动态交互（动态面板）

如何画基础折线图可以参考之前文章​https://blog.csdn.net/xy345382605/article/details/159460825?fromshareblogdetailsharetypeblogdetailsharerId159460825sharereferPCsharesourcexy345382605sharefromfrom_link技巧鼠标悬停显示详情核心需求鼠标移入在某柱体时该柱体显示「类 别 数量 」详情卡片增强数据传递效率。设置这一交互效果能让用户在浏览折线图时通过鼠标悬停获取更详细的数据信息增强对数据的理解。首先在画布上为每个圆点添加热区在右侧交互面板中点击 “新建交互”选择 “鼠标悬停时” 事件 。在弹出的动作设置窗口中添加 “显示 / 隐藏” 动作目标是一个事先准备好的用于显示详细数据的元件比如文本标签或动态面板。本篇介绍使用动态面板实现若想学习文本标签的可以参考本人写的另一篇文章https://blog.csdn.net/xy345382605/article/details/159466876?fromshareblogdetailsharetypeblogdetailsharerId159466876sharereferPCsharesourcexy345382605sharefromfrom_link实战效果图实现步骤第一步折线图组合这一步的作用防止折线图错位个人习惯第二步标签准备1准备好文本标签2调整详情卡位置。第三步新建动态面板选中详情卡右键转换为动态面板并给动态面板命令便于后续的维护。第四步设计面板内容双击动态面板进入编辑状态默认会有个state转态点复制转态就可以完成两个状态设置命名为显示、隐藏隐藏状态放前面其他几个详情卡也同样的方法设置设置后效果图第五步添加交互1为每一个圆点添加热区控制好热区的高度和宽度同时命名好每一个热区的名字便于后续的区分。2热区置顶不置顶预览的时候可能不起效果。注意点先放大尺寸便于设置3热区添加动作鼠标移入时显示面板鼠标移出时隐藏面板。添加「鼠标停放时」事件「显示」详情卡片设置「动画淡入」「时长300 毫秒」添加「鼠标离开时」事件「隐藏」详情卡片动画「淡出」「时长300 毫秒」美化技巧让折线图更具专业感一色彩搭配贴合场景与品牌专业商务场景主色用 #1890ff蓝色、辅助色 #722ed1紫色避免高饱和色数据对比场景多组折线用「蓝色 #1890ff」「绿色 #52c41a」「橙色 #fa8c16」区分且每组颜色与图例对应品牌适配场景提取产品 LOGO 主色作为折线颜色增强品牌一致性。二细节优化提升视觉体验折线添加渐变填充选中折线在右侧「样式」面板勾选「填充」→「线性渐变」从主色#1890ff到透明#1890ff00方向「从上到下」营造层次感坐标轴刻度优化纵轴数值可添加单位如「万」「%」横轴月份若过长可改为「1 月」「2 月」避免文本重叠添加网格线拖出「水平线」复制 4 份与纵轴刻度对应颜色 #f5f5f5、粗细 1px选中所有网格线设置「置于底层」帮助读者快速读取数据。三添加图例多组数据必备若存在多组折线如日 月年需添加图例拖出「矩形」10×10px颜色与对应折线一致旁边添加「文本」元件如「日活 (万)」字体 12px、颜色 #666将图例组合后放置在图表右上角与标题间距 15px多组图例水平排列间距 20px。