axure 折线图部件_Axure教程：折线图

原标题：Axure教程：折线图

上一期教会大家如何用axure做散点图，本文将教大家如何用AXURE做折线图。

效果如下：

演示地址：http://ije8g9.axshare.cn/#g=1&p=%E6%8A%98%E7%BA%BF%E5%9B%BE%E2%80%945%E7%BA%BF

一、功能介绍

所有图表不需要联外网，数据也不是写死的，只需在中继器或表格中填写数据即可自动生成图表，操作简单。

大小、颜色、样式、交互可以自由变换。

鼠标移入时能显示具体数据。二、制作方法

(1)先做出堆叠柱形图原件，具体制作方法参考我上一篇文章——Axure教程：散点图

(2)用散点和横线制作折线，如下图所示：

(3)制作原理

中继器加载时，我们记录每一个散点的圆心的坐标。从而计算出第一个坐标和第二个坐标距离和角度。

1)记录坐标值

中继器加载的时候，如果是第一个，隐藏折线，并把记录该散点的坐标为x1，y1。

如果不是第一个值的时候，记录记录该散点的坐标为x2，y2。

2)计算距离，设置折线的长度

那么根据两点间距离公式，可以得到折线的长度，axure的函数为[[Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2))-6]]

2)计算角度，旋转折线

根据正切值可以计算到折线以散点为中心旋转的角度。axure的函数为[[(Math.atan2((y2-y1),(x2-x1))/3.1415926535898*180)]]，以折线的右端为圆心旋转。

4)完成旋转和设置尺寸后，重新设置x1为第二个散点的横坐标，y1为第二和散点的纵坐标，即x1=x2，y1=y2。

具体交互如下：

最后，制作完成后，以后使用方便，仅需简单填写中继器的内容，即可拥有完美的效果，谢谢阅读

本文由 @梓贤Vigo 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议返回搜狐，查看更多

责任编辑：

axure 折线图部件_Axure教程：折线图相关推荐

python图形化界面教程_python图形化界面开发教程
python图形化界面开发教程内容摘要 python图形化界面开发教程白萝卜:泰兴电工教程,白了点,白兰地是在红葡萄酒的基础.基金从业资格教程学校,白开水.苜蓿干草.提摩西干草.兔粮方法:白居易< ...
axure 折线图部件_Axure制作可视化图表的几种方法
做产品经理的过程中,后台的产品做了不少,画可视化图表总共经历了三个不同的阶段,分别是:表格截图.Axure钢笔工具.Axure元件(文末附下载方式). 一.使用钢笔工具制作数据可视化图表 Excel表 ...
axure中图表背影_Axure 教程：动态图表——排名图
之前的文章Axure教程:可视化视图和大家分享了怎样用中继器来制作图表.后来有粉丝问我可不可以用中继器做成动态的图表.所以现在作者就教大家怎么用axure来制作动态图表,今天先来制作排名图. 这个原型 ...
axure中备注线_Axure教程资料
THE START 今天分享的软件教程是--Axure.Axure RP是一款专业的快速原型设计工具. Axure(发音:Ack-sure),代表美国Axure公司:RP则是Rapid Prototy ...
axure rp制作输入法_Axure教程丨制作自己的Axure元件库
接触Axure有一点时间了,每次进行原型设计都需要载入好多个元件库或打开之前做的原型复制元件,不仅浪费时间而且缺少规律,所以决定整理一个自己常用的Axure元件库,以便之后做原型设计时可以快速调取.看 ...
axure如何竖立文字_AXURE教程：中继器实现穿梭框功能
在用Axure的时候,怎么通过中继器实现穿梭框功能呢?本文分享了一个方法. AXURE中的中继器是非常强大的底层组件.我们利用好中继器的强大功能,可以为我们原型设计带来很多便利,今天我们要介绍的是如何 ...
如何用计算机做出折线图,Numbers怎么做折线图 Numbers制作折线图教程
Numbers中有丰富的图表可供用户们选择,有的人想要了解下 Numbers怎么做折线图 .Numbers如何做折线图?小编带来了Numbers制作折线图教程,看完就知道Numbers怎么画折线图啦~ ...
【Python】Python之PyLab的绘制折线图（手把手教程）
Python的可视化工具有很多,数不胜数,各有优劣.本文就对其中的pylab进行介绍.之所以介绍这一款,是因为它和Matlab的强烈相似度,如果你使用过Matlab,那么相信pylab你也会很快上手. ...
python 折线图百分比_Excel柱状图折线图组合怎么做 Excel百分比趋势图制作教程...
用excel作图时候经常会碰到做柱状图和折线图组合,这样的图一般难在折线图的数据很小,是百分比趋势图,所以经常相对前面主数据太小了,在图里看不到,所以需要用次坐标轴来将其显示出来,下面就介绍这种柱状图 ...
axure轮播图怎么设置循环轮播_Axure教程：轮播图制作步骤详解
不管是在PC端还是移动端,轮播图是常见的设计元素.下面详细讲解轮播图的制作步骤. 作为Axure初学者,把最近学到的记录下来,和大家一起学习. 如何实现轮播图: 循环展示轮播图片: 将圆点与轮播图一一 ...

axure 折线图部件_Axure教程：折线图

axure 折线图部件_Axure教程：折线图相关推荐

最新文章

热门文章