SVG实现折线图，并添加动态效果
这是上次SVG实现地图图谱后，通过纯SVG技术实现的折线图效果，下⾯是动态效果。<p>
SVG折线图.gif
整个效果都是基于SVG实现的，可以不使⽤Echat等图表插件的情况下，产⽣不错的效果，可以实现简单的展⽰功能。这个是项⽬中的简化版本，具体参数可以通过调整计算得到不错的效果。<p>
下⾯是代码，源码⾮常简单。具体API会在github上解释。
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 530px;
height: 400px;
border: 1px solid #96caf6;
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
<script>
(function (exports) {
var doc=document;
var idExpr=/^#([\w-]*)$/;
var classExpr=/^.([\w-]+)$/;
var ifHasClassList='classList' in document;
var $d={
$: function (slector, context) {
var result;
st(selector)){
result=this.id(selector);
if(result) return result;
}else st(selector)){
result=this.className(selector,context);
if(result) return result
}else{
result=context.querySelectorAll(selector);
return result
}
},
id: function (slector) {
ElementById(slector);
},
className: function (slector, context) {
var context=context||doc;
ElementsByClassName(slector); },
tagName: function (slector, context) {
var context=context||doc;
ElementsByTagName(slector); },
node: function (selector, context) {
var context=doc||context;
var ateElement(selector);
context.appendChild(node);
return node;
},
addStyle: function (obj,styleName,styleValue) {
if(arguments.length===3){
obj.style[styleName]=styleValue;
}else if(arguments.length===2){
for(var key in styleName){
obj.style[key]=styleName[key];
}
}
},
getStyle: function (obj,styleName) {
ComputedStyle){
return getComputedStyle(obj,null)[styleName] }else if(obj.currentStyle){
return obj.currentStyle[styleName];
}
},
removeChild: function (selector, context) {
},
},
addAttr: function (obj, attrs) {
for(var key in attrs){
obj.setAttribute(key,attrs[key]);
}
},
removeAttr:function(obj,attrs){
for(var i=0;i<attrs.length;i++){
}
},
getAttribute: function (obj, attrs) {
var attrArray=[];
for(var i=0;i<attrs.length;i++){
attrArray.Attribute(attrs[i]))
}
return attrArray;
},
eventHandle: function (obj,type,handle) {
if(obj.addEventListener){
obj.addEventListener(type,handle,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+eventType,handle)
}
},
each: function (target, handle,arg) {
for(var i=0;i<target.length;i++){
handle.apply(target[i],arg);
}
},
tweenAnimateR: function (obj, type1,type2,start, end, dur) { clearInterval(obj.timer);
var changeValue=end-start;
var t=0;
var newValue;
obj.timer=setInterval(function () {
t+=5;
newValue=Tween[type1][type2](t,start,changeValue,dur); und(t)<dur){
$d.addAttr(obj,{
'r':newValue
})
}else und(t)==dur){
clearInterval(obj.timer);
}
},30)
}
};
var Tween = {
Linear: function (t, b, c, d) { return c * t / d + b; },
Quad: {//Quadratic⼆次⽅效果
easeIn: function (t, b, c, d) {
return c * (t /= d) * t + b;
},
easeOut: function (t, b, c, d) {
return -c * (t /= d) * (t - 2) + b;
},
easeInOut: function (t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t + b;
return -c / 2 * ((--t) * (t - 2) - 1) + b;
}
},
Cubic: {//Cubic ⽴⽅效果
easeIn: function (t, b, c, d) {
return c * (t /= d) * t * t + b;
},
easeOut: function (t, b, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + b;
},
easeInOut: function (t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
return c / 2 * ((t -= 2) * t * t + 2) + b;
}
},
Quart: {// Quartic 四次⽅效果
easeIn: function (t, b, c, d) {
return c * (t /= d) * t * t * t + b;
},
easeOut: function (t, b, c, d) {
return -c * ((t = t / d - 1) * t * t * t - 1) + b;
},
easeInOut: function (t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
}
},
Quint: {// Quintic五次⽅效果
easeIn: function (t, b, c, d) {
return c * (t /= d) * t * t * t * t + b;
},
easeOut: function (t, b, c, d) {
return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
},
easeInOut: function (t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
}
},
Sine: {//Sinusoidal 正弦效果
easeIn: function (t, b, c, d) {
return -c * s(t / d * (Math.PI / 2)) + c + b;
},
easeOut: function (t, b, c, d) {
return c * Math.sin(t / d * (Math.PI / 2)) + b;
},
easeInOut: function (t, b, c, d) {
return -c / 2 * (s(Math.PI * t / d) - 1) + b;
}
},
Expo: { // Exponential指数
easeIn: function (t, b, c, d) {
return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
},
easeOut: function (t, b, c, d) {
svg图return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
},
easeInOut: function (t, b, c, d) {
if (t == 0) return b;
if (t == d) return b + c;
if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
}
},
Circ: { //circle循环
easeIn: function (t, b, c, d) {
return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
},
easeOut: function (t, b, c, d) {
return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
},
easeInOut: function (t, b, c, d) {
if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
}
},
Elastic: {// Elastic 弹性
easeIn: function (t, b, c, d, a, p) {
if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3;
if (!a || a < Math.abs(c)) { a = c; var s = p / 4; }
else var s = p / (2 * Math.PI) * Math.asin(c / a);
return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b; },
easeOut: function (t, b, c, d, a, p) {
if (t == 0) return b; if ((t /= d) == 1) return b + c; if (!p) p = d * .3;
if (!a || a < Math.abs(c)) { a = c; var s = p / 4; }
if (!a || a < Math.abs(c)) { a = c; var s = p / 4; }
else var s = p / (2 * Math.PI) * Math.asin(c / a);
return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
},
easeInOut: function (t, b, c, d, a, p) {
if (t == 0) return b; if ((t /= d / 2) == 2) return b + c; if (!p) p = d * (.3 * 1.5);
if (!a || a < Math.abs(c)) { a = c; var s = p / 4; }
else var s = p / (2 * Math.PI) * Math.asin(c / a);
if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b; return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
}
},
Back: {//后退
easeIn: function (t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c * (t /= d) * t * ((s + 1) * t - s) + b;
},
easeOut: function (t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
},
easeInOut: function (t, b, c, d, s) {
if (s == undefined) s = 1.70158;
if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
}
},
Bounce: {// Bounce反弹
easeIn: function (t, b, c, d) {
return c - Tween.Bounce.easeOut(d - t, 0, c, d) + b;
},
easeOut: function (t, b, c, d) {
if ((t /= d) < (1 / 2.75)) {
return c * (7.5625 * t * t) + b;
} else if (t < (2 / 2.75)) {
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
} else if (t < (2.5 / 2.75)) {
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
} else {
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
}
},
easeInOut: function (t, b, c, d) {
if (t < d / 2) return Tween.Bounce.easeIn(t * 2, 0, c, d) * .5 + b;
else return Tween.Bounce.easeOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
}
}
};
exports.$d=$d;
exports.Tween=Tween;
})(window)
var SVG= function () {
}
SVG.prototype={
svgNS:'/2000/svg',
createTag: function (tag, attrs) {
var ateElementNS(this.svgNS,tag);
for(var key in attrs){
tag.setAttribute(key,attrs[key]);
}
return tag;
},
createG: function (gs, objTarget) {
for(var i=0;i<gs.length;i++){
var ateTag('g',gs[i]);
objTarget.appendChild(node);
}
},
createCircle: function (circles,objTarget) {
for(var i=0;i<circles.length;i++){
var ateTag("circle",circles[i]);
objTarget.appendChild(node);
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论