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

原标题：中继器&三角函数绘制高复用折线图（附源文件）本文将讲解如何通过中继器与三角绘制一个折线，并实现高复用（做简单的改变即可适应于不同的需求，如改变数值直接改变折线的样子，文末附源文件下载。）原型界面：中继器对应的数值：最终html效果:现在我们就来看看如何实现呢？中继器数值分为三个：相应的中继器内的原件分为是四个：将值带入：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（线宽的一半）现在重点来了，对线段的处理分为如下三部：直接上公式了：大功告成！改变数值在运行一下：是不是很简单呢？再讲讲如何复用：这个页面是参考的是公众平台助手的一个数据界面，完整界面如下（源文件可下载）：原型文件下载：链接：https://pan.baidu.com/s/1f4UHdLXVLSytPUGh3TKUvw密码：e48t本文由 @ ytw 原创发布于人人都是产品经理。未经许可，禁止转载