html中如何使用SVG实现画走势图

这篇文章主要介绍html中如何使用SVG实现画走势图，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

成都创新互联-专业网站定制、快速模板网站建设、高性价比故城网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式故城网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖故城地区。费用合理售后完善，10多年实体公司更值得信赖。

先说说viewBox是干嘛的，就是按比例缩放视图的。用图形来表示

加上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来处理也未尝不可，只是感觉很愚蠢。手动改变数值来达到目的更快而已。这样不管大象有多大，我们都能顺利的塞到冰箱里。

以上是“html中如何使用SVG实现画走势图”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！