不使用canvas与图片绘制折线图

学习思路自由发挥，发挥到了统计图表的领域里，准备做个折线图。做折线图用canvas当然是非常方便了，也有极其丰富的插件可用，之所以非要搞个不使用canvas与插件实现的折线图，那就是我开拓思路（闲的无聊）的成果，简单和大家分享一下

先说说思路，最早实现折线图的思路是先百度，看有没有现成的例子，当然，我找到一个https://www.jb51.net/jiaoben/81610.html，做的很好看，纯css实现

但是他用了不少图片，还是不能动态传值的，不是很适合放飞思想，自己定义一些东西，所以就仅仅参考一下，自己动手搞一个版本

1、先做静态模型

这是做东西的基本思路，先做个静态的，有个效果就行，可以先帮你理清思路与实现细节，这个应该都可以做出来，效果大概是这样的

基本代码是这样的

[code]<div class="linegraph" style="width: 150px;">
<div class="line" style="z-index: 1; margin-left: 0px">
<div class="real_line" style="transform: rotate(45deg); margin-top: -1000px"></div>
<div class="point_show"></div>
</div>
<div class="line" style="z-index: 2; margin-left: 30px">
<div class="real_line" style="transform: rotate(27.47deg); margin-top: -1030px"></div>
<div class="point_show"></div>
</div>
<div class="line" style="z-index: 3; margin-left: 60px">
<div class="real_line" style="transform: rotate(153.43deg); margin-top: -1087.69px"></div>
<div class="point_show"></div>
</div>

当然这段代码是我动态生成出来的，只是看结构，里面的值不重要了 

[code].linegraph{
height: 1000px;
display: flex;
overflow: hidden;
position: relative;
}
.line{
width: 30px;
height: 1000px;
background-color: #888888;
position: absolute;
}
.real_line{
width: 100%;
height: 2000px;
border-left: 1px solid #fff;
transform-origin: 0 100%;
}
.point_show{
width: 5px;
height: 5px;
margin: -2.5px;
border-radius: 50%;
background-color: #fff;
position: absolute;
z-index: 100;
}

2、动态传值

一个不能更改的折线图自然是没有什么价值的，所以要加上可以动态传入数值生成对应折线图的方法

[code]$(document).ready(() => {
let pointArr = [
{x: 0, y: 0},
{x: 22, y: 22},
{x: 35, y: 47},
{x: 47, y:23},
{x: 55, y: 47},
{x: 59, y: 59}
];//x必须是递增的，x、y符号必须相同
cerateLineGraph(pointArr, ".linegraph");
})
let computingAngle = (pointX, pointY, newPointX, newPointY) => {
const x = newPointX - pointX;
const y = newPointY - pointY;
let originalAngle = 360*Math.atan(x/y)/(2*Math.PI);
const an
4000
gle = originalAngle < 0 ? 180 + originalAngle : originalAngle;
const top = 30/Math.tan(angle*Math.PI/180);
return {angle: angle, top: top};
}
let cerateLineGraph = (pointArr, elem) => {
let line = "";
let top = -1000;//real_line的高度与line高度的差值，确保折线连续位置正确
$(elem).css("width", 30*(pointArr.length - 1));
for (let i = 1; i < pointArr.length; i++) {
let point = computingAngle(pointArr[i-1].x, pointArr[i-1].y, pointArr[i].x, pointArr[i].y);
line += `<div class="line" style="z-index: ${i}; margin-left: ${30*(i-1)}px">
<div class="real_line" style="transform: rotate(${point.angle}deg); margin-top: ${top}px"></div>
<div class="point_show"></div>
</div>`;
top -= point.top;
}
$(elem).html(line);
}

大概是这么一个方法，根据传入的数值进行计算（重新使用三角函数真是又熟悉又陌生，让人有点想哭），三角函数不会的自己去找个教程补一下，计算real_line应该偏转的角度，距离表格底部的距离，然后循环遍历（注意从第二个元素开始循环遍历），生成元素将其显示在页面上就大功告成了

3、总结

当然还是要说明一下，这不是个技术教程，就是个思路分享，你要是需要这个东西就尽管拿去用，我只是在不停的记录以及分享自己的思路，遇到问题思路清晰是非常重要的，也希望我的思路会对你们有什么启发，能帮你们解决什么问题自然是更好了 

稍微美化一下还算好看