中继器&三角函数绘制高复用折线图(附源文件)

不懂技术怎么做产品?15天在线学习,补齐产品经理必备技术知识,再也不被开发忽悠。了解一下>

本文将讲解如何通过中继器与三角绘制一个折线,并实现高复用(做简单的改变即可适应于不同的需求,如改变数值直接改变折线的样子,文末附源文件下载。)

原型界面:

中继器对应的数值:

最终html效果:

现在我们就来看看如何实现呢?

中继器数值分为三个:

  1. xulie:序列(无意义)
  2. zhi1:每个线段起点的值
  3. zhi2:每个线段重点的值(zhi2=后一个序列的zhi1)

相应的中继器内的原件分为是四个:

  1. 起点半圆:d1;
  2. 终点半圆:d2;
  3. 线段:t;
  4. 背景(半透明层):yt (为了出背景交替的效果,也是作为隔断的宽)。

将值带入:

d1的坐标(0,[[This.y-Item.zhi1-5]])

y=当前点的位置-应该上移动的位置;应该上移动的位置=zhi1+6(起点半圆的半径)-1(线宽的一半)

d2的坐标([[yt.width-6]],[[This.y-Item.zhi2-5]])

x=一个隔断的宽度-终点半圆的半径】【y=当前点的位置-应该上移动的位置;应该上移动的位置=zhi2+6(起点半圆的半径)-1(线宽的一半)

现在重点来了,对线段的处理分为如下三部:

  1. 将线段移动到应该的位置d;
  2. 计算出两点之间的斜线的长度l,并改变线段的尺寸为l;
  3. 计算出线段应该旋转的角度,并旋转线段。

直接上公式了:

  1. 移动位置为(0,[[This.y-Item.zhi1-5]])。
  2. 线段长度为 ([[Math.pow(This.width*This.width+(Item.zhi2-Item.zhi1)*(Item.zhi2-Item.zhi1),0.5)]]) 【y= (隔断的宽度^2+起点终点的高度差^2)开平方】。
  3. 旋转的角度为([[Math.atan(Item.zhi2-Item.zhi1)/yt.width)*180/3.14]])【角度=atan(起点终点的y轴差/起点终点的x轴差)】。

大功告成!

改变数值在运行一下:

是不是很简单呢?

再讲讲如何复用:

  1. 若需要改变数据条数,直接为中继器添加数据几个;
  2. 若需要改变一个隔断的宽度,直接改变中继器中的的 线段t的长度 与背景半透明层yt的宽,并调整终点的起始位置即可;
  3. 需要调整整个折线图的高度,直接改变中级其中的线段 t 起点终点半圆(d1,d2)的位置,并改变半透明层yt的高度即可。

这个页面是参考的是公众平台助手的一个数据界面,完整界面如下(源文件可下载):

原型文件下载:

链接:https://pan.baidu.com/s/1f4UHdLXVLSytPUGh3TKUvw

密码:e48t

 

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

题图来自 Pexels,基于 CC0 协议

给作者打赏,鼓励TA抓紧创作!
4人打赏
评论
欢迎留言讨论~!
  1. 回复