中继器&三角函数绘制高复用折线图
cac55 2024-09-19 16:50 50 浏览 0 评论
本文将讲解如何通过中继器与三角绘制一个折线，并实现高复用（做简单的改变即可适应于不同的需求，如改变数值直接改变折线的样子，文末附源文件下载。）
原型界面：
中继器对应的数值：
最终html效果:
现在我们就来看看如何实现呢？
中继器数值分为三个：
- xulie:序列（无意义）
- zhi1:每个线段起点的值
- zhi2:每个线段重点的值（zhi2=后一个序列的zhi1）
相应的中继器内的原件分为是四个：
- 起点半圆：d1；
- 终点半圆：d2；
- 线段：t；
- 背景（半透明层）：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（线宽的一半）
现在重点来了，对线段的处理分为如下三部：
- 将线段移动到应该的位置d；
- 计算出两点之间的斜线的长度l，并改变线段的尺寸为l；
- 计算出线段应该旋转的角度，并旋转线段。
直接上公式了：
- 移动位置为（0，[[This.y-Item.zhi1-5]]）。
- 线段长度为 （[[Math.pow（This.width*This.width+（Item.zhi2-Item.zhi1）*（Item.zhi2-Item.zhi1）,0.5）]]） 【y= （隔断的宽度^2+起点终点的高度差^2）开平方】。
- 旋转的角度为（[[Math.atan（Item.zhi2-Item.zhi1）/yt.width）*180/3.14]]）【角度=atan（起点终点的y轴差/起点终点的x轴差）】。
大功告成！
改变数值在运行一下：
是不是很简单呢？
再讲讲如何复用：
- 若需要改变数据条数，直接为中继器添加数据几个；
- 若需要改变一个隔断的宽度，直接改变中继器中的的 线段t的长度 与背景半透明层yt的宽，并调整终点的起始位置即可；
- 需要调整整个折线图的高度，直接改变中级其中的线段 t 起点终点半圆（d1,d2）的位置，并改变半透明层yt的高度即可。
这个页面是参考的是公众平台助手的一个数据界面，完整界面如下（源文件可下载）：
原型文件下载：
密码：e48t
本文由 @ ytw 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自 Pexels，基于 CC0 协议
相关推荐
- 如何在VMware虚拟机上安装运行Mac OS系统??
-
想在自己的Windows电脑上安装一个MacOS体验一下苹果系统的小伙伴，教程来了！！！一、安装前准备虚拟机运行软件：VMwareWorkstationPro，版本：16.0.0。（可以注册）VM...
- 效率!MacOS下超级好用的Linux虚拟工具:Lima
-
对于MacOS用户来说，搭建Linux虚拟环境一直是件让人头疼的事。无论是VirtualBox还是商业的VMware，都显得过于笨重且配置复杂。今天，我们要介绍一个轻巧方便的纯命令行Linux虚拟工具...
- 普通电脑安装苹果MacOS+Windows10双系统，这次可不是虚拟机
-
上篇文章中说到，有一朋友因为工作需要，得临时使用苹果系统，笔者给他用VmwareWorkStation安装了一个苹果系统的虚拟机，结果装是装上了，但是发现调整分辨率有点小问题，文件传输也不方便。虽说...
- 官方证实苹果M1芯片不支持Windows 11
-
中关村在线消息：近日根据微软官方透露，目前已经确定Windows11不支持运行在苹果M1芯片上，这意味着过往在Mac电脑上安装Windows系统的做法在M1芯片的Mac电脑上并不适用。不过此前有网友...
- 这可能是 Mac 共享文件最详细的教程了
-
如果希望让一台Mac访问另一台Mac上的文件，就可以使用Mac的文件共享功能。而且不仅是Mac之间，甚至用iPhone、iPad、WindowsPC都可以访问Mac的共享文件...
- 在 M1/M2 Mac 上，让 Windows 11 免费“跑”起来
-
自从苹果在产品中逐步使用自研的M系列芯片淘汰掉英特尔芯片之后，很多事情都发生了改变。作者|KirkMcElhearn和JoshuaLong译者|弯月出品|CSDN（ID：CS...
- VMware Workstation克隆虚拟机后修改ip地址和mac地址
-
VMwareWorkstation克隆虚拟机，登录之后发现，克隆虚拟机不仅用户名相同，连ip地址、mac地址也是相同的，很显然访问相同ip地址的虚拟机是会出现ip地址冲突的。一、修改IP地址这就需要...
- VirtualBox7中安装macOS big sur，在windows10&11上「保姆级教程」
-
macOSBigSur是苹果公司研发的桌面端操作系统，于北京时间2020年6月23日在2020苹果全球开发者大会上发布。BigSur采用全新的精美设计，为主要app如Safari浏览器...
- 最强mac虚拟机Parallels Desktop 16 有哪些重要的新增功能?
-
ParallelsDesktop16正式发布，软件带来了一些显着的新功能和性能增强，包括对macOSBigSur的全面支持。当苹果推出macOSBigSur时，它终止了对Par...
- 关于在MacOS安装虚拟机的全过程（macos 安装虚拟机）
-
哈喽大家好，我是咕噜美乐蒂，很高兴又见面啦！下面美乐蒂将详细地给大家介绍一下在macOS上使用VMwareFusion创建虚拟机并安装操作系统的步骤：一、确认虚拟化支持：首先，确认你的Ma...
- macOS上也能轻松运行Win系统的虚拟机，你还不知道吗?
-
在macOS系统上运行Win系统的方式，虚拟机篇吉安光头强原创你是否曾经为了在Mac上运行Windows系统而烦恼不用着急，下面我将分享一种简单易行的方法，让你轻松在Mac上运行Windows系统准备...
- Mac M芯片上安装统信UOS 1070arm64虚拟机
-
原文链接：MacM芯片上安装统信UOS1070arm64虚拟机Hello，大家好啊！今天给大家带来一篇关于如何在苹果M系列芯片的Mac电脑上，通过VMware安装ARM64版统信UOS1070...
- 虚拟机不好用?Mac mini 多配一台Windows电脑，用远程桌面更好!
-
最近新入手了MacminiM4款，这里来更新一下相关问题，对于还没有购买Macmini，但是又想要用苹果电脑的朋友，一些参考，我觉得还是挺有用的！Macmini选择哪个渠道购买好？现在比较划算...
- macOS Sequoia 正式版(24A335)黑苹果/Mac/虚拟机系统镜像
-
“以下内容来自于黑果魏叔官网”镜像特点完全由黑果魏叔官方制作，针对各种机型进行默认配置，让黑苹果安装不再困难。系统镜像设置为双引导分区，全面去除clover引导分区（如有需要，可以自行直接替换ope...
- MAC两种虚拟软件的性能简单比较 Vmware Fusion vs Parallels Desktop
-
注：本文复制来自本人微信公众号sitk。目录：一、事情由来二、环境描述三、测试软件四、测试方案五、测试记录六、测试结果一、事情由来最近在做golangweb压力测试中，发现并发请求数量一上2000，...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- 如何在VMware虚拟机上安装运行Mac OS系统??
- 效率!MacOS下超级好用的Linux虚拟工具:Lima
- 普通电脑安装苹果MacOS+Windows10双系统，这次可不是虚拟机
- 官方证实苹果M1芯片不支持Windows 11
- 这可能是 Mac 共享文件最详细的教程了
- 在 M1/M2 Mac 上，让 Windows 11 免费“跑”起来
- VMware Workstation克隆虚拟机后修改ip地址和mac地址
- VirtualBox7中安装macOS big sur，在windows10&11上「保姆级教程」
- 最强mac虚拟机Parallels Desktop 16 有哪些重要的新增功能?
- 关于在MacOS安装虚拟机的全过程（macos 安装虚拟机）
- 标签列表
-
- 如何绘制折线图 (52)
- javaabstract (48)
- 新浪微博头像 (53)
- grub4dos (66)
- s扫描器 (51)
- httpfile dll (48)
- ps实例教程 (55)
- taskmgr (51)
- s spline (61)
- vnc远程控制 (47)
- 数据丢失 (47)
- wbem (57)
- flac文件 (72)
- 网页制作基础教程 (53)
- 镜像文件刻录 (61)
- ug5 0软件免费下载 (78)
- debian下载 (53)
- ubuntu10 04 (60)
- web qq登录 (59)
- 笔记本变成无线路由 (52)
- flash player 11 4 (50)
- 右键菜单清理 (78)
- cuteftp 注册码 (57)
- ospf协议 (53)
- ms17 010 下载 (60)