一文講解html中怎麼使用SVG實現畫走勢圖(分享程式碼)

奋力向前
發布: 2021-08-26 09:59:26
轉載
2696 人瀏覽過

之前的文章《淺析javascript中Reflect內建物件(程式碼詳解)》中,給大家介紹了解了JS中Reflect內建物件。以下這篇文章跟大家介紹怎麼使用SVG實現畫走勢圖,有需要的朋友可以參考一下,希望對你們有所助。

一文講解html中怎麼使用SVG實現畫走勢圖(分享程式碼)

先說說viewBox是幹嘛的,就是比例縮放視圖的。用圖形表示

  
登入後複製


#加上viewBox="0,0,80,70"

  
登入後複製


#當然還有可以配合preserveAspectRatio屬性來使用,其取值有xMin,xMid,xMax,yMin,yMid,yMax,meet(保持縱橫比縮放),slice(保持縱橫比同時比例小的方向放大填滿viewport) 就是縮放的時候是起始和結束的依據點。如:preserveAspectRatio="xMidyMin meet"就是以x,y最小值為起點保持比例縮放

上面說的是試圖縮放,接下來要說的是:如何把大象放進冰箱,要幾個步驟?

首先說明我要做什麼:根據資料畫行情走勢圖。就是畫曲線,只畫曲線,所以不用canvas,採用SVGpolyline來實現,相對較容易的多了。

最後要得到如下:

一文講解html中怎麼使用SVG實現畫走勢圖(分享程式碼)

拿到的資料是這樣的:

BTC:[6612.775,6610.77,6585.72,6590.54,6587.38,6570.685,6565.215,6561.175,6557.735,6585.975,6601.18,6620,6596.5,6594.82,6594.5,6595.245,6599.005,6586.52,6582.12,6600.805,6614.515,6617.725,6614,6605.97,6631.715,6644.725,6596.355,6586.575,6594.175,6597.23,6592.285,6586.33,6579.57,6589.08,6576.42,6582.405,6609.89,6596.29,6586.145,6604.79,6594.375,6583.645,6580.32,6589.915,6594.555,6583.585,6599.6,6599.345,6572.185,6495.02,6476.98,6484.14,6509.8,6508.965,6479.21,6486.7,6463.08,6465.765,6467.155,6481.5,6528.43,6552.2,6566.19,6559.015,6522.25,6558.81,6573.42,6578.535,6593.305,6605.88,6611.695,6613.765,6611.765,6595.21,6601.5,6583.095,6575.155,6549.715,6590.31,6594.51,6617.565,6623.98,6637.5] ETH:[523.05,520.625,516.555,517.03,516.84,515.375,513.44,510.015,508.075,512.7,514.175,515.915,511.13,510.36,508.24,509.325,511.885,511.71,511.965,514.45,517.81,519.87,519.495,518.035,520.435,522.44,515.38,514.225,515.51,516.16,516.265,514.755,514.165,515.605,515.105,513.76,517.73,517.15,514.695,520.09,519.93,521.21,521.42,521.865,526.23,526.26,528.475,529.21,522.5,517.5,515.31,515.07,518.815,518.935,514.56,516.19,511.925,516.505,517.85,522.03,532.255,537.33,538.505,534.74,530.345,536.19,535.55,538.09,543.155,544.39,549.165,543.73,532.845,532.485,530.815,529.42,529.945,525.42,532.49,535.26,536.9,534.32,539.065] BCT:[5.7627,5.7536,5.7301,5.6882,5.6901,5.6759,5.6588,5.6724,5.7128,5.7375,5.7605,5.7543,5.7301,5.7298,5.7324,5.7121,5.7226,5.71,5.7025,5.7664,5.8049,5.8064,5.7976,5.7972,5.821,5.8486,5.7901,5.7303,5.7405,5.7783,5.7676,5.7358,5.721,5.7361,5.7149,5.7257,5.8168,5.8,5.7458,5.8002,5.7591,5.75,5.6963,5.6838,5.6716,5.6577,5.6724,5.6828,5.6638,5.6113,5.5479,5.5209,5.5457,5.5935,5.5685,5.5767,5.5376,5.5209,5.5,5.5,5.5751,5.659,5.6563,5.6715,5.6,5.6267,5.6437,5.6525,5.6678,5.6903,5.7346,5.7455,5.7435,5.7296,5.7485,5.665,5.6473,5.5814,5.635,5.6435,5.6616,5.6861,5.745]
登入後複製

沒錯,全都是y座標數值。要利用這些數值在75*26的(舞台或場景)視圖上畫走勢圖,也就是y座標最大值為26x座標最大值為75

那麼問題來了:

1)只有y座標數組,沒有x#座標,如何畫曲線呢?這個可以不用考慮,因為是畫滿畫布,xy座標預設為00,所以x座標數組為0,1,2,3....75,y 座標數組為0,1,2,3...26

y座標數組長度剛好為75組的情況下,預設畫滿畫布,顯然所給的資料是大於75群組的

2)y座標數組長度大於畫布單位長度,x座標如何取值?剛好為75群組的時候,x一次累加為1,大於75群組的時候x座標累加值為x=75 / BTC.length

這時候xy座標都知道了,那麼開畫吧,透過計算我們得到如下

  
登入後複製

顯然所得到的結果不是我們期待的,一片空白,看不到數據。為啥?

3)y座標太大,超出場景最大範圍,那麼要如何把大象放進冰箱呢?縮放y的比例,然後向上垂直偏移座標,塞回冰箱裡,不讓象的耳朵漏出來。把整體放大10倍,得到如下


那么这个数据是如何计算出来的呢?

// 数据 //x坐标数组 let s = 750 / BTC.length; //x起始坐标数组 let x = 0; //y坐标最小值 let min = BTC.reduce((x, y) => (x > y ? y : x)); //y坐标最大值 let max = BTC.reduce((x, y) => (x > y ? x : y)); //缩放比例 max-min为曲线幅度 let rodio = 260 / (max - min); // 此处的points 的值就是svg 都polyline 的points 属性的值 let points = ""; //统一处理y坐标,垂直向上偏移,也即是y坐标最高点归零 BTC.forEach((y) => { points += x + " " + (y - min) * rodio + " "; x += s; });
登入後複製

最后还原缩放比例,得到最终想要的样子。

那么这个和viewbox有什么关联呢。

仔细观察,以上3组数据BTC,ETH,BTC,发现这些数据都不在同一个波段,显然这个时候 ,如果用viewbox来缩放视图不可取。当然非要用viewbox来处理也未尝不可,只是感觉很愚蠢。手动改变数值来达到目的更快而已。这样不管大象有多大,我们都能顺利的塞到冰箱里。

推荐学习:SVG视频教程Html视频教程

以上是一文講解html中怎麼使用SVG實現畫走勢圖(分享程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:chuchur.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!