JavaScript uses smipleChart to implement simple charts_javascript skills

Support linear chart, area chart, bar chart, pie chart

Support multiple browsers

Used svg vml

Copy code The code is as follows: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> http://www.w3.org/1999/xhtml "> smipleChart .cc{ height:450px; width:800px; border:1px solid #999; position:relative; margin:20px; } (function(doc,undefined){ var win = this, uuuid = -1, hasSVG = win.SVGAngle || doc.implementation.hasFeature(" http://www.w3.org/TR/SVG11/feature#BasicStructure ", "1.1"), isIE = /msie/i.test(navigator.userAgent) && !win.opera, path = hasSVG?'d':'path', seal = hasSVG?'z':'e', math = Math, mathRound = math.round, mathFloor = math.floor, mathCeil = math.ceil, mathMax = math.max, mathMin = math.min, mathAbs = math.abs, mathCos = math.cos, mathSin = math.sin, M = 'M', L = 'L'; win.$$ = function(Id){ return document.getElementById(Id); }; win.extend = function(){ var target = arguments[0] || {}, i = 1, length = arguments.length, deep = true, options; if ( typeof target === "boolean" ) { deep = target; target = arguments[1] || {}; i = 2; } if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]") target = {}; for(;i if ( (options = arguments[ i ]) != null ) for(var name in options){ var src = target[ name ], copy = options[ name ]; if ( target === copy ) continue; if ( deep && copy && typeof copy === "object" && !copy.nodeType ){ target[ name ] = arguments.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy ); } else if(copy !== undefined) target[ name ] = copy; } } return target; }; win.each = function ( object, callback, args ) { var name, i = 0, length = object.length; if ( args ) { args = Array.prototype.slice.call(arguments).slice(2); if ( length === undefined ) { for ( name in object ) if ( callback.apply( object[ name ],[name,object[ name ]].concat(args) ) === false ) break; } else for ( ; i if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) // break; } else { if ( length === undefined ) { for ( name in object ) if ( callback.call( object[ name ], name, object[ name ] ) === false ) break; } else for ( var value = object[0]; i } return object; }; win.contains = function(p,c){ if(!p||!c)return false; if(p===c)return true; return isIE ? p.contains(c) : p.compareDocumentPosition(c)==20 ? true : false; }; //--------------------------------------------------------------- function processPoint( x ){ return isIE ? ~~x.toFixed(0) : ~~x.toFixed(0) 0.5; }; function calTextLen(txt, cssStr){ var span = doc.createElement('span'); if(cssStr){ typeof cssStr === 'string' ? span.style.cssText = cssStr : extend(span.style,cssStr); }else{ extend(span.style,{ fontSiz : '12px', fontFamily : '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif' }); } span.innerHTML = txt || ''; span.style.visibility = 'hidden'; doc.body.appendChild(span); var width = span.offsetWidth, height = span.offsetHeight; doc.body.removeChild(span); return {w:width,h:height}; }; function angle(r,center,o,jingdu){ var hudu = Math.PI*2*(o/360), x = center[0] r*Math.sin(hudu), y = center[1] -r*Math.cos(hudu); return [x.toFixed(jingdu||0),y.toFixed(jingdu||0)]; } function xx(a,b,lineNum){ var t = 1000, stf = ((b*t-a*t)/lineNum)/t, arr = [1,2,2.5,5,10], c = 1, v; // 分割线的基数是 [1,2,2.5,5,10] 这个步骤是查找 间隔 属于哪个范围 if(stf while( stf c = c*10; arr[0]=arr[0]/c; } each([1,2,2.5,5,10],function(i,o){ arr[i]= o/c; }); }else if(stf>arr[4]){ while( stf>arr[4] ){ c = c*10; arr[4] = arr[4]*c; } each([1,2,2.5,5,10],function(i,o){ arr[i]= o*c; }); } //上面找到间隔后 找到间隔中最接近的一个 each(arr,function(i,o){ if(stf v = o; return false; } }); var bj = (mathAbs(a)*t)/(v*t), ba = 0, isZ = bj!==parseInt(bj); isZ &&a>0 ? ba = -a%v*t : ba = (mathAbs(a)%v-v)*t; a = (a*t ba)/t; b = (b*t (b%v===0?0:(v-b%v))*t)/t; //看看还剩几条线没有画 var num = Math.max(0,lineNum - Math.round((b-a)/v)); if(a>=0){ //坐标比较整数化 if(a!=0&&num!=0&&a!==0){ while(a!=0&&num!=0){ a = (a*t-v*t)/t; num--; if((a*t-v*num*t)/10000>0&&a===0) break; } } if(num!=0){ while(num!==0){ b = (b*t v*t)/t num--; } } }else{ //坐标比较整数化 if(b while(b!=0&&num!=0&&b!==0){ b = (b*t v*t)/t; num--; if((b*t v*num*t)/t break; } } if(num!=0){ while(num!==0){ a = (a*t-v*t)/t num--; } } } return {min:a,max:b,stf:v}; } //--------------------------------------------------------------------------------------------------------------- //对svg vml元素的一些创建 修改属性 样式 删除 == 一些的操作 win.vector = function(){}; vector.prototype = { $c : function(graphic,nodeName){ this.element = this[0] = doc.createElementNS('http://www.w3.org/2000/svg', nodeName); this.graphic = graphic; return this; }, attr: function(hash,val){ var elem = this.element, key, value; if(typeof hash === 'string'){ if(val === undefined){ return elem.getAttribute(hash); }else{ elem.setAttribute(hash, val); return this; } } else { for(key in hash){ value = hash[key]; if(key === path){ value && value.join &&(value = value.join(' ')); /(NaN| |^$)/.test(value) &&(value = 'M 0 0'); } elem.setAttribute(key, value) } } return this; }, css: function(hash){ for(var key in hash){ isIE && key == "opacity" ? this[0].style['filter'] = "alpha(opacity=" hash[key] * 100 ")" : this[0].style[key] = hash[key]; } return this; }, on: function(eventName, handler){ var self = this; /*this.element.addEventListener(eventName,function(){ handler.call(self) },false);*/ this.element['on' eventName] = function(e){ e = e || win.event; handler.call(self,e); } return this; }, appendTo: function(parent){ if(parent){ parent.element ? parent.element.appendChild(this.element) : parent.appendChild(this.element) } else { this.graphic.container.appendChild(this.element); } return this; }, addText: function(str){ var elem = this.element; if(elem.nodeName === 'text'){ elem.appendChild(doc.createTextNode(str '')); } return this; }, setOpacity : function(v){ this.attr('fill-opacity',v); return this; }, setSize : function(v){ this[0].nodeName==='circle' ? this.attr('r',4 (v===0?0:2)) : this.attr({'stroke-width':v}); return this; }, toFront: function() { this[0].parentNode.appendChild(this[0]); return this; }, show: function(){ this[0].style.display = 'block'; return this; }, hide: function(){ this[0].style.display = 'none'; return this; }, destroy : function(){ //销毁节点...................... var node = this[0] || this; node.onmouseover = node.onmouseout = node.onclick = null; node.parentNode &&node.parentNode.removeChild(node); return this; } }; //------------------------------------------------ -------------------------------------------------- ------------- //------------------------------------------------ -------------------------------------------------- - //If it is vml, modify some of the methods if(!hasSVG){ //-------------Create vml environment----------------- doc.createStyleSheet().addRule(".vml", "behavior:url(#default#VML);display:inline-block;position:absolute;left:0px;top:0px"); !doc.namespaces.vml && ! "v1"; doc.namespaces.add("vml", "urn:schemas-microsoft-com:vml");

//-------------Modify some methods----------------- extend(vector.prototype,{ $c : function(graphic,nodeName){ var name = nodeName || 'shape'; This.element= this[0] = (name === 'div' || name === 'span') ? doc.createElement(name) : doc.createElement(' '); This.graphic = graphic; Return this; }, /*on : function(eventName, handler){ var self = this; This.element.attachEvent("on" eventName,function(){ handler.call(self); }); Return this; },*/ AddText: function(txt){ This[0].innerHTML = txt || ''; Return this; }, setSize : function(v){ This[0].strokeWeight = v; Return this; }, setOpacity : function(v){ This.opacity.opacity=v; Return this; } }); } //------------------------------------------------ -------------------------------------------------- - //Drawing class //------------------------------------------------ ------------ win.smipleChart = function(){ This.init.apply(this,arguments); }; smipleChart.list = []; smipleChart.timer = null; smipleChart.lazyLoad = function(id){ id = id || '0' smipleChart.list[id] &&smipleChart.list[id].loadMe(); }; smipleChart.prototype = { options : { Charts: { paddingRight: 20, radius : 200, Style : { fontFamily : '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', fontSize : '12px', background : '#FFFFFF' } }, title: { text : '', y : 10, Style: { fontFamily:'Verdana,Arial,Helvetica,sans-serif', fontSize:'16px', fontWeight:'bold' } }, subTitle: { text : '', y : 30, Style : { fontFamily:'Verdana,Arial,Helvetica,sans-serif', fontSize:'12px', Color: '#111' } }, yUnit: { text : '', Style: { fontFamily:'Verdana,Arial,Helvetica,sans-serif', fontSize:'12px', Color: '#111' }, LineNum:10 } }, init : function(container,options){ clearTimeout(smipleChart.timer) var self = this; This.width = container.offsetWidth; This.height = container.offsetHeight; This.currList = {}; This.uuuid = uuuid; This.timer = null; //The collection form of the main drawing group //{id : {dom:xx,show:true}} This.mainGroup = {}; // Used when segmenting to know which ones are hidden because redrawing is involved This.hideList = {}; //When drawing pictures inside svg, there must be an svg tag. For vml, div is used This.container = hasSVG ? new vector().$c(1,'svg') .attr({ xmlns : 'http://www.w3.org/2000/svg', Version: '1.1', width: this.width, Height : this.height }) .css({fontSize : '12px'}) .appendTo(container) : new vector().$c(1,'div') .css({ fontSize : '12px', : this.width 'px', Height : this.height 'px' }) .appendTo(container); This.loading = container.appendChild(doc.createElement('img')); This.loading.setAttribute('src','http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_loading.gif'); This.loading.style.position = 'absolute'; This.loading.style.top = container.offsetHeight/2- this.loading.offsetHeight/2 'px'; This.loading.style.left = container.offsetWidth/2- this.loading.offsetWidth/2 'px';

}); var xPices = drawAreaWidth / lineNum; for(var i=0;i Self.baseDraw.path(self,{ Border : 1, BorderColor: '#C0C0C0', isfill : false, Path : [ M, processPoint(startX (i * xPices)), processPoint(startY), L, processPoint(startX (i*xPices)), processPoint(startY - drawAreaHeight) ] }). appendTo(panel); Self.baseDraw.span(self,{ x: startX - calTextLen(min i*f '').w/2 i * xPices, y : startY, 'text-anchor':'left' }) .css({ fontFamily:'Verdana,Arial,Helvetica,sans-serif', fontSize:'12px' }) .addText(min i*f '') .appendTo(panel); } } //------------------------------------------------ -------------------------------------------------- --- //Because the starting point is likely not to start from 0, the value up to 0 must be added to the starting point var jianju =0; If(min>0)jianju = min; If(max StartX = opts.charts.panel==='x' ? startX :startX-xPices*(min/f); StartY = opts.charts.panel==='x' ? startY yPices*(min/f) : startY; Opts.draw = { StartX : startX, // X-axis starting point StartY : startY, // Y-axis starting point xPices : xPices, // The width of each part of the X axis yPices : yPices, // The width of each part of the Y axis Offset : offset, // X single-point center point position offset jianjuY : jianju*yPices/f, jianjuX : jianju*xPices/f, Feed : f // How many copies are there on the Y axis } Return this; }, createTooltip: function(){ //A group This.tipC = this.group('tip') .css({zIndex: 200,height:'20px',width:'20px',position:'absolute'}) .appendTo() .hide() //Draw a frame baseDraw This.tipBox = this.baseDraw.rect(this,{arc:0.22,fill:'#fff',border:2,borderColor:'#606060'}) .appendTo(this.tipC) //Because the g in svg can be positioned directly, but the group rendering in vml is very slow, so I changed the div, so the parent here is different var p = isIE ?this.tipBox :this.tipC; This.tipTxtContainer = this.baseDraw.text(this,{fill:'#000000',x:5,y:19,'text-anchor':'left'}) .css({ fontFamily:'Verdana,Arial,Helvetica,sans-serif', fontSize:'12px', background: '#FFF' }) .appendTo(p); This.tipText = doc.createTextNode(''); This.tipTxtContainer[0].appendChild(this.tipText); Return this; }, showTooltip: function(obj, x, y,data){ /*var txt = obj.name ':' data, size = calTextLen(txt,this.tipTxtContainer[0].style.cssText), pos = {x : x - (size.w 5 * 2)/2 ,y : y - 32}; This.tipC .toFront() .show(); if(hasSVG){ This.tipC.attr({transform:'translate(' pos.x ',' pos.y ')'}); This.tipBox .attr({width : size.w 5 * 2,height : size.h 5 * 2,stroke : obj.color||'#606060'}); }else{ This.tipC.css({left:pos.x,top:pos.y}); This.tipBox .css({width:size.w 5 * 2,height : size.h 5 * 2}) This.tipBox[0].strokeColor = obj.color||'#000'; } This.tipText.nodeValue = txt || '';*/ ClearTimeout(this.timer); var txt = obj.name ':' data, self = this, size = calTextLen(txt,this.tipTxtContainer[0].style.cssText), pos = {x : x - (size.w 5 * 2)/2 ,y : y - 32}; if(hasSVG){ self.tipBox .attr({width : size.w 5 * 2,height : size.h 5 * 2,stroke : obj.color||'#606060'}); }else{ self.tipBox .css({width:size.w 5 * 2,height : size.h 5 * 2}) Self.tipBox[0].strokeColor = obj.color||'#000'; } This.tipText.nodeValue = txt || ''; If(this.tipC[0].style.display === 'none'){ HasSVG ? self.tipC.attr({transform:'translate(' pos.x ',' pos.y ')',pos:pos.x '-' pos.y}) : self.tipC.attr({pos:pos.x '-' pos.y}).css({left:pos.x,top:pos.y}); this.tipC .toFront() .show(); }else{ var move = function(t,b,c,d){ return c*(t/=d)*t b; }, t = 0, b = self.tipC.attr('pos').split('-'), c = [pos.x,pos.y], d = 5; this.timer = setInterval(function(){ if(t t ; var x = move(t,~~b[0],(~~c[0])-(~~b[0]),d), y = move(t,~~b[1],(~~c[1])-(~~b[1]),d); hasSVG ? self.tipC.attr({transform:'translate(' x ',' y ')',pos:x '-' y}) : self.tipC.attr({pos:x '-' y}).css({left:x,top:y}); }else{ clearTimeout(self.timer); } },1); }; }, hideTooltip: function(){ this.tipC.hide(); }, drawLegend : function(type,redraw){ var self = this, opts = this.opts, isLine = opts.charts.type === 'line', //颜色块的大小 t_width = 20, t_height = 20, //块之间的距离 t_space = 5, datas = opts.chartData, len = datas.length, css = opts.legend.style, //最大长度 如果是纵着的 需要最大的长度 maxWidth = 10, maxHeight= 30, //这个东西的位置 orig_pos = opts.legend.pos?opts.legend.pos:[2,2], //显示隐藏组的函数 handle = function(i){ var g = self.mainGroup['chart' i], issegment = opts.charts.type==='segment'; if(g.show){ g.chart.hide(); g.show = false; hasSVG ? this.attr({fill:'#ccc'}) : this[0].style.color = '#ccc'; //如果是分段图 是会涉及到重画的 if(issegment){ self.hideList[i] =''; var mainGroup = self.mainGroup; for(var name in mainGroup){ var parent = mainGroup[name].chart, nodes = parent[0].childNodes, len = nodes.length; //销毁图上面画的东西 for(var i = len-1;i>=0;i--){ vector.prototype.destroy.call(nodes[i]) } } //重画 self.drawSegment(); } }else{ g.chart.show(); g.show = true; hasSVG ? this.attr({fill:'#000'}) : this[0].style.color = '#000' if(issegment){ delete self.hideList[i]; var mainGroup = self.mainGroup; for(var name in mainGroup){ var parent = mainGroup[name].chart, nodes = parent[0].childNodes, len = nodes.length; for(var i = len-1;i>=0;i--){ vector.prototype.destroy.call(nodes[i]) } } self.drawSegment(); } } }, arr = []; type = type ||'lateral'; var legendPanel = self.group('Legend') .appendTo(); if(type==='lateral'){ //如果是横着的 var top = orig_pos[1] 5, th = hasSVG?0:3, left = orig_pos[0] 5; each(datas, function(i,d){ left = i===0 ? left : t_space left; //计算所有left的位置 //如果是线性图 按线性图的方式画图 if(isLine){ self.baseDraw.path(self,{ border : 1.5, borderColor : d.color, isfill : false, path : [ M, left.toFixed(0), (top 10).toFixed(0), L, (left 25).toFixed(0), (top 10).toFixed(0) ] }) .appendTo(legendPanel); self.baseDraw[d.dotType || 'circle'](self,{ x : left 12, y : top 10, r : 4, fillColor : d.color }) .appendTo(legendPanel); }else{ self.baseDraw.rect(self,{ arc : 0.1, fill : d.color, border : 1, borderColor : d.color, left : left, top : top, width : t_width 'px', height : t_height 'px' }) .appendTo(legendPanel) } left = left t_width 2 t_space; var w = calTextLen(d.name,css).w self.baseDraw.span(self,{ 'text-anchor':'left', x : left, y : top th }) .css(extend(css,{cursor:'pointer'})) .on('click',function(){ handle.call(this,i); }) .addText(d.name) .appendTo(legendPanel); left = left w; }); this.baseDraw.rect(this,{ arc : 0.1, fill : 'none', border : 1.5, borderColor : '#666666', width : left t_space- orig_pos[0], height : maxHeight, left : orig_pos[0], top : orig_pos[1] }) .appendTo(legendPanel); }else{ var top = orig_pos[1] 5, th = hasSVG?0:3, left = orig_pos[0] 5; each(datas, function(i,d){ top = i===0 ? top : t_space top; self.baseDraw.rect(self,{ arc : 0.1, fill : d.color, border : 1, borderColor : d.color, left : left, top : top, width : t_width 'px', height : t_height 'px' }) .appendTo(legendPanel); var h = calTextLen(d.name,css).h; self.baseDraw.span(self,{ 'text-anchor':'left', x : left t_width 2 t_space, y : top th }) .css(extend(css,{cursor:'pointer'})) .addText(d.name) .on('click',function(){ //如果是多层饼图 不行进隐藏 if(opts.charts.type==='pies')return; handle.call(this,i); }) .appendTo(legendPanel); top = top h t_space; maxWidth = Math.max(maxWidth,calTextLen(d.name,css).w); }); this.baseDraw.rect(this,{ &