不借助Echarts等圖形框架原生JS快速實現折線圖效果
1. 折線圖效果預覽
例如下圖所示的折線圖效果實現就很簡單：
調用下面這段JS代碼中的方法就好了：
假設頁面上需要連接的所有點元素集合是eleDots，則頁面上執行下fnLineChart(eleDots)效果就出來了。
當然，這段JS只處理長度和角度這兩個動態屬性，其他固定的樣式還需要CSS配合，例如，線條的粗細和線條顏色，例如下面這個粗細2像素的綠色折線，可以這樣：
2. 斜線效果實現的原理
1）計算兩點之間的直線長度
這個應該屬於初中或者高中時候的知識，勾股定理，a^2 + b^2 = c^2，直線長度實際上就是c，而a, b則是兩個點的橫坐標距離和縱坐標距離，假設直線前后兩個點的坐標分別是(x1, y1)和(x2, y2)，則直線長度為：
2）計算兩點之間的弧度或角度
這個也是屬於初中或者高中時候的知識，已知兩個直角邊的長度，求y邊的對角角度，我們可以使用Math.atan()方法計算出弧度，CSS3中有專門的弧度單位rad，就是用來給旋轉使用的，於是我們可以直接設置：
我們的線條就旋轉了。有些小伙伴習慣使用角度deg，也是可以的，借助Math.PI常量再轉換下，代碼如下：
3）設置transform-origin變換點
這一步很重要是不可或缺的，否則線條的位置會有問題，就是我們需要設置線條旋轉的變換點是左邊緣居中位置，如下CSS代碼：
於是乎，我們就可以畫出兩點之間的斜線效果了。因此，要實現折線圖圖表效果，步驟下面這樣：
如果希望移到點元素上有黑色tips信息提示，可以使用LuLu UI中的tips提示方法，如果結構合理，純CSS就可以實現。
3. 簡單的圖表效果沒必要使用框架
本文demo展示折線斜線圖表效果，所使用JS代碼就寥寥幾十行，而且以后也可以復用，代碼量幾乎可以不值一提。但是，如果就為了這一個小小的功能，而引入一個巨大的 Highcharts 或者 Echarts JS文件就成本有些大，而且UI定制這一塊也不如手動寫寫樣式來得快。
簡單的圖表效果完全沒必要使用框架，純手寫手寫正好還可以鍛煉自己的基本功。
也是可以純傳統DOM實現，無需借助SVG或canvas技術。
圖表框架什么時候使用合適呢？
今天就分享到這，今日留言話題：今天的這個小功能你們學會了嗎？一起來說說吧，對於有價值的留言，我們都會一一回復的。如果覺得對你有一丟丟幫助，請點右下角【在看】，讓更多人看到該文章。
【我們直招】很苦逼，但工資超級高！