之前的文章《浅析javascript中Reflect内置对象（代码详解）》中，给大家介绍了解了JS中Reflect内置对象。下面本篇文章给大家介绍怎么使用SVG实现画走势图，有需要的朋友可以参考一下，希望对你们有所助。
先说说viewBox是干嘛的，就是按比例缩放视图的。用图形来表示
svg width=”300″ height=”200″ style=”border:1px solid #ddd”>
加上viewBox="0,0,80,70"
立即学习“前端免费学习笔记（深入）”；
当然还有可以配合preserveAspectRatio属性来使用，其取值有xMin，xMid，xMax，yMin，yMid，yMax，meet(保持纵横比缩放)，slice(保持纵横比同时比例小的方向放大填满 viewport) 就是缩放的时候是 起始和结束的依据点。如：preserveAspectRatio="xMidyMin meet"就是 以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坐标数组，没有x坐标，如何画曲线呢？ 这个可以不用考虑，因为是画满画布，x，y坐标默认为 0，0，所以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
这个时候x，y坐标都知道了，那么开画吧,通过计算我们得到如下
显然所得到的结果不是我们期待的，一片空白，看不到数据。为啥？
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实现画走势图（分享代码）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1550472.html
微信扫一扫 
支付宝扫一扫 
