原生js實現折線圖

不借助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技術。

 

圖表框架何時使用合適呢？

 

 

 

今天就分享到這，今日留言話題：今天的這個小功能大家學會了嗎？一塊兒來講說吧，對於有價值的留言，咱們都會一一回復的。若是以爲對你有一丟丟幫助，請點右下角【在看】，讓更多人看到該文章。

 

【咱們直招】很苦逼，但工資超級高！