Supporte les graphiques linéaires, les graphiques en aires, les graphiques à barres, les diagrammes circulaires Prend en charge plusieurs navigateurs Svg vml utilisé Copier le code Le code est le suivant : http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> smipleChart <br> .cc{<br> height:450px; width:800px; border:1px solid #999; position:relative; margin:20px;<br> }<br> <br> (fonction(doc,indéfini){<br> var gagne = ceci,<br> uuuid = -1, <br> hasSVG = win.SVGAngle || doc.implementation.hasFeature("<a href="http://www.w3.org/TR/SVG11/feature#BasicStructure">http://www.w3.org/TR/SVG11/feature#BasicStructure</a>", "1.1"),<br> isIE = /msie/i.test(navigator.userAgent) && !win.opera,<br> chemin = hasSVG?'d':'chemin',<br> sceau = hasSVG?'z':'e',<br> mathématiques = Mathématiques,<br> mathRound = math.round,<br> mathFloor = math.floor,<br> mathCeil = math.ceil,<br> mathMax = math.max,<br> mathMin = math.min,<br> mathAbs = math.abs,<br> mathCos = math.cos,<br> mathSin = math.sin, <br> M = 'M',<br> L = 'L';<br> gagner.$$ = fonction(Id){<br> return document.getElementById(Id);<br> };<br> win.extend = fonction(){<br> var cible = arguments[0] || {}, i = 1, length = arguments.length, deep = true, options;<br> if ( typeof target === "boolean" ) {<br> profond = cible ;<br> cible = arguments[1] || {};<br> je = 2;<br> ><br> if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]")<br> cible = {};<br> pour(;je<longueur;je ){<br /> if ( (options = arguments[ i ]) != null )<br /> pour(nom de la variable dans les options){<br /> var src = cible[ nom ], copie = options[ nom ];<br /> si (cible === copie)<br /> continuer ;<br /> if ( deep && copy && typeof copy === "object" && !copy.nodeType ){<br /> target[ nom ] = arguments.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy );<br /> } <br /> sinon if(copie !== non défini)<br /> cible[nom] = copie ; <br /> ><br /> <br /> ><br /> cible de retour ; <br /> };<br /> <br /> win.each = function ( objet, rappel, arguments ) { <br /> nom du var, i = 0, longueur = objet.longueur ; <br /> si ( arguments ) {<br /> args = Array.prototype.slice.call(arguments).slice(2);<br /> if ( longueur === non défini ) { <br /> pour (nom dans l'objet) <br /> if ( callback.apply( object[ name ],[name,object[ name ]].concat(args) ) === false ) <br /> casser; <br /> } autre<br /> pour ( ; je < longueur; je ) <br /> if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) //<br /> casser; <br /> } autre { <br /> if ( longueur === non défini ) { <br /> pour (nom dans l'objet) <br /> if ( callback.call( object[ name ], name, object[ name ] ) === false ) <br /> casser; <br /> } autre<br /> pour ( var valeur = objet[0]; <br /> je &Lt ; longueur && callback.call( valeur, i, valeur ) !== false; valeur = objet[ i] ){} <br /> } <br /> renvoyer l'objet ; <br /> } ; <br /> <br /> win.contains = function(p,c){<br /> if(!p||!c)return false;<br /> if(p===c)return true;<br /> retourner estIE<br /> ? p.contient(c)<br /> : p.compareDocumentPosition(c)==20<br /> ? vrai<br /> : faux;<br /> };<br /> //------------------------------------------------ ---------------<br /> fonction processusPoint( x ){<br /> retourner estIE ? ~~x.toFixed(0) : ~~x.toFixed(0) 0.5;<br /> };<br /> fonction calTextLen(txt, cssStr){<br /> var span = doc.createElement('span');<br /> si(cssStr){<br /> typeof cssStr === 'string' <br /> ? span.style.cssText = cssStr <br /> : extend(span.style,cssStr);<br /> }autre{<br /> étendre(span.style,{<br /> fontSiz : '12px',<br /> fontFamily : '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif' <br /> });<br /> ><br /> span.innerHTML = txt || ''; <br /> span.style.visibility = 'caché'; <br /> doc.body.appendChild(envergure); <br /> var width = span.offsetWidth,<br /> hauteur = span.offsetHeight;<br /> doc.body.removeChild(span);<br /> return {w:largeur,h:hauteur};<br /> };<br /> angle de fonction (r, centre, o, jingdu) {<br /> var hudu = Math.PI*2*(o/360),<br /> x = centre[0] r*Math.sin(hudu),<br /> y = centre[1] -r*Math.cos(hudu);<br /> return [x.toFixed(jingdu||0),y.toFixed(jingdu||0)]; <br /> ><br /> fonction xx(a,b,lineNum){<br /> var t = 1000,<br /> stf = ((b*t-a*t)/lineNum)/t,<br /> arr = [1,2,2.5,5,10],<br /> c = 1,<br /> v;<br /> // 分割线的基数是 [1,2,2.5,5,10] 这个步骤是查找 间隔 属于哪个范围<br /> si(stf<arr[0]){<br /> while( stf<arr[0] ){<br /> c = c*10;<br /> arr[0]=arr[0]/c; <br /> ><br /> chacun([1,2,2.5,5,10],fonction(i,o){<br /> arr[i]= o/c;<br /> });<br /> }sinon si(stf>arr[4]){<br> while( stf>arr[4] ){<br> c = c*10;<br> arr[4] = arr[4]*c;<br> ><br> chacun([1,2,2.5,5,10],fonction(i,o){<br> arr[i]= o*c;<br> }); <br> ><br> <br> //上面找到间隔后 找到间隔中最接近的一个 <br> chacun(arr,fonction(i,o){<br> si(stf<=o){<br /> v = o;<br /> retourner faux ;<br /> ><br /> }); <br /> var bj = (mathAbs(a)*t)/(v*t),<br /> ba = 0,<br /> isZ = bj!==parseInt(bj);<br /> estZ<br /> &&a>0<br> ? ba = -a%v*t<br> : ba = (mathAbs(a)%v-v)*t; <br> <br> <br> une = (une*t ba)/t;<br> b = (b*t (b%v===0?0:(v-b%v))*t)/t;<br> <br> //看看还剩几条线没有画<br> var num = Math.max(0,lineNum - Math.round((b-a)/v));<br> si(a>=0){<br> <br> //坐标比较整数化 <br> si(a!=0&&num!=0&&a !==0){<br> while(a!=0&&num!=0){<br> une = (a*t-v*t)/t;<br> num--;<br> if((a*t-v*num*t)/10000>0&&a ===0)<br> pause;<br> ><br> ><br> <br> si(num!=0){<br> while(num!==0){<br> b = (b*t v*t)/t<br> num--; <br> ><br> } <br> <br> }autre{<br> //坐标比较整数化 <br> si(b<0&&num!=0){<br /> tandis que(b!=0&&num!=0&&b !==0){<br /> b = (b*t v*t)/t;<br /> num--;<br /> si((b*t v*num*t)/t<0&&b ===0)<br /> casser; <br /> ><br /> ><br /> si(num!=0){<br /> while(num!==0){<br /> une = (a*t-v*t)/t<br /> num--; <br /> ><br /> } <br /> ><br /> retourner {min:a,max:b,stf:v};<br /> } <br />//------------------------------------------------ -------------------------------------------------- -------------<br /> //对svg vml元素的一些创建 修改属性 样式 删除 == 一些的操作<br /> win.vecteur = fonction(){};<br /> vecteur.prototype = {<br /> $c : fonction(graphique,nodeName){<br /> this.element = this[0] = doc.createElementNS('http://www.w3.org/2000/svg', nodeName); <br /> this.graphic = graphique;<br /> rends ceci ;<br /> },<br /> attr : fonction (hash, val){<br /> var elem = this.element,<br /> clé,<br /> valeur ;<br /> if(typeof hash === 'string'){<br /> if(val === non défini){<br /> return elem.getAttribute(hash);<br /> }autre{<br /> elem.setAttribute(hash, val);<br /> rends ceci ;<br /> ><br /> } autre {<br /> pour(saisir le hachage){<br /> valeur = hash[clé];<br /> if(clé === chemin){<br /> valeur && valeur.join<br /> &&(value = value.join(' '));<br /> /(NaN| |^$)/.test(value)<br /> &&(valeur = 'M 0 0');<br /> ><br /> elem.setAttribute(clé, valeur) <br /> ><br /> ><br /> rends ceci ;<br /> },<br /> css : fonction (hachage){<br /> for(clé var dans le hachage){<br /> isIE && key == "opacité"<br /> ? this[0].style['filter'] = "alpha(opacity=" hash[key] * 100 ")"<br /> : this[0].style[key] = hash[key];<br /> ><br /> rends ceci ;<br /> },<br /> sur : fonction (nom de l'événement, gestionnaire) {<br /> var soi = ceci;<br /> /*this.element.addEventListener(eventName,function(){<br /> handler.call(self)<br /> },faux);*/<br /> this.element['on' eventName] = function(e){<br /> e = e || gagner.événement;<br /> handler.call(self,e);<br /> } <br /> rends ceci ;<br /> },<br /> appendTo : fonction (parent){<br /> si(parent){<br /> parent.element<br /> ? parent.element.appendChild(this.element)<br /> : parent.appendChild(this.element)<br /> <br /> } autre {<br /> this.graphic.container.appendChild(this.element);<br /> ><br /> rends ceci ;<br /> },<br /> addText : fonction(str){<br /> var elem = this.element;<br /> if(elem.nodeName === 'text'){<br /> elem.appendChild(doc.createTextNode(str ''));<br /> ><br /> rends ceci ;<br /> },<br /> setOpacity : fonction(v){<br /> this.attr('fill-opacity',v);<br /> rends ceci ;<br /> },<br /> setSize : fonction(v){<br /> this[0].nodeName==='circle'<br /> ? this.attr('r',4 (v===0?0:2))<br /> : this.attr({'Stroke-width':v});<br /> rends ceci ;<br /> },<br /> toFront : fonction() {<br /> this[0].parentNode.appendChild(this[0]);<br /> rends ceci ;<br /> }, <br /> afficher : fonction(){<br /> this[0].style.display = 'block';<br /> rends ceci ;<br /> },<br /> masquer : function(){<br /> this[0].style.display = 'aucun';<br /> rends ceci ; <br /> },<br /> détruire : function(){<br /> //销毁节点..........<br /> var noeud = this[0] || ceci ;<br /> node.onmouseover = node.onmouseout = node.onclick = null;<br /> node.parentNode<br /> &&node.parentNode.removeChild(node);<br /> rends ceci ;<br /> ><br /> };<br />//------------------------------------------------ -------------------------------------------------- -------------<br /> //------------------------------------------------ -------------------------------------------------- -<br /> // S'il s'agit de vml, modifiez certaines méthodes <br /> si(!hasSVG){<br /> //-------------Créer un environnement vml----------------- <br /> doc.createStyleSheet().addRule(".vml", "behavior:url(#default#VML);display:inline-block;position:absolute;left:0px;top:0px");<br /> !doc.namespaces.vml && !"v1";<br /> doc.namespaces.add("vml", "urn:schemas-microsoft-com:vml"); <br /> //-------------Modifier certaines méthodes-----------------<br /> extend(vecteur.prototype,{<br /> $c : fonction(graphique,nodeName){<br /> var nom = nodeName || 'forme'; <br /> This.element= this[0] = (name === 'div' || name === 'span')<br /> ? doc.createElement(nom)<br /> : doc.createElement('<vml:' nom ' class="vml">' <br>); This.graphic = graphique;<br> Renvoyez ceci ; <br> },<br> /*on : function(eventName, handler){<br> var soi = ceci;<br> This.element.attachEvent("on" eventName,function(){<br> handler.call(self);<br> });<br> Renvoyez ceci ;<br> },*/<br> AddText : fonction(txt){<br> Ceci[0].innerHTML = txt || '';<br> Renvoyez ceci ;<br> },<br> setSize : fonction(v){<br> Ceci[0].StrokeWeight = v;<br> Renvoyez ceci ;<br> }, <br> setOpacity : fonction(v){<br> This.opacity.opacity=v;<br> Renvoyez ceci ;<br> } <br> });<br> ><br> //------------------------------------------------ -------------------------------------------------- -<br> //Cours de dessin <br> //------------------------------------------------ ------------<br> win.smipleChart = fonction(){<br> This.init.apply(this,arguments);<br> };<br> smipleChart.list = [];<br> smipleChart.timer = null;<br> smipleChart.lazyLoad = fonction(id){<br> identifiant = identifiant || '0' <br> smipleChart.list[id]<br> &&smipleChart.list[id].loadMe();<br> };<br> smipleChart.prototype = {<br> options : {<br> Graphiques : {<br> paddingRight : 20,<br> rayon : 200,<br> Style : {<br> fontFamily : '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif',<br> taille de police : '12px',<br> fond : '#FFFFFF'<br> ><br> },<br> titre : {<br> texte : '',<br> y : 10,<br> Style : {<br> fontFamily : 'Verdana, Arial, Helvetica, sans-serif',<br> taille de police : '16px',<br> fontWeight:'bold'<br> ><br> },<br> sous-titre : {<br> texte : '',<br> y : 30,<br> Style : {<br> fontFamily : 'Verdana, Arial, Helvetica, sans-serif',<br> Taille de la police : '12px', <br> Couleur : '#111' <br> ><br> },<br> yUnité : {<br> texte : '',<br> Style : {<br> fontFamily : 'Verdana, Arial, Helvetica, sans-serif',<br> taille de police : '12px', <br> Couleur : '#111'<br> },<br> Numéro de ligne : 10<br> ><br> },<br> init : fonction (conteneur, options) {<br> clearTimeout(smipleChart.timer)<br> var soi = ceci;<br>This.width = conteneur.offsetWidth;<br> This.height = conteneur.offsetHeight;<br> This.currList = {};<br> This.uuuid = uuuid; <br> This.timer = null;<br> //Le formulaire de collecte du groupe de dessin principal <br> //{id : {dom:xx,show:true}}<br> This.mainGroup = {};<br> // Utilisé lors de la segmentation pour savoir lesquels sont masqués car cela implique un redessin <br> This.hideList = {};<br> <br> //Lorsque vous dessinez des images dans SVG, il doit y avoir une balise SVG pour VML, div est utilisé <br>. This.container = hasSVG <br> ? nouveau vecteur().$c(1,'svg')<br> .attr({<br> xmlns : 'http://www.w3.org/2000/svg',<br> Version : '1.1',<br> largeur : this.width,<br> Hauteur : this.height<br> <br> })<br> .css({fontSize : '12px'})<br> .appendTo(conteneur)<br> : nouveau vecteur().$c(1,'div')<br> .css({<br> taille de police : '12px',<br> : this.width 'px',<br> Hauteur : this.height 'px'<br> })<br> .appendTo(conteneur);<br> <br> This.loading = conteneur.appendChild(doc.createElement('img'));<br> This.loading.setAttribute('src','http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_loading.gif');<br> This.loading.style.position = 'absolu';<br> This.loading.style.top = conteneur.offsetHeight/2- this.loading.offsetHeight/2 'px';<br> This.loading.style.left = conteneur.offsetWidth/2- this.loading.offsetWidth/2 'px';<br> <br> var c = extend(true,{},this.options),<br> opts = this.opts = extend(true,c,options),<br> Style = étendre (opts.charts.style,{<br> Largeur : this.width,<br> Hauteur : this.height<br> });<br> <br> smipleChart.list[this.uuuid] = ceci <br> <br> smipleChart.timer = setTimeout(function(){<br> smipleChart.lazyLoad();<br> },200);<br> <br> },<br> loadMe : fonction(){<br> var opts = this.opts,<br> soi = ceci,<br> Type = opts.charts.type;<br> Ce.conteneur = ce.conteneur<br> .on('mouseout',function(e){<br> var elem = e.ratedTarget || e.toElement;<br> Si(!contient(this[0],elem)){<br> self.hideTooltip();<br> self.currList.dot<br> &&self.currList.dot.setSize(0);<br> self.currList.line<br> &&self.currList.line.setSize(1.5);<br> self.currList = {}; ><br> })<br> .css({display:'none'})[0];<br> <br> //Calculer certains paramètres nécessaires lors de la peinture de la plaque<br> This.getDrawArea()<br> .createTooltip() //Créer un cadre pour les informations rapides<br> .drawTitle() //Dessine le titre<br> <br> 'ligne, zone, tarte'.indexOf(type)>=0<br> &&(opts.charts.panel = 'x');<br> <br> <br> 'tarte,tartes'.indexOf(type)<0<br /> &&this.drawPanel();<br /> <br /> <br /> this.drawLegend(opts.legend.type); //画色块条<br /> var type = {<br /> ligne : 'drawLine',<br /> zone : 'drawArea',<br /> colonnes : 'drawColumns',<br /> tarte : 'drawPie',<br /> tartes : 'drawPies',<br /> segment : 'drawSegment'<br /> }[opts.charts.type];<br /> //开始画图..............<br /> ce[type]();<br /> <br /> //删除节点<br /> this.loading.parentNode.removeChild(this.loading);<br /> //断开引用<br /> this.loading = null;<br /> <br /> this.container.style.display = '';<br /> setTimeout(function(){<br /> smipleChart.lazyLoad(( self.uuuid) '');<br /> },10)<br /> <br /> },<br /> createElement : function(nodeName){<br /> return new vector().$c(this,nodeName);<br /> },<br /> groupe : fonction(nom){<br /> return this.createElement(hasSVG?'g':'div').attr('mark',name);<br /> },<br /> getDrawArea : fonction(){<br /> var opts = this.opts,<br /> largeur = this.width,<br /> hauteur = this.hauteur,<br /> titre = opts.titre,<br /> sous-Titre = opts.subTitle,<br /> zone = {<br /> // 去掉坐标轴左边的刻度文本宽度(预估) 80为定值 左边只留80的间距<br /> AreaWidth : largeur - 80, <br /> // 去掉坐标轴底下的文本和标线的高度<br /> zoneHauteur : hauteur - 40,<br /> //原点的X位置 下面会计算到<br /> débutX : 0,<br /> //原点的Y位置 下面会计算到<br /> débutY : 0,<br /> //中心的x坐标 画饼图的时候需要知道圆心的位置<br /> centreX : 0,<br /> //中心的y坐标 画饼图的时候需要知道圆心的位置<br /> centreY : 0<br /> };<br /> //如果主标题存在 减去主标题的高度 否则 减去10的高<br /> zone.areaHeight -=(titre.text !== '')<br /> ? titre.y<br /> :10;<br /> <br /> // 去掉副标题高度<br /> zone.areaHeight -=(subTitle.text !== '')<br /> ? sous-titre.y<br /> : 10<br /> <br /> zone.startX = 80;<br /> zone.startY = hauteur - 40;<br /> <br /> //圆心的位置<br /> zone.centerX = largeur / 2;<br /> zone.centerY = hauteur / 2 ; <br /> <br /> //右边留一些空隙<br /> zone.areaWidth -=20;<br /> //上边也留一些间距<br /> zone.areaHeight -=15;<br /> <br /> opts.area = zone ; <br /> <br /> rends ceci ;<br /> },<br /> drawTitle : function(){ <br /> var opts = this.opts,<br /> soi = ceci,<br /> arr = [opts.title,opts.subTitle,opts.yUnit],<br /> //3个标题坐标的位置的基本参数<br /> config = [<br /> {<br /> x : this.width / 2,<br /> y : opts.title.y<br /> },<br /> {<br /> x : this.width / 2,<br /> y : opts.subTitle.y <br /> },<br /> {<br /> x : opts.yUnit.x,<br /> y : cette.hauteur / 2 - 20 <br /> ],<br /> tpanel = this.group('titre')<br /> .appendTo();<br /> Chacun(arr,fonction(i,titre){<br /> var texte = titre.texte;<br /> Si(texte){<br /> var elem = self.baseDraw.span(self,{<br /> 'text-anchor':'gauche',<br /> x : mathMax(config[i].x - calTextLen(text,title.style).w/2,10),<br /> y : config[i].y<br /> },calTextLen(title.text,title.style).h)<br /> .css(titre.style)<br /> .addText(texte)<br /> .appendTo(tpanel);<br /> <br /> //S'il vaut 2, cela signifie que c'est un sous-titre. Tournez-le verticalement <br />. Si(i===2){<br /> ASVG<br /> ? elem.attr({transform : 'rotate(270, ' (opts.yUnit.x 10) ', ' self.height / 2 ')'})<br /> : (elem.element.style.filter ='progid:DXImageTransform.Microsoft.BasicImage(rotation=3)') <br /> ><br /> } <br /> }); <br /> Renvoyez ceci ;<br /> },<br /> //Dessiner une assiette est plus gênant<br /> drawPanel : fonction(type){<br /> var opts = this.opts,<br /> soi = ceci,<br /> Zone = opts.area,<br /> ChartsType = opts.charts.type,<br /> isSegment = chartsType === 'segment',<br /> //Le type de plaque : plaque horizontale ou plaque verticale<br /> Tapez = opts.charts.panel || 'x';<br /> // Plaque de base<br /> var drawAreaWidth = zone.areaWidth,<br /> drawAreaHeight = zone.areaHeight, <br /> //Coordonnées de l'origine<br /> StartX = zone.startX,<br /> StartY = zone.startY;<br /> var allData = [],<br /> minValue = 0,<br /> valeurmax = 10,<br /> //Le nombre de lignes ne peut être qu'entre 1 et 10<br /> LineNum = mathMin(10,mathMax(opts.yUnit.lineNum,1)),<br /> personnel;<br /> <br /> //Combiner toutes les données<br /> Chacun(opts.chartData,function(i,o){<br /> // Si c'est un histogramme, c'est la somme de toutes les données<br /> estSegment<br /> ? chacun(o.data,function(j,d){<br /> allData[j]<br /> ? allData[j] = allData[j] (~~d)<br /> : allData[j] = ~~d;<br /> })<br /> : allData = allData.concat(o.data)<br /> });<br /> <br /> // Triez toutes les données pour trouver les valeurs maximales et minimales ci-dessous <br /> AllData.sort(function(a,b){return a-b});<br /> <br /> //Trouver la valeur maximale et la valeur minimale<br /> maxValue = allData[allData.length - 1];<br /> <br /> Chacun(allData,function(i,o){<br /> Si(o!==null){<br /> minValue = o;<br /> Renvoie faux ;<br /> } <br /> }); <br /> <br /> //Conteneur assiette principale<br /> var panel = this.group('panel').appendTo();<br /> <br /> var résultat = xx(minValue,maxValue,lineNum),<br /> Min = résultat.min,<br /> max = résultat.max,<br /> f = résultat.stf;<br /> estSegment<br /> &&(min = 0); <br /> //Indique que le dessin est une abscisse ou une double coordonnée<br /> Si(type.toLowerCase()==='x'){<br /> //Intervalle d'unité d'abscisse<br /> var xPices = drawAreaWidth / opts.xUnit.units.length,<br />//Point central de l'intervalle unitaire<br /> Décalage = xPices / 2,<br /> <br /> yPices = drawAreaHeight / lineNum;<br /> <br /> //--------------------------------Dessinez des points horizontaux et du texte---------- - -------------------------------------------------<br /> var y = hasSVG?5:10,<br /> t = 1000,<br /> durée ; <br /> Chacun(opts.xUnit.units,function(i,d){ Self.baseDraw.path(self,{<br /> Bordure : 1,<br /> Couleur de la bordure : '#C0C0C0',<br /> isfill : faux,<br /> Chemin : [<br /> M, <br /> processPoint(startX (i * xPices)), <br /> processPoint(débutY), <br /> L,<br /> processPoint(startX (i*xPices)),<br /> ProcessPoint(startY 5)<br /> ]<br /> }).<br /> appendTo(panneau);<br /> <br /> span = self.baseDraw.span(self,{<br /> x : décalage startX (i * xPices),<br /> y : startY y,<br /> 'text-anchor':'milieu'<br /> })<br /> .css({<br /> fontFamily : 'Verdana,Arial,Helvetica,sans-serif',<br /> fontSize : '12px'<br /> })<br /> .addText(opts.xUnit.units[i])<br /> .appendTo(panneau)[0];<br /> <br /> !hasSVG<br /> &&(span.style.left = parseInt(span.style.left) - span.offsetWidth/2 'px');<br /> <br /> });<br /> //--------------------------------Dessinez des points verticaux et du texte-------------- - ------------------------------------------------- - ---------- <br /> pour(i=0;i<=lineNum;i ){<br /> Self.baseDraw.path(self,{<br /> Bordure : 1,<br /> Couleur de la bordure : '#C0C0C0',<br /> isfill : faux,<br /> chemin : [M, startX, processPoint(startY - (i * yPices)), L, processPoint(startX drawAreaWidth), processPoint(startY - (i *yPices))]<br /> })<br /> .css({zIndex:-10}) <br /> .appendTo(panneau);<br /> <br /> var span = self.baseDraw.span(self,{<br /> x : startX - 15,<br /> y : startY - i * yPices-calTextLen(min i*f '').h/2,<br /> 'text-anchor':'milieu'<br /> })<br /> .css({<br /> 'font-family' : 'Verdana,Arial,Helvetica,sans-serif',<br /> 'font-size' : '12px',<br /> Largeur : '40px',<br /> affichage : 'bloc',<br /> textAlign : 'à droite'<br /> })<br /> .addText((min*t (i*t*f/t)*t)/t '')<br /> .appendTo(panneau)[0];<br /> Si(!hasSVG){<br /> span.style.top = parseInt(span.style.top) span.offsetHeight/2 -5 'px';<br /> span.style.left = parseInt(span.style.left) -35 'px'<br /> } <br />} <br /> <br /> }autre{<br /> //Intervalle d'unité d'abscisse<br /> var yPices = drawAreaHeight / (opts.xUnit.units.length),<br /> //Point central de l'intervalle unitaire<br /> Décalage = Math.round(yPices / 2),<br /> x = hasSVG ? 25 : 70,<br /> y=hasSVG ? 0 : 5,<br /> durée<br /> <br /> Chacun(opts.xUnit.units,function(i,d){ Self.baseDraw.path(self,{<br /> Bordure : 1,<br /> Couleur de la bordure : '#C0C0C0',<br /> isfill : faux,<br /> Chemin : [<br /> M,<br /> ProcessPoint(startX-5),<br /> ProcessPoint(startY-i * yPices),<br /> L,<br /> ProcessPoint(startX),<br /> ProcessPoint(startY-i * yPices),<br /> ]<br /> })<br /> .appendTo(panneau);<br /> span = self.baseDraw.span(self,{<br /> x: startX - x,<br /> y : startY -i * yPices-offset-calTextLen(d).h/2 y,<br /> 'text-anchor':'milieu'<br /> })<br /> .css({<br /> fontFamily : 'Verdana,Arial,Helvetica,sans-serif',<br /> taille de police : '12px',<br /> largeur : '60px',<br /> textAlign:'right'<br /> })<br /> .addText(d)<br /> .appendTo(panneau) <br /> <br /> });<br /> <br /> <br /> var xPices = drawAreaWidth / lineNum;<br /> <br /> pour(var i=0;i<=lineNum;i ){<br /> Self.baseDraw.path(self,{<br /> Bordure : 1,<br /> Couleur de la bordure : '#C0C0C0',<br /> isfill : faux,<br /> Chemin : [<br /> M, <br /> processPoint(startX (i * xPices)), <br /> processPoint(débutY), <br /> L, <br /> processPoint(startX (i*xPices)),<br /> processPoint(startY - drawAreaHeight)<br /> ]<br /> }).<br /> appendTo(panneau);<br /> <br /> Self.baseDraw.span(self,{<br /> x: startX - calTextLen(min i*f '').w/2 i * xPices,<br /> y : startY,<br /> 'text-anchor':'gauche'<br /> })<br /> .css({<br /> fontFamily : 'Verdana,Arial,Helvetica,sans-serif',<br /> Taille de la police : '12px'<br /> })<br /> .addText(min i*f '')<br /> .appendTo(panneau); <br /> ><br /> <br /> ><br /> //------------------------------------------------ -------------------------------------------------- --- <br /> //Comme le point de départ ne partira probablement pas de 0, la valeur jusqu'à 0 doit être ajoutée au point de départ<br /> var jianju =0;<br /> Si(min>0)jianju = min;<br>Si(max<0)jianju = max;<br /> <br /> StartX = opts.charts.panel==='x' ? startX :startX-xPices*(min/f);<br /> StartY = opts.charts.panel==='x' ? startY yPices*(min/f) : startY; Opts.draw = {<br /> StartX : startX, // Point de départ de l'axe X<br /> StartY : startY, // Point de départ de l'axe Y<br /> xPices : xPices, // La largeur de chaque partie de l'axe X<br /> yPices : yPices, // La largeur de chaque partie de l'axe Y<br /> Offset : offset, // Décalage de la position du point central en un seul point X <br /> jianjuY : jianju*yPices/f,<br /> jianjuX : jianju*xPices/f, <br /> Feed : f // Combien y a-t-il de copies sur l'axe Y <br /> ><br /> Renvoyez ceci ;<br /> },<br /> createTooltip : function(){<br /> //Un groupe<br /> This.tipC = this.group('tip')<br /> .css({zIndex : 200,hauteur :'20px',largeur :'20px',position :'absolue'})<br /> .appendTo()<br /> .hide()<br /> //Dessinez un cadre baseDraw <br /> This.tipBox = this.baseDraw.rect(this,{arc:0.22,fill:'#fff',border:2,borderColor:'#606060'})<br /> .appendTo(this.tipC)<br /> <br /> //Parce que le g dans svg peut être positionné directement, mais le rendu du groupe en vml est très lent, j'ai donc changé le div, donc le parent ici est différent <br /> var p = isIE ?this.tipBox :this.tipC;<br /> <br /> This.tipTxtContainer = this.baseDraw.text(this,{fill:'#000000',x:5,y:19,'text-anchor':'left'})<br /> .css({<br /> fontFamily : 'Verdana, Arial, Helvetica, sans-serif',<br /> taille de police : '12px',<br /> arrière-plan : '#FFF'<br /> })<br /> .appendTo(p);<br /> <br /> This.tipText = doc.createTextNode('');<br /> This.tipTxtContainer[0].appendChild(this.tipText);<br /> Renvoyez ceci ;<br /> },<br /> showTooltip : fonction (obj, x, y, données){<br /> <br /> /*var txt = obj.name ':' data,<br /> size = calTextLen(txt,this.tipTxtContainer[0].style.cssText),<br /> pos = {x : x - (taille.w 5 * 2)/2 ,y : y - 32};<br /> Ceci.tipC<br /> .toFront()<br /> .show();<br /> si(hasSVG){<br /> This.tipC.attr({transform:'translate(' pos.x ',' pos.y ')'});<br /> <br /> Cette.tipBox<br /> .attr({largeur : taille.w 5 * 2,hauteur : taille.h 5 * 2,AVC : obj.color||'#606060'});<br /> }autre{<br /> This.tipC.css({left:pos.x,top:pos.y});<br /> <br /> Cette.tipBox<br /> .css({width:size.w 5 * 2,height : size.h 5 * 2})<br /> This.tipBox[0].StrokeColor = obj.color||'#000' <br /> ><br /> This.tipText.nodeValue = txt || '';*/<br /> ClearTimeout(this.timer);<br /> var txt = obj.name ':' données,<br /> soi = ceci,<br /> size = calTextLen(txt,this.tipTxtContainer[0].style.cssText),<br /> pos = {x : x - (taille.w 5 * 2)/2 ,y : y - 32};<br /> si(hasSVG){ <br /> self.tipBox<br /> .attr({largeur : taille.w 5 * 2,hauteur : taille.h 5 * 2,AVC : obj.color||'#606060'});<br /> }autre{ self.tipBox<br /> .css({width:size.w 5 * 2,height : size.h 5 * 2})<br /> Self.tipBox[0].StrokeColor = obj.color||'#000' <br /> ><br /> This.tipText.nodeValue = txt || '';<br /> <br /> Si(this.tipC[0].style.display === 'aucun'){<br /> ASVG<br /> ? self.tipC.attr({transform:'translate(' pos.x ',' pos.y ')',pos:pos.x '-' pos.y})<br /> : self.tipC.attr({pos:pos.x '-' pos.y}).css({left:pos.x,top:pos.y});<br /> this.tipC<br /> .toFront()<br /> .show();<br /> <br /> }autre{<br /> var move = fonction(t,b,c,d){<br /> retourner c*(t/=d)*t b;<br /> },<br /> t = 0,<br /> b = self.tipC.attr('pos').split('-'),<br /> c = [pos.x,pos.y],<br /> d = 5;<br /> <br /> this.timer = setInterval(function(){<br /> si(t<d){<br /> t ;<br /> <br /> var x = déplacer(t,~~b[0],(~~c[0])-(~~b[0]),d),<br /> y = déplacer(t,~~b[1],(~~c[1])-(~~b[1]),d);<br /> aSVG<br /> ? self.tipC.attr({transform:'translate(' x ',' y ')',pos:x '-' y})<br /> : self.tipC.attr({pos:x '-' y}).css({left:x,top:y});<br /> }autre{<br /> clearTimeout(self.timer);<br /> ><br /> },1);<br /> } ; <br /> },<br /> hideTooltip : function(){<br /> this.tipC.hide();<br /> }, <br /> drawLegend : function(type,redraw){<br /> var self = ceci,<br /> opts = this.opts,<br /> isLine = opts.charts.type === 'ligne', <br /> //颜色块的大小<br /> t_width = 20,<br /> t_hauteur = 20,<br /> //块之间的距离<br /> t_space = 5, <br /> données = opts.chartData,<br /> len = datas.length,<br /> css = opts.legend.style,<br /> //最大长度 如果是纵着的 需要最大的长度<br /> largeurmax = 10,<br /> hauteurmax= 30,<br /> //这个东西的位置<br /> orig_pos = opts.legend.pos?opts.legend.pos:[2,2],<br /> <br /> //显示隐藏组的函数<br /> gérer = fonction(i){<br /> var g = self.mainGroup['chart' i],<br /> issegment = opts.charts.type==='segment';<br /> <br /> si(g.show){<br /> g.chart.hide();<br /> g.show = faux;<br /> aSVG<br /> ? this.attr({fill:'#ccc'})<br /> : this[0].style.color = '#ccc';<br /> <br /> <br /> //如果是分段图 是会涉及到重画的<br /> si(issegment){<br /> self.hideList[i] ='';<br /> var mainGroup = self.mainGroup;<br /> <br /> for(nom de la variable dans mainGroup){ <br /> var parent = mainGroup[name].chart,<br /> nœuds = parent[0].childNodes,<br /> len = nodes.length;<br /> //销毁图上面画的东西<br /> pour(var i = len-1;i>=0;i--){<br> vecteur.prototype.destroy.call(nodes[i])<br> } <br> ><br> //重画 <br> self.drawSegment();<br> } <br> <br> }autre{<br> g.chart.show();<br> g.show = vrai;<br> aSVG<br> ? this.attr({fill:'#000'})<br> : this[0].style.color = '#000'<br> <br> si(issegment){<br> supprimer self.hideList[i];<br> var mainGroup = self.mainGroup;<br> <br> for(nom de la variable dans mainGroup){<br> <br> var parent = mainGroup[name].chart,<br> nœuds = parent[0].childNodes,<br> len = nodes.length;<br> pour(var i = len-1;i>=0;i--){<br> vecteur.prototype.destroy.call(nodes[i])<br> } <br> <br> ><br> self.drawSegment();<br> } <br> ><br> },<br> <br> arr = [];<br> type = type ||'latéral'; <br> var legendPanel = self.group('Legend')<br> .appendTo();<br> if(type==='latéral'){<br> //如果是横着的<br> var top = orig_pos[1] 5,<br> th = hasSVG?0:3,<br> gauche = orig_pos[0] 5 ; <br> chacun(données, fonction(i,d){ <br> gauche = je===0 ? gauche : t_espace gauche;<br> //计算所有gauche的位置<br> //如果是线性图 按线性图的方式画图<br> si(estLigne){<br> self.baseDraw.path(self,{<br> bordure : 1,5,<br> borderColor : d.color,<br> isfill : faux,<br> chemin : [<br> M,<br> gauche.toFixed(0),<br> (top 10).toFixed(0),<br> L,<br> (gauche 25).toFixed(0),<br> (top 10).toFixed(0)<br> ]<br> })<br> .appendTo(legendPanel);<br> self.baseDraw[d.dotType || 'cercle'](soi,{<br> x : gauche 12, <br> y : top 10,<br> r : 4,<br> fillColor : d.color<br> })<br> .appendTo(legendPanel);<br> }autre{<br> self.baseDraw.rect(soi,{<br> arc : 0,1,<br> remplir : d.color,<br> bordure : 1,<br> borderColor : d.color,<br> gauche : gauche,<br> haut : haut,<br> largeur : t_width 'px',<br> hauteur : t_height 'px' <br> })<br> .appendTo(légendPanel)<br> ><br> <br> gauche = gauche t_width 2 t_space;<br> var w = calTextLen(d.name,css).w<br> self.baseDraw.span(self,{<br> 'text-anchor':'gauche',<br> x : gauche,<br> y : haut th<br> })<br> .css(extend(css,{cursor:'pointer'}))<br> .on('clic',function(){<br> handle.call(this,i);<br> })<br> .addText(d.nom)<br> .appendTo(legendPanel);<br> gauche = gauche w;<br> });<br> this.baseDraw.rect(this,{<br> arc : 0,1,<br> remplir : 'aucun',<br> bordure : 1,5,<br> borderColor : '#666666',<br> largeur : gauche t_space- orig_pos[0],<br> hauteur : maxHeight,<br> gauche : orig_pos[0],<br> haut : orig_pos[1]<br> })<br> .appendTo(legendPanel);<br> }autre{<br> var top = orig_pos[1] 5,<br> th = hasSVG?0:3,<br> gauche = orig_pos[0] 5;<br> chacun(données, fonction(i,d){<br> haut = je===0 ? haut : t_space haut;<br> self.baseDraw.rect(soi,{<br> arc : 0,1,<br> remplir : d.color,<br> bordure : 1,<br> borderColor : d.color,<br> gauche : gauche,<br> haut : haut,<br> largeur : t_width 'px',<br> hauteur : t_height 'px' <br> })<br> .appendTo(legendPanel);<br> var h = calTextLen(d.name,css).h;<br> <br> self.baseDraw.span(self,{<br> 'text-anchor':'gauche',<br> x : gauche t_width 2 t_space,<br> y : haut th<br> })<br> .css(extend(css,{cursor:'pointer'}))<br> .addText(d.nom)<br> .on('clic',function(){<br> //如果是多层饼图 不行进隐藏 <br> if(opts.charts.type==='pies')return;<br> handle.call(this,i); <br> })<br> .appendTo(legendPanel); <br> top = top h t_space;<br> maxWidth = Math.max(maxWidth,calTextLen(d.name,css).w);<br> }); <br> this.baseDraw.rect(this,{<br> &</div>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
