JavaScript verwendet smipleChart, um einfache charts_javascript-Fähigkeiten zu implementieren-js-Tutorial-php.cn

Unterstützt lineare Diagramme, Flächendiagramme, Balkendiagramme und Kreisdiagramme

Unterstützt mehrere Browser

Svg-vml verwendet

Code kopieren Der Code lautet wie folgt: 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; } (Funktion(doc,undefiniert){ 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 = Mathe, 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" ) { tief = Ziel; Ziel = Argumente[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 Optionen){ var src = target[ name ], copy = options[ name ]; if (target === copy) weiter; if ( deep && copy && typeof copy === "object" && !copy.nodeType ){ target[ name ] = arguments.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy ); } sonst if(copy !== undefiniert) Ziel[Name] = kopieren; } } Rückkehrziel; }; win.each = Funktion ( Objekt, Rückruf, Argumente ) { Variablenname, i = 0, Länge = object.length; if ( args ) { args = Array.prototype.slice.call(arguments).slice(2); if ( length === undefiniert ) { für (Name im Objekt) if ( callback.apply( object[ name ],[name,object[ name ]].concat(args) ) === false ) brechen; } sonst für ( ; i if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) // brechen; } else { if ( length === undefiniert ) { für (Name im Objekt) if ( callback.call( object[ name ], name, object[ name ] ) === false ) brechen; } sonst for ( var value = object[0]; ich } Rückgabeobjekt; }; win.contains = function(p,c){ if(!p||!c)return false; if(p===c)return true; return isIE ? p.contains(c) : p.compareDocumentPosition(c)==20 ? wahr : falsch; }; //------------------------------------------------ --------------- Funktion processPoint( x ){ return isIE ? ~~x.toFixed(0) : ~~x.toFixed(0) 0.5; }; Funktion calTextLen(txt, cssStr){ var span = doc.createElement('span'); if(cssStr){ typeof cssStr === 'string' ? span.style.cssText = cssStr : extend(span.style,cssStr); }else{ verlängern(span.style,{ Schriftgröße : '12px', Schriftartenfamilie: „Lucida Grande“, „Lucida Sans Unicode“, Verdana, Arial, Helvetica, serifenlos“ }); } span.innerHTML = txt || ''; span.style.visibility = 'versteckt'; doc.body.appendChild(span); var width = span.offsetWidth, height = span.offsetHeight; doc.body.removeChild(span); return {w:width,h:height}; }; Funktion 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)]; } Funktion 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; } every([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; } every([1,2,2.5,5,10],function(i,o){ arr[i]= o*c; }); } //上面找到间隔后 找到间隔中最接近的一个 every(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) Pause; } } 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 brechen; } } 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 = Grafik; gib dies zurück; }, attr: function(hash,val){ var elem = this.element, Schlüssel, Wert; if(typeof hash === 'string'){ if(val === undefiniert){ return elem.getAttribute(hash); }else{ elem.setAttribute(hash, val); gib dies zurück; } } sonst { for(Hash eingeben){ value = hash[key]; if(key === path){ Wert && value.join &&(value = value.join(' ')); /(NaN| |^$)/.test(value) &&(Wert = 'M 0 0'); } elem.setAttribute(key, value) } } gib dies zurück; }, css: function(hash){ for(Var-Schlüssel im Hash){ isIE && key == "opacity" ? this[0].style['filter'] = "alpha(opacity=" hash[key] * 100 ")" : this[0].style[key] = hash[key]; } gib dies zurück; }, 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); } gib dies zurück; }, appendTo: function(parent){ if(parent){ parent.element ? parent.element.appendChild(this.element) : parent.appendChild(this.element) } sonst { this.graphic.container.appendChild(this.element); } gib dies zurück; }, addText: function(str){ var elem = this.element; if(elem.nodeName === 'text'){ elem.appendChild(doc.createTextNode(str '')); } gib dies zurück; }, setOpacity: function(v){ this.attr('fill-opacity',v); gib dies zurück; }, setSize : function(v){ this[0].nodeName==='circle' ? this.attr('r',4 (v===0?0:2)) : this.attr({'stroke-width':v}); gib dies zurück; }, toFront: function() { this[0].parentNode.appendChild(this[0]); gib dies zurück; }, show: function(){ this[0].style.display = 'block'; gib dies zurück; }, hide: function(){ this[0].style.display = 'none'; gib dies zurück; }, zerstören: function(){ //销毁节点...................... var node = this[0] || das; node.onmouseover = node.onmouseout = node.onclick = null; node.parentNode &&node.parentNode.removeChild(node); gib dies zurück; } }; //------------------------------------------------ -------------------------------------------------- ------------- //------------------------------------------------ -------------------------------------------------- - //Wenn es sich um VML handelt, ändern Sie einige der Methoden if(!hasSVG){ //-------------VML-Umgebung erstellen----------------- 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"); //-------------Einige Methoden ändern----------------- verlängern(vector.prototype,{ $c : function(graphic,nodeName){ var name = nodeName ||. 'Form'; This.element= this[0] = (name === 'div' || name === 'span') ? doc.createElement(name) : doc.createElement(' '); This.graphic = Graphic; Geben Sie dies zurück; }, /*on : function(eventName, handler){ var self = this; This.element.attachEvent("on" eventName,function(){ handler.call(self); }); Geben Sie dies zurück; },*/ AddText: function(txt){ This[0].innerHTML = txt || ''; Geben Sie dies zurück; }, setSize : function(v){ This[0].StrokeWeight = v; Geben Sie dies zurück; }, setOpacity: function(v){ This.opacity.opacity=v; Geben Sie dies zurück; } }); } //------------------------------------------------ -------------------------------------------------- - //Zeichenkurs //------------------------------------------------ ------------ win.smipleChart = function(){ This.init.apply(this,arguments); }; smileChart.list = []; smileChart.timer = null; smipleChart.lazyLoad = function(id){ id = id ||. '0' smileChart.list[id] &&smipleChart.list[id].loadMe(); }; smipleChart.prototype = { Optionen: { Diagramme: { paddingRight: 20, Radius: 200, Stil: { Schriftartenfamilie: „Lucida Grande“, „Lucida Sans Unicode“, Verdana, Arial, Helvetica, serifenlos“, Schriftgröße: '12px', Hintergrund: '#FFFFFF' } }, Titel: { Text: '', y : 10, Stil: { Schriftfamilie:'Verdana,Arial,Helvetica,sans-serif', Schriftgröße:'16px', fontWeight:'bold' } }, Untertitel: { Text: '', Jahr: 30, Stil: { Schriftfamilie:'Verdana,Arial,Helvetica,sans-serif', Schriftgröße:'12px', Farbe: '#111' } }, yEinheit: { Text: '', Stil: { Schriftfamilie:'Verdana,Arial,Helvetica,sans-serif', Schriftgröße:'12px', Farbe: '#111' }, Zeilennummer:10 } }, init: Funktion(Container,Optionen){ clearTimeout(smipleChart.timer) var self = this; This.width = container.offsetWidth; This.height = container.offsetHeight; This.currList = {}; This.uuuid = uuuid; This.timer = null; //Das Sammlungsformular der Hauptzeichnungsgruppe //{id : {dom:xx,show:true}} This.mainGroup = {}; // Wird beim Segmentieren verwendet, um zu wissen, welche ausgeblendet sind, da ein Neuzeichnen erforderlich ist This.hideList = {}; //Beim Zeichnen von Bildern innerhalb von SVG muss ein SVG-Tag vorhanden sein. Für vml wird div verwendet This.container = hasSVG ? neuer Vektor().$c(1,'svg') .attr({ xmlns: 'http://www.w3.org/2000/svg', Version: '1.1', Breite: this.width, Höhe: this.height }) .css({fontSize : '12px'}) .appendTo(container) : neuer Vektor().$c(1,'div') .css({ Schriftgröße: '12px', : this.width 'px', Höhe: 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,{ Rand: 1, BorderColor: '#C0C0C0', isfill : false, Pfad: [ 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({ Schriftartenfamilie:'Verdana,Arial,Helvetica,sans-serif', Schriftgröße:'12px' }) .addText(min i*f '') .appendTo(panel); } } //------------------------------------------------ -------------------------------------------------- --- //Da der Startpunkt wahrscheinlich nicht bei 0 beginnt, muss der Wert bis 0 zum Startpunkt addiert werden 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, // Startpunkt der X-Achse StartY : startY, // Startpunkt der Y-Achse xPices: xPices, // Die Breite jedes Teils der X-Achse yPices: yPices, // Die Breite jedes Teils der Y-Achse Offset: Offset, // X-Einzelpunkt-Mittelpunktpositionsoffset jianjuY : jianju*yPices/f, jianjuX : jianju*xPices/f, Vorschub: f // Wie viele Kopien gibt es auf der Y-Achse } Geben Sie dies zurück; }, createTooltip: function(){ //Eine Gruppe This.tipC = this.group('tip') .css({zIndex: 200,height:'20px',width:'20px',position:'absolute'}) .appendTo() .hide() //Zeichne einen Rahmen baseDraw This.tipBox = this.baseDraw.rect(this,{arc:0.22,fill:'#fff',border:2,borderColor:'#606060'}) .appendTo(this.tipC) // Da das g in SVG direkt positioniert werden kann, das Rendern der Gruppe in vml jedoch sehr langsam ist, habe ich das div geändert, sodass das übergeordnete Element hier anders ist var p = isIE ?this.tipBox :this.tipC; This.tipTxtContainer = this.baseDraw.text(this,{fill:'#000000',x:5,y:19,'text-anchor':'left'}) .css({ Schriftfamilie:'Verdana,Arial,Helvetica,sans-serif', Schriftgröße:'12px', Hintergrund: '#FFF' }) .appendTo(p); This.tipText = doc.createTextNode(''); This.tipTxtContainer[0].appendChild(this.tipText); Geben Sie dies zurück; }, 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 = das, 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'}); }anders{ 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, Knoten = 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){ self.hideList[i]; löschen var mainGroup = self.mainGroup; for(var name in mainGroup){ var parent = mainGroup[name].chart, Knoten = 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; every(datas, function(i,d){ links = i===0 ? left : t_space left; //计算所有left的位置 //如果是线性图 按线性图的方式画图 if(isLine){ self.baseDraw.path(self,{ Grenze : 1,5, borderColor: d.color, isfill : false, Pfad : [ M, left.toFixed(0), (Top 10).toFixed(0), L, (links 25).toFixed(0), (Top 10).toFixed(0) ] }) .appendTo(legendPanel); self.baseDraw[d.dotType || 'circle'](self,{ x: links 12, Jahr: Top 10, r : 4, fillColor: d.color }) .appendTo(legendPanel); }else{ self.baseDraw.rect(self,{ Bogen : 0,1, fill : d.color, Grenze : 1, borderColor: d.color, links : links, oben : oben, width : t_width 'px', Höhe : 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: links, y: oben }) .css(extend(css,{cursor:'pointer'})) .on('click',function(){ handle.call(this,i); }) .addText(d.name) .appendTo(legendPanel); links = links w; }); this.baseDraw.rect(this,{ Bogen : 0,1, fill : 'none', Grenze : 1,5, borderColor: '#666666', width : left t_space- orig_pos[0], Höhe : maxHeight, links : 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; every(datas, function(i,d){ top = i===0 ? top: t_space top; self.baseDraw.rect(self,{ Bogen : 0,1, fill : d.color, Grenze : 1, borderColor: d.color, links : links, oben : oben, width : t_width 'px', Höhe : 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: oben }) .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, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

JavaScript verwendet smipleChart, um einfache charts_javascript-Fähigkeiten zu implementieren