【每日教程】用中继器做堆叠柱状图

简介: 【每日教程】用中继器做堆叠柱状图

效果如下:

640.gif


一、功能介绍

  1. 所有图表不需要联外网,数据也不是写死的,只需在中继器或表格中填写数据即可自动生成图表,操作简单。
  2. 大小、颜色、样式、交互可以自由变换。
  3. 鼠标移入时能显示具体数据。


二、制作方法

(1)先做出普通的柱形图原件,具体制作方法参考我上一篇文章——Axure 教程:怎么做超漂亮的柱状图

(2)中继器内材料:矩形1,复制多个柱形图里面的矩形,填充自己喜欢的颜色,放置于原来矩形一致的地方。

640.png


(3)中继器内表格设定

640.png


x是横坐标的值,no是各种产品的值

(4)在中继器外建一个文本框(命名为最大值)并隐藏,只用于逻辑处理。文本框的值填写no里面最大的总值,该案例为980。逻辑是找到最高的总值,让比它底的值调低高度。具体公式[[LVAR2.height*(Item.no/LVAR1)]]。

LVAR2.height指矩形的高度,LVAR1指no的最大值,Item.no指no的当前值。

(5)具体交互思路

中继器加载时,我们设置每个颜色柱状的尺寸,具体设计方法请看上一遍文章。然后我们让矩形2放在矩形1的上面,矩形3放在矩形2上面,以此类推。

640.png


(6)做一个标签,如下图所示,默认隐藏。

640.png


思路,鼠标移入矩形的时候,显示标签,标签跟随鼠标移动,让Item.no的值=文本标签2,Item.x的值=文本标签1,以此类推。

鼠标移出的时候,隐藏标签即可。

640.png


最后,制作完成后,以后使用方便,仅需简单填写中继器的内容,即可拥有完美的效果,所以强烈推荐给各位使用。
作者:梓贤vigo;

微信公众号:Axure高保真原型,分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容

本文由微信公众号:Axure高保真原型 授权发布,未经许可,禁止转载

相关文章
|
5天前
|
NoSQL 数据库 Python
PyQt学习(二)-----图形的建立(柱状图,折线图,堆叠柱状图,饼图)
PyQt学习(二)-----图形的建立(柱状图,折线图,堆叠柱状图,饼图)
9 1
|
5天前
【统计图】Echarts实现多条折线图渐变堆叠效果
【统计图】Echarts实现多条折线图渐变堆叠效果
|
5天前
使用分面展示不同组别的双 Y 轴图形
使用分面展示不同组别的双 Y 轴图形
36 0
|
6月前
hcharts堆叠柱形图
hcharts堆叠柱形图
20 0
|
6月前
hcharts实现堆叠柱形图
hcharts实现堆叠柱形图
17 0
|
7月前
|
数据可视化
R绘图 | 云雨图+双向条形图
R绘图 | 云雨图+双向条形图
72 0
|
9月前
|
数据可视化 数据挖掘
可视化 | Pyecharts象形柱图--图例自定义
可视化 | Pyecharts象形柱图--图例自定义
|
10月前
|
前端开发
echart折线图堆叠 y轴和实际数据不对应
echart折线图堆叠 y轴和实际数据不对应
100 0
|
10月前
Echarts实战案例代码(54):柱状图堆叠实现刻度线的解决方案
Echarts实战案例代码(54):柱状图堆叠实现刻度线的解决方案
67 0
|
10月前
|
数据可视化
数据可视化Echarts学习(2):柱图任务进度完成比例图属性练习柱图堆叠
数据可视化Echarts学习(2):柱图任务进度完成比例图属性练习柱图堆叠
65 0