這篇文章主要介紹html中如何使用SVG實(shí)現(xiàn)畫走勢圖，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比故城網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式故城網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋故城地區(qū)。費(fèi)用合理售后完善，10多年實(shí)體公司更值得信賴。

先說說viewBox是干嘛的，就是按比例縮放視圖的。用圖形來表示

<svg width="300" height="200" style="border:1px solid #ddd">
  <rect width="80" height="70" style="fill:#BDC9FF"></rect>
</svg>

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

<svg width="300" height="200" style="border:1px solid #ddd" viewBox="0,0,80,70">
  <rect width="80" height="70" style="fill:#BDC9FF"></rect>
</svg>

當(dāng)然還有可以配合preserveAspectRatio屬性來使用，其取值有xMin，xMid，xMax，yMin，yMid，yMax，meet(保持縱橫比縮放)，slice(保持縱橫比同時(shí)比例小的方向放大填滿 viewport) 就是縮放的時(shí)候是 起始和結(jié)束的依據(jù)點(diǎn)。如：preserveAspectRatio="xMidyMin meet"就是 以x，y最小值為起點(diǎn)保持比例縮放

上面說的是試圖縮放，接下來要說的是：如何把大象放進(jìn)冰箱，需要幾步？

首先說明我要干什么：根據(jù)數(shù)據(jù)畫行情走勢圖。就是畫曲線，只畫曲線，所以不用canvas，采用SVG的polyline來實(shí)現(xiàn)，相對較容易的多了。

最終要得到如下：

拿到的數(shù)據(jù)是這樣的：

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]

沒錯(cuò)，全都是y坐標(biāo)數(shù)值。要利用這些數(shù)值在75*26 的（舞臺或場景）視圖上畫走勢圖，也就是y坐標(biāo)最大值為26，x 坐標(biāo)最大值為 75。

那么問題來了：

1）只有y坐標(biāo)數(shù)組，沒有x坐標(biāo)，如何畫曲線呢？ 這個(gè)可以不用考慮，因?yàn)槭钱嫕M畫布，x，y坐標(biāo)默認(rèn)為 0，0，所以x坐標(biāo)數(shù)組為 0，1，2，3....75，y 坐標(biāo)數(shù)組為 0,1,2,3...26

在y坐標(biāo)數(shù)組長度剛好為75組的情況下，默認(rèn)畫滿畫布，顯然所給出的數(shù)據(jù)是大于75組的

2）y坐標(biāo)數(shù)組長度大于畫布單位長度，x坐標(biāo)如何取值？ 剛好為75組的時(shí)候，x一次累加為1，大于75組的時(shí)候x坐標(biāo)累加值為x=75 / BTC.length

這個(gè)時(shí)候x，y坐標(biāo)都知道了，那么開畫吧,通過計(jì)算我們得到如下

<svg xmlns="http://www.w3.org/2000/svg" width="75" height="26">
  <polyline
    points="0 6612.775 0.9036144578313253 6610.77 1.8072289156626506 6585.72 2.710843373493976 6590.54 3.6144578313253013 6587.38 4.518072289156627 6570.685 5.421686746987952 6565.215 6.325301204819277 6561.175 7.228915662650602 6557.735 8.132530120481928 6585.975 9.036144578313253 6601.18 9.93975903614458 6620 10.843373493975905 6596.5 11.746987951807231 6594.82 12.650602409638557 6594.5 13.554216867469883 6595.245 14.457831325301209 6599.005 15.361445783132535 6586.52 16.26506024096386 6582.12 17.168674698795183 6600.805 18.072289156626507 6614.515 18.97590361445783 6617.725 19.879518072289155 6614 20.78313253012048 6605.97 21.686746987951803 6631.715 22.590361445783127 6644.725 23.49397590361445 6596.355 24.397590361445776 6586.575 25.3012048192771 6594.175 26.204819277108424 6597.23 27.108433734939748 6592.285 28.012048192771072 6586.33 28.915662650602396 6579.57 29.81927710843372 6589.08 30.722891566265044 6576.42 31.62650602409637 6582.405 32.530120481927696 6609.89 33.43373493975902 6596.29 34.337349397590344 6586.145 35.24096385542167 6604.79 36.14457831325299 6594.375 37.04819277108432 6583.645 37.95180722891564 6580.32 38.855421686746965 6589.915 39.75903614457829 6594.555 40.66265060240961 6583.585 41.56626506024094 6599.6 42.46987951807226 6599.345 43.373493975903585 6572.185 44.27710843373491 6495.02 45.180722891566234 6476.98 46.08433734939756 6484.14 46.98795180722888 6509.8 47.891566265060206 6508.965 48.79518072289153 6479.21 49.698795180722854 6486.7 50.60240963855418 6463.08 51.5060240963855 6465.765 52.409638554216826 6467.155 53.31325301204815 6481.5 54.216867469879475 6528.43 55.1204819277108 6552.2 56.02409638554212 6566.19 56.92771084337345 6559.015 57.83132530120477 6522.25 58.734939759036095 6558.81 59.63855421686742 6573.42 60.54216867469874 6578.535 61.44578313253007 6593.305 62.34939759036139 6605.88 63.253012048192716 6611.695 64.15662650602404 6613.765 65.06024096385536 6611.765 65.96385542168669 6595.21 66.86746987951801 6601.5 67.77108433734934 6583.095 68.67469879518066 6575.155 69.57831325301198 6549.715 70.48192771084331 6590.31 71.38554216867463 6594.51 72.28915662650596 6617.565 73.19277108433728 6623.98 74.0963855421686 6637.5 "
    style="stroke: rgb(189, 201, 255); stroke-width: 1; fill: none;"
  ></polyline>
</svg>

顯然所得到的結(jié)果不是我們期待的，一片空白，看不到數(shù)據(jù)。為啥？

3）y坐標(biāo)太大，超出場景最大范圍，那么如何把大象放進(jìn)冰箱呢？ 縮放y的比例，然后向上垂直偏移坐標(biāo)，塞回冰箱里，不讓象的耳朵漏出來。把整體放大10倍，得到如下

那么這個(gè)數(shù)據(jù)是如何計(jì)算出來的呢？

// 數(shù)據(jù)
//x坐標(biāo)數(shù)組
let s = 750 / BTC.length;
//x起始坐標(biāo)數(shù)組
let x = 0;
//y坐標(biāo)最小值
let min = BTC.reduce((x, y) => (x > y ? y : x));
//y坐標(biāo)最大值
let max = BTC.reduce((x, y) => (x > y ? x : y));
//縮放比例 max-min為曲線幅度
let rodio = 260 / (max - min);
// 此處的points 的值就是svg 都polyline 的points 屬性的值
let points = "";
//統(tǒng)一處理y坐標(biāo)，垂直向上偏移，也即是y坐標(biāo)最高點(diǎn)歸零
BTC.forEach((y) => {
  points += x + " " + (y - min) * rodio + " ";
  x += s;
});

最后還原縮放比例，得到最終想要的樣子。

那么這個(gè)和viewbox有什么關(guān)聯(lián)呢。

仔細(xì)觀察，以上3組數(shù)據(jù)BTC，ETH，BTC，發(fā)現(xiàn)這些數(shù)據(jù)都不在同一個(gè)波段，顯然這個(gè)時(shí)候 ，如果用viewbox來縮放視圖不可取。當(dāng)然非要用viewbox來處理也未嘗不可，只是感覺很愚蠢。手動改變數(shù)值來達(dá)到目的更快而已。這樣不管大象有多大，我們都能順利的塞到冰箱里。

以上是“html中如何使用SVG實(shí)現(xiàn)畫走勢圖”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：html中如何使用SVG實(shí)現(xiàn)畫走勢圖
文章源于：http://vcdvsql.cn/article14/ggpjde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、微信公眾號、外貿(mào)建站、網(wǎng)頁設(shè)計(jì)公司、域名注冊、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)