SVG を使用して HTML でトレンド チャートを描画する方法を説明した記事 (コードを共有)

前回の記事「JavaScript の Reflect 組み込みオブジェクトの簡単な分析 (詳細なコードの説明)」では、JS の Reflect 組み込みオブジェクトについて紹介しました。以下の記事ではSVGを使ってトレンドチャートを描く方法を紹介していますので、困っている方は参考にしていただければ幸いです。

まず、viewBox の目的について説明します。つまり、ビューを比例的に拡大縮小することです。グラフィカルに表現

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

##plus

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>

もちろん、

preserveAspectRatio 属性と一緒に使用することもできます。その値は です。 xMin、xMid、xMax、yMin、yMid、yMax、meet (アスペクト比のスケーリングを維持)、slice (ビューポートを満たすために小さい方の比率の方向にズームする間、アスペクト比を維持)はスケーリングするときの開始と終了の基準点です。例: preserveAspectRatio="xMidyMin meets"x, y

の最小値に基づいて比例スケーリングを維持することです。上記はスケーリングを試みることに関するものです。次に何を言うか：ゾウを冷蔵庫に入れる方法、何ステップかかりますか？

まず、私が何をしたいのか説明します。データに基づいて市場動向チャートを描画します。曲線を描くだけなので、

canvas を使用する代わりに、SVG の polyline を使用する方が比較的簡単です。

最終結果は次のようになります:

取得されたデータは次のようになります:

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 座標の最大値は です。 26, x 座標の最大値は 75 です。 次に問題は次のとおりです:

1)

y

座標配列のみがあり、#xx 座標はありません。曲線を描くにはどうすればよいですか?キャンバスは埋まっており、x、y の座標はデフォルトで 0、0 であるため、これを考慮する必要はありません。 x 座標配列は 0, 1, 2, 3...75、y 座標配列は 0,1,2,3...26# の長さ##y 座標配列

75

グループの場合、デフォルトでキャンバスが埋められます。明らかに、与えられたデータは 75 グループ よりも大きいです。 2) y座標配列の長さがキャンバスの単位長さを超えています

xx

座標の値を取得するにはどうすればよいですか?ちょうど 75 グループの場合、#xx は 1 まで一度累積され、75 グループより大きい場合は、x 座標の累積値 x=75 / BTC.lengthの場合 このとき、#x と

y

の座標は既知であるため、描画してみましょう。計算により、次の結果が得られます。<pre class="brush:php;toolbar:false">&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;75&quot; height=&quot;26&quot;&gt; &lt;polyline points=&quot;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 &quot; style=&quot;stroke: rgb(189, 201, 255); stroke-width: 1; fill: none;&quot; &gt;&lt;/polyline&gt; &lt;/svg&gt;</pre>明らかに、得られた結果は期待したものではなく、空白でデータが表示されません。なぜ？ 3)

y

座標が大きすぎて、シーンの最大範囲を超えています。では、象を冷蔵庫に入れるにはどうすればよいでしょうか?

y

の比率をスケールし、座標を垂直上にオフセットして、象の耳が漏れないように冷蔵庫に戻します。全体を 10 倍に拡大すると、次の結果が得られます<p><svg xmlns="http://www.w3.org/2000/svg" width="750" height="260" style="border:1px solid #ddd"><polyline points="0 214.26794021305201 9.036144578313253 211.39805664895835 18.072289156626507 175.54240413994336 27.10843373493976 182.44157560075934 36.144578313253014 177.91846734014132 45.18072289156627 154.02185581766665 54.216867469879524 146.1922981640012 63.25301204819278 140.40959013460323 72.28915662650603 135.48570012937253 81.32530120481928 175.9074018002149 90.36144578313254 197.67128189600598 99.3975903614458 224.60954058740907 108.43373493975905 190.97250130749504 117.4698795180723 188.56781083982418 126.50602409638556 188.1097745602683 135.54216867469881 189.17614027361012 144.57831325301206 194.55806655839666 153.6144578313253 176.68749483883428 162.65060240963854 170.38949599493472 171.68674698795178 197.134520630901 180.72289156626502 216.75851248314024 189.75903614457826 221.35318891243918 198.7951807228915 216.02136034572888 207.83132530120474 204.52751245561396 216.86746987951798 241.37796250928983 225.90361445783122 260 234.93975903614447 190.76495361832048 243.9759036144577 176.76621982438215 253.01204819277095 187.64458146384422 262.0481927710842 192.01739657023217 271.08433734939746 184.9393046877145 280.1204819277107 176.415535797847 289.156626506024 166.7395193922204 298.19277108433727 180.35178507528377 307.22891566265054 162.2307247653388 316.2650602409638 170.79743455641432 325.3012048192771 210.13845688017844 334.33734939759034 190.67191499903618 343.3734939759036 176.15073357372927 352.4096385542169 202.83850367474977 361.44578313253015 187.93085413856664 370.4819277108434 172.57232513969586 379.5180722891567 167.81304192243041 388.55421686746996 181.546973492251 397.59036144578323 188.18849954581745 406.6265060240965 172.4864433372785 415.66265060240977 195.40972776569697 424.69879518072304 195.04473010542543 433.7349397590363 156.16890087808667 442.7710843373496 45.71774615321155 451.80722891566285 19.89595089322523 460.8433734939761 30.144512648298004 469.8795180722894 66.8732968152167 478.91566265060266 65.67810839824949 487.9518072289159 23.087891216383706 496.9879518072292 33.808802884747486 506.02409638554246 0 515.0602409638557 3.8432106581524534 524.096385542169 5.832805747474195 533.1325301204822 26.365713341958255 542.1686746987955 93.5395964656338 551.2048192771088 127.56310385642279 560.240963855422 147.58787745327342 569.2771084337353 137.31784524759857 578.3132530120486 84.69377081670281 587.3493975903618 137.02441575600795 596.3855421686751 157.93663464449872 605.4216867469884 165.25805830053076 614.4578313253016 186.39929532880075 623.4939759036149 204.39868975198854 632.5301204819282 212.72206776954968 641.5662650602414 215.6849899529302 650.6024096385547 212.8222632057035 659.638554216868 189.12604255553384 668.6746987951813 198.12931817556185 677.7108433734945 171.78507528420826 686.7469879518078 160.42005009771742 695.7831325301211 124.00616587299405 704.8192771084343 182.11236202482888 713.8554216867476 188.12408819400474 722.8915662650609 221.12417077265997 731.9277108433741 230.30636681438963 740.9638554216874 249.65839962564294 " style="stroke:#bdc9ff;stroke-width:1;fill:none"></polyline></svg><br></p> <p>那么这个数据是如何计算出来的呢？</p><pre class="brush:php;toolbar:false">// 数据 //x坐标数组 let s = 750 / BTC.length; //x起始坐标数组 let x = 0; //y坐标最小值 let min = BTC.reduce((x, y) =&gt; (x &gt; y ? y : x)); //y坐标最大值 let max = BTC.reduce((x, y) =&gt; (x &gt; y ? x : y)); //缩放比例 max-min为曲线幅度 let rodio = 260 / (max - min); // 此处的points 的值就是svg 都polyline 的points 属性的值 let points = &quot;&quot;; //统一处理y坐标，垂直向上偏移，也即是y坐标最高点归零 BTC.forEach((y) =&gt; { points += x + &quot; &quot; + (y - min) * rodio + &quot; &quot;; x += s; });</pre><p>最后还原缩放比例，得到最终想要的样子。</p> <p>那么这个和<code>viewbox有什么关联呢。

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

推荐学习：SVG视频教程、Html视频教程

以上がSVG を使用して HTML でトレンド チャートを描画する方法を説明した記事 (コードを共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。