JavaScript uses smipleChart to implement simple charts_javascript skills-JS Tutorial-php.cn

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,{ &

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

JavaScript uses smipleChart to implement simple charts_javascript skills