这是上次SVG实现地图图谱后，通过纯SVG技术实现的折线图效果，下面是动态效果。<p>
SVG折线图.gif
整个效果都是基于SVG实现的，可以不使用Echat等图表插件的情况下，产生不错的效果，可以实现简单的展示功能。这个是项目中的简化版本，具体参数可以通过调整计算得到不错的效果。<p>
下面是代码，源码非常简单。具体API会在github上解释。
<!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;
if(idExpr.test(selector)){
result=this.id(selector);
if(result) return result;
}else if(classExpr.test(selector)){
result=this.className(selector,context);
if(result) return result
}else{
result=context.querySelectorAll(selector);
return result
}
},
id: function (slector) {
return document.getElementById(slector);
},
className: function (slector, context) {
var context=context||doc;
return context.getElementsByClassName(slector);
},
tagName: function (slector, context) {
var context=context||doc;
return context.getElementsByTagName(slector);
},
node: function (selector, context) {
var context=doc||context;
var node=document.createElement(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) {
if(window.getComputedStyle){
return getComputedStyle(obj,null)[styleName]
}else if(obj.currentStyle){
return obj.currentStyle[styleName];
}
},
removeChild: function (selector, context) {
context.removeChild(selector);
},
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++){
obj.removeAttribute[attrs[i]];
}
},
getAttribute: function (obj, attrs) {
var attrArray=[];
for(var i=0;i<attrs.length;i++){
attrArray.push(obj.getAttribute(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);
if(Math.round(t)<dur){
$d.addAttr(obj,{
'r':newValue
})
}else if(Math.round(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 * Math.cos(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 * (Math.cos(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) {
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; }
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:'http://www.w3.org/2000/svg',
createTag: function (tag, attrs) {
var tag=document.createElementNS(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 node=this.createTag('g',gs[i]);
objTarget.appendChild(node);
}
},
createCircle: function (circles,objTarget) {
for(var i=0;i<circles.length;i++){
var node=this.createTag("circle",circles[i]);
objTarget.appendChild(node);
}
},
createLine: function (lines, objTarget) {
for(var i=0;i<lines.length;i++){
var node=this.createTag("line",lines[i]);
objTarget.appendChild(node);
}
},
createText: function (texts, objTarget) {
for(var i=0;i<texts.length;i++){
var node=this.createTag("text",texts[i]);
var text=$d.getAttribute(node,['tittle']);
node.innerHTML=text;
objTarget.appendChild(node);
}
},
createRect: function (rects,objTarget) {
for(var i=0;i<rects.length;i++){
var node=this.createTag("react",rects[i]);
objTarget.appendChild(node);
}
},
setAttribute: function (obj, attrs) {
for(var key in attrs){
obj.setAttribute(key,attrs[key]);
}
},
createPolyLine: function (polyLines, objTarget) {
for(var i=0;i<polyLines.length;i++){
var node=this.createTag('polyline',polyLines[i]);
objTarget.appendChild(node);
}
}
};
var svg=new SVG();
var svgObject=svg.createTag('svg',{
'xmls':this.svgNS,
'width':'100%',
'height':'100%'
});
var div=$d.className('div1')[0];
div.appendChild(svgObject);
/*生成横纵坐标*/
svg.createLine([{
'x1':'10px',
'x2':'500px',
'y1':'380px',
'y2':'380px',
'stroke':'black',
'stroke-width':'2'
},{
x1:'10px',
x2:'10px',
y1:'10px',
y2:'380px',
stroke:'black',
'stroke-width':'2'
}],svgObject);
/*生成网格*/
var createGrid= function (x,y,lengthX,lengthY,lengthTotalX,lengthTotalY,numX, numY) {
var gridGroup=[];
var x2=x+lengthTotalX;
var y2=y+lengthTotalY;
for(var i=0;i<numX;i++){
var grid={};
grid.x1=x+'px';
grid.x2=x2+'px';
grid.y1=y+lengthX*(i+1)+'px';
grid.y2=y+lengthX*(i+1)+'px';
grid.stroke='#ccc';
gridGroup.push(grid)
}
for(var j=0;j<numY;j++){
var grid={};
grid.x2=x+lengthY*(j+1)+'px';
grid.x1=x+lengthY*(j+1)+'px';
grid.y1=y+'px';
grid.y2=y2+'px';
grid.stroke='#ccc';
gridGroup.push(grid)
}
return gridGroup;
};
var grid=createGrid(10,10,30,30,450,370,12,14);
svg.createLine(grid,svgObject);
svg.createPolyLine([{
points:"10,310 30,240 70,270 160,180 240,240 340,360",
'fill':'none',
'stroke':'navy',
'stroke-width':'2'
}],svgObject);
svg.createCircle([{
cx:'10',
cy:'310',
r:'5',
'fill':'rgb(159,218,191)',
'stroke-width':'1',
'tittle':'class1'
}, {
cx:'30',
cy:'240',
r:'5',
'fill':'rgb(159,218,191)',
'stroke-width':'1',
'tittle':'class2'
}, {
cx:'70',
cy:'270',
r:'5',
'fill':'rgb(159,218,191)',
'stroke-width':'1',
'tittle':'class3'
}, {
cx:'160',
cy:'180',
r:'5',
'fill':'rgb(159,218,191)',
'stroke-width':'1',
'tittle':'class4'
}, {
cx:'240',
cy:'240',
r:'5',
'fill':'rgb(159,218,191)',
'stroke-width':'1',
'tittle':'class5'
},{
cx:'340',
cy:'360',
r:'5',
'fill':'rgb(159,218,191)',
'stroke-width':'1',
'tittle':'class6'
}],svgObject);
svg.createText([{
x:'30',
y:'310',
fill:'blue',
'font-size':'14',
'text-anchor':'middle',
'tittle':'333',
'id':'class1'
},{
x:'50',
y:'240',
fill:'blue',
'font-size':'14',
'text-anchor':'middle',
'tittle':'123',
'id':'class2'
},{
x:'90',
y:'280',
fill:'blue',
'font-size':'14',
'text-anchor':'middle',
'tittle':'3245',
'id':'class3'
},{
x:'180',
y:'180',
fill:'blue',
'font-size':'14',
'text-anchor':'middle',
'tittle':'555',
'id':'class4'
},{
x:'260',
y:'240',
fill:'blue',
'font-size':'14',
'text-anchor':'middle',
'tittle':'444',
'id':'class5'
},{
x:'355',
y:'360',
fill:'blue',
'font-size':'14',
'text-anchor':'middle',
'tittle':'777',
'id':'class6'
}],svgObject);
/*text display:none*/
var textNone=function(){
var text=$d.tagName("text");
for(var i=0;i<text.length;i++){
$d.addStyle(text[i],'display','none');
}
};
textNone();
var circleAnimation=function(){
var circle=$d.tagName("circle");
for(var i=0;i<circle.length;i++){
console.log(circle[i]);
$d.eventHandle(circle[i],'mouseenter', function () {
$d.tweenAnimateR(this,'Elastic','easeOut',5,10,150);
var textIdName=$d.getAttribute(this,['tittle'])[0];
var text=$d.id(textIdName);
$d.addStyle(text, 'display','block')
})
$d.eventHandle(circle[i],'mouseleave', function () {
$d.tweenAnimateR(this,'Elastic','easeOut',10,5,150);
var textIdName=$d.getAttribute(this,['tittle'])[0];
var text=$d.id(textIdName);
$d.addStyle(text, 'display','none')
})
}
};
circleAnimation();
</script>
</html>
