JavaScript utilise smipleChart pour implémenter des compétences simples charts_javascript

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 .cc{ height:450px; width:800px; border:1px solid #999; position:relative; margin:20px; } (fonction(doc,indéfini){ var gagne = ceci, 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, chemin = hasSVG?'d':'chemin', sceau = hasSVG?'z':'e', mathématiques = Mathématiques, 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'; gagner.$$ = fonction(Id){ return document.getElementById(Id); }; win.extend = fonction(){ var cible = arguments[0] || {}, i = 1, length = arguments.length, deep = true, options; if ( typeof target === "boolean" ) { profond = cible ; cible = arguments[1] || {}; je = 2; > if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]") cible = {}; pour(;je if ( (options = arguments[ i ]) != null ) pour(nom de la variable dans les options){ var src = cible[ nom ], copie = options[ nom ]; si (cible === copie) continuer ; if ( deep && copy && typeof copy === "object" && !copy.nodeType ){ target[ nom ] = arguments.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy ); } sinon if(copie !== non défini) cible[nom] = copie ; > > cible de retour ; }; win.each = function ( objet, rappel, arguments ) { nom du var, i = 0, longueur = objet.longueur ; si ( arguments ) { args = Array.prototype.slice.call(arguments).slice(2); if ( longueur === non défini ) { pour (nom dans l'objet) if ( callback.apply( object[ name ],[name,object[ name ]].concat(args) ) === false ) casser; } autre pour ( ; je if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) // casser; } autre { if ( longueur === non défini ) { pour (nom dans l'objet) if ( callback.call( object[ name ], name, object[ name ] ) === false ) casser; } autre pour ( var valeur = objet[0]; je &Lt ; longueur && callback.call( valeur, i, valeur ) !== false; valeur = objet[ i] ){} } renvoyer l'objet ; } ; win.contains = function(p,c){ if(!p||!c)return false; if(p===c)return true; retourner estIE ? p.contient(c) : p.compareDocumentPosition(c)==20 ? vrai : faux; }; //------------------------------------------------ --------------- fonction processusPoint( x ){ retourner estIE ? ~~x.toFixed(0) : ~~x.toFixed(0) 0.5; }; fonction calTextLen(txt, cssStr){ var span = doc.createElement('span'); si(cssStr){ typeof cssStr === 'string' ? span.style.cssText = cssStr : extend(span.style,cssStr); }autre{ étendre(span.style,{ fontSiz : '12px', fontFamily : '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif' }); > span.innerHTML = txt || ''; span.style.visibility = 'caché'; doc.body.appendChild(envergure); var width = span.offsetWidth, hauteur = span.offsetHeight; doc.body.removeChild(span); return {w:largeur,h:hauteur}; }; angle de fonction (r, centre, o, jingdu) { var hudu = Math.PI*2*(o/360), x = centre[0] r*Math.sin(hudu), y = centre[1] -r*Math.cos(hudu); return [x.toFixed(jingdu||0),y.toFixed(jingdu||0)]; > fonction 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] 这个步骤是查找 间隔 属于哪个范围 si(stf while( stf c = c*10; arr[0]=arr[0]/c; > chacun([1,2,2.5,5,10],fonction(i,o){ arr[i]= o/c; }); }sinon si(stf>arr[4]){ while( stf>arr[4] ){ c = c*10; arr[4] = arr[4]*c; > chacun([1,2,2.5,5,10],fonction(i,o){ arr[i]= o*c; }); > //上面找到间隔后 找到间隔中最接近的一个 chacun(arr,fonction(i,o){ si(stf v = o; retourner faux ; > }); var bj = (mathAbs(a)*t)/(v*t), ba = 0, isZ = bj!==parseInt(bj); estZ &&a>0 ? ba = -a%v*t : ba = (mathAbs(a)%v-v)*t; une = (une*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)); si(a>=0){ //坐标比较整数化 si(a!=0&&num!=0&&a !==0){ while(a!=0&&num!=0){ une = (a*t-v*t)/t; num--; if((a*t-v*num*t)/10000>0&&a ===0) pause; > > si(num!=0){ while(num!==0){ b = (b*t v*t)/t num--; > } }autre{ //坐标比较整数化 si(b tandis que(b!=0&&num!=0&&b !==0){ b = (b*t v*t)/t; num--; si((b*t v*num*t)/t casser; > > si(num!=0){ while(num!==0){ une = (a*t-v*t)/t num--; > } > retourner {min:a,max:b,stf:v}; } //------------------------------------------------ -------------------------------------------------- ------------- //对svg vml元素的一些创建 修改属性 样式 删除 == 一些的操作 win.vecteur = fonction(){}; vecteur.prototype = { $c : fonction(graphique,nodeName){ this.element = this[0] = doc.createElementNS('http://www.w3.org/2000/svg', nodeName); this.graphic = graphique; rends ceci ; }, attr : fonction (hash, val){ var elem = this.element, clé, valeur ; if(typeof hash === 'string'){ if(val === non défini){ return elem.getAttribute(hash); }autre{ elem.setAttribute(hash, val); rends ceci ; > } autre { pour(saisir le hachage){ valeur = hash[clé]; if(clé === chemin){ valeur && valeur.join &&(value = value.join(' ')); /(NaN| |^$)/.test(value) &&(valeur = 'M 0 0'); > elem.setAttribute(clé, valeur) > > rends ceci ; }, css : fonction (hachage){ for(clé var dans le hachage){ isIE && key == "opacité" ? this[0].style['filter'] = "alpha(opacity=" hash[key] * 100 ")" : this[0].style[key] = hash[key]; > rends ceci ; }, sur : fonction (nom de l'événement, gestionnaire) { var soi = ceci; /*this.element.addEventListener(eventName,function(){ handler.call(self) },faux);*/ this.element['on' eventName] = function(e){ e = e || gagner.événement; handler.call(self,e); } rends ceci ; }, appendTo : fonction (parent){ si(parent){ parent.element ? parent.element.appendChild(this.element) : parent.appendChild(this.element) } autre { this.graphic.container.appendChild(this.element); > rends ceci ; }, addText : fonction(str){ var elem = this.element; if(elem.nodeName === 'text'){ elem.appendChild(doc.createTextNode(str '')); > rends ceci ; }, setOpacity : fonction(v){ this.attr('fill-opacity',v); rends ceci ; }, setSize : fonction(v){ this[0].nodeName==='circle' ? this.attr('r',4 (v===0?0:2)) : this.attr({'Stroke-width':v}); rends ceci ; }, toFront : fonction() { this[0].parentNode.appendChild(this[0]); rends ceci ; }, afficher : fonction(){ this[0].style.display = 'block'; rends ceci ; }, masquer : function(){ this[0].style.display = 'aucun'; rends ceci ; }, détruire : function(){ //销毁节点.......... var noeud = this[0] || ceci ; node.onmouseover = node.onmouseout = node.onclick = null; node.parentNode &&node.parentNode.removeChild(node); rends ceci ; > }; //------------------------------------------------ -------------------------------------------------- ------------- //------------------------------------------------ -------------------------------------------------- - // S'il s'agit de vml, modifiez certaines méthodes si(!hasSVG){ //-------------Créer un environnement vml----------------- 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"); //-------------Modifier certaines méthodes----------------- extend(vecteur.prototype,{ $c : fonction(graphique,nodeName){ var nom = nodeName || 'forme'; This.element= this[0] = (name === 'div' || name === 'span') ? doc.createElement(nom) : doc.createElement(' ' ); This.graphic = graphique; Renvoyez ceci ; }, /*on : function(eventName, handler){ var soi = ceci; This.element.attachEvent("on" eventName,function(){ handler.call(self); }); Renvoyez ceci ; },*/ AddText : fonction(txt){ Ceci[0].innerHTML = txt || ''; Renvoyez ceci ; }, setSize : fonction(v){ Ceci[0].StrokeWeight = v; Renvoyez ceci ; }, setOpacity : fonction(v){ This.opacity.opacity=v; Renvoyez ceci ; } }); > //------------------------------------------------ -------------------------------------------------- - //Cours de dessin //------------------------------------------------ ------------ win.smipleChart = fonction(){ This.init.apply(this,arguments); }; smipleChart.list = []; smipleChart.timer = null; smipleChart.lazyLoad = fonction(id){ identifiant = identifiant || '0' smipleChart.list[id] &&smipleChart.list[id].loadMe(); }; smipleChart.prototype = { options : { Graphiques : { paddingRight : 20, rayon : 200, Style : { fontFamily : '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', taille de police : '12px', fond : '#FFFFFF' > }, titre : { texte : '', y : 10, Style : { fontFamily : 'Verdana, Arial, Helvetica, sans-serif', taille de police : '16px', fontWeight:'bold' > }, sous-titre : { texte : '', y : 30, Style : { fontFamily : 'Verdana, Arial, Helvetica, sans-serif', Taille de la police : '12px', Couleur : '#111' > }, yUnité : { texte : '', Style : { fontFamily : 'Verdana, Arial, Helvetica, sans-serif', taille de police : '12px', Couleur : '#111' }, Numéro de ligne : 10 > }, init : fonction (conteneur, options) { clearTimeout(smipleChart.timer) var soi = ceci; This.width = conteneur.offsetWidth; This.height = conteneur.offsetHeight; This.currList = {}; This.uuuid = uuuid; This.timer = null; //Le formulaire de collecte du groupe de dessin principal //{id : {dom:xx,show:true}} This.mainGroup = {}; // Utilisé lors de la segmentation pour savoir lesquels sont masqués car cela implique un redessin This.hideList = {}; //Lorsque vous dessinez des images dans SVG, il doit y avoir une balise SVG pour VML, div est utilisé . This.container = hasSVG ? nouveau vecteur().$c(1,'svg') .attr({ xmlns : 'http://www.w3.org/2000/svg', Version : '1.1', largeur : this.width, Hauteur : this.height }) .css({fontSize : '12px'}) .appendTo(conteneur) : nouveau vecteur().$c(1,'div') .css({ taille de police : '12px', : this.width 'px', Hauteur : this.height 'px' }) .appendTo(conteneur); This.loading = conteneur.appendChild(doc.createElement('img')); This.loading.setAttribute('src','http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_loading.gif'); This.loading.style.position = 'absolu'; This.loading.style.top = conteneur.offsetHeight/2- this.loading.offsetHeight/2 'px'; This.loading.style.left = conteneur.offsetWidth/2- this.loading.offsetWidth/2 'px';

var résultat = xx(minValue,maxValue,lineNum), Min = résultat.min, max = résultat.max, f = résultat.stf; estSegment &&(min = 0); //Indique que le dessin est une abscisse ou une double coordonnée Si(type.toLowerCase()==='x'){ //Intervalle d'unité d'abscisse var xPices = drawAreaWidth / opts.xUnit.units.length, //Point central de l'intervalle unitaire Décalage = xPices / 2, yPices = drawAreaHeight / lineNum; //--------------------------------Dessinez des points horizontaux et du texte---------- - ------------------------------------------------- var y = hasSVG?5:10, t = 1000, durée ; Chacun(opts.xUnit.units,function(i,d){ Self.baseDraw.path(self,{ Bordure : 1, Couleur de la bordure : '#C0C0C0', isfill : faux, Chemin : [ M, processPoint(startX (i * xPices)), processPoint(débutY), L, processPoint(startX (i*xPices)), ProcessPoint(startY 5) ] }). appendTo(panneau); span = self.baseDraw.span(self,{ x : décalage startX (i * xPices), y : startY y, 'text-anchor':'milieu' }) .css({ fontFamily : 'Verdana,Arial,Helvetica,sans-serif', fontSize : '12px' }) .addText(opts.xUnit.units[i]) .appendTo(panneau)[0]; !hasSVG &&(span.style.left = parseInt(span.style.left) - span.offsetWidth/2 'px'); }); //--------------------------------Dessinez des points verticaux et du texte-------------- - ------------------------------------------------- - ---------- pour(i=0;i Self.baseDraw.path(self,{ Bordure : 1, Couleur de la bordure : '#C0C0C0', isfill : faux, chemin : [M, startX, processPoint(startY - (i * yPices)), L, processPoint(startX drawAreaWidth), processPoint(startY - (i *yPices))] }) .css({zIndex:-10}) .appendTo(panneau); var span = self.baseDraw.span(self,{ x : startX - 15, y : startY - i * yPices-calTextLen(min i*f '').h/2, 'text-anchor':'milieu' }) .css({ 'font-family' : 'Verdana,Arial,Helvetica,sans-serif', 'font-size' : '12px', Largeur : '40px', affichage : 'bloc', textAlign : 'à droite' }) .addText((min*t (i*t*f/t)*t)/t '') .appendTo(panneau)[0]; Si(!hasSVG){ span.style.top = parseInt(span.style.top) span.offsetHeight/2 -5 'px'; span.style.left = parseInt(span.style.left) -35 'px' } } }autre{ //Intervalle d'unité d'abscisse var yPices = drawAreaHeight / (opts.xUnit.units.length), //Point central de l'intervalle unitaire Décalage = Math.round(yPices / 2), x = hasSVG ? 25 : 70, y=hasSVG ? 0 : 5, durée Chacun(opts.xUnit.units,function(i,d){ Self.baseDraw.path(self,{ Bordure : 1, Couleur de la bordure : '#C0C0C0', isfill : faux, Chemin : [ M, ProcessPoint(startX-5), ProcessPoint(startY-i * yPices), L, ProcessPoint(startX), ProcessPoint(startY-i * yPices), ] }) .appendTo(panneau); span = self.baseDraw.span(self,{ x: startX - x, y : startY -i * yPices-offset-calTextLen(d).h/2 y, 'text-anchor':'milieu' }) .css({ fontFamily : 'Verdana,Arial,Helvetica,sans-serif', taille de police : '12px', largeur : '60px', textAlign:'right' }) .addText(d) .appendTo(panneau)

}); var xPices = drawAreaWidth / lineNum; pour(var i=0;i Self.baseDraw.path(self,{ Bordure : 1, Couleur de la bordure : '#C0C0C0', isfill : faux, Chemin : [ M, processPoint(startX (i * xPices)), processPoint(débutY), L, processPoint(startX (i*xPices)), processPoint(startY - drawAreaHeight) ] }). appendTo(panneau); Self.baseDraw.span(self,{ x: startX - calTextLen(min i*f '').w/2 i * xPices, y : startY, 'text-anchor':'gauche' }) .css({ fontFamily : 'Verdana,Arial,Helvetica,sans-serif', Taille de la police : '12px' }) .addText(min i*f '') .appendTo(panneau); > > //------------------------------------------------ -------------------------------------------------- --- //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 var jianju =0; Si(min>0)jianju = min; Si(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, // Point de départ de l'axe X StartY : startY, // Point de départ de l'axe Y xPices : xPices, // La largeur de chaque partie de l'axe X yPices : yPices, // La largeur de chaque partie de l'axe Y Offset : offset, // Décalage de la position du point central en un seul point X jianjuY : jianju*yPices/f, jianjuX : jianju*xPices/f, Feed : f // Combien y a-t-il de copies sur l'axe Y > Renvoyez ceci ; }, createTooltip : function(){ //Un groupe This.tipC = this.group('tip') .css({zIndex : 200,hauteur :'20px',largeur :'20px',position :'absolue'}) .appendTo() .hide() //Dessinez un cadre baseDraw This.tipBox = this.baseDraw.rect(this,{arc:0.22,fill:'#fff',border:2,borderColor:'#606060'}) .appendTo(this.tipC) //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 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', taille de police : '12px', arrière-plan : '#FFF' }) .appendTo(p); This.tipText = doc.createTextNode(''); This.tipTxtContainer[0].appendChild(this.tipText); Renvoyez ceci ; }, showTooltip : fonction (obj, x, y, données){ /*var txt = obj.name ':' data, size = calTextLen(txt,this.tipTxtContainer[0].style.cssText), pos = {x : x - (taille.w 5 * 2)/2 ,y : y - 32}; Ceci.tipC .toFront() .show(); si(hasSVG){ This.tipC.attr({transform:'translate(' pos.x ',' pos.y ')'}); Cette.tipBox .attr({largeur : taille.w 5 * 2,hauteur : taille.h 5 * 2,AVC : obj.color||'#606060'}); }autre{ This.tipC.css({left:pos.x,top:pos.y}); Cette.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 ':' données, soi = ceci, size = calTextLen(txt,this.tipTxtContainer[0].style.cssText), pos = {x : x - (taille.w 5 * 2)/2 ,y : y - 32}; si(hasSVG){ self.tipBox .attr({largeur : taille.w 5 * 2,hauteur : taille.h 5 * 2,AVC : obj.color||'#606060'}); }autre{ self.tipBox .css({width:size.w 5 * 2,height : size.h 5 * 2}) Self.tipBox[0].StrokeColor = obj.color||'#000' > This.tipText.nodeValue = txt || ''; Si(this.tipC[0].style.display === 'aucun'){ ASVG ? 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(); }autre{ var move = fonction(t,b,c,d){ retourner c*(t/=d)*t b; }, t = 0, b = self.tipC.attr('pos').split('-'), c = [pos.x,pos.y], d = 5; this.timer = setInterval(function(){ si(t t ; var x = déplacer(t,~~b[0],(~~c[0])-(~~b[0]),d), y = déplacer(t,~~b[1],(~~c[1])-(~~b[1]),d); aSVG ? self.tipC.attr({transform:'translate(' x ',' y ')',pos:x '-' y}) : self.tipC.attr({pos:x '-' y}).css({left:x,top:y}); }autre{ clearTimeout(self.timer); > },1); } ; }, hideTooltip : function(){ this.tipC.hide(); }, drawLegend : function(type,redraw){ var self = ceci, opts = this.opts, isLine = opts.charts.type === 'ligne', //颜色块的大小 t_width = 20, t_hauteur = 20, //块之间的距离 t_space = 5, données = opts.chartData, len = datas.length, css = opts.legend.style, //最大长度 如果是纵着的 需要最大的长度 largeurmax = 10, hauteurmax= 30, //这个东西的位置 orig_pos = opts.legend.pos?opts.legend.pos:[2,2], //显示隐藏组的函数 gérer = fonction(i){ var g = self.mainGroup['chart' i], issegment = opts.charts.type==='segment'; si(g.show){ g.chart.hide(); g.show = faux; aSVG ? this.attr({fill:'#ccc'}) : this[0].style.color = '#ccc'; //如果是分段图 是会涉及到重画的 si(issegment){ self.hideList[i] =''; var mainGroup = self.mainGroup; for(nom de la variable dans mainGroup){ var parent = mainGroup[name].chart, nœuds = parent[0].childNodes, len = nodes.length; //销毁图上面画的东西 pour(var i = len-1;i>=0;i--){ vecteur.prototype.destroy.call(nodes[i]) } > //重画 self.drawSegment(); } }autre{ g.chart.show(); g.show = vrai; aSVG ? this.attr({fill:'#000'}) : this[0].style.color = '#000' si(issegment){ supprimer self.hideList[i]; var mainGroup = self.mainGroup; for(nom de la variable dans mainGroup){ var parent = mainGroup[name].chart, nœuds = parent[0].childNodes, len = nodes.length; pour(var i = len-1;i>=0;i--){ vecteur.prototype.destroy.call(nodes[i]) } > self.drawSegment(); } > }, arr = []; type = type ||'latéral'; var legendPanel = self.group('Legend') .appendTo(); if(type==='latéral'){ //如果是横着的 var top = orig_pos[1] 5, th = hasSVG?0:3, gauche = orig_pos[0] 5 ; chacun(données, fonction(i,d){ gauche = je===0 ? gauche : t_espace gauche; //计算所有gauche的位置 //如果是线性图 按线性图的方式画图 si(estLigne){ self.baseDraw.path(self,{ bordure : 1,5, borderColor : d.color, isfill : faux, chemin : [ M, gauche.toFixed(0), (top 10).toFixed(0), L, (gauche 25).toFixed(0), (top 10).toFixed(0) ] }) .appendTo(legendPanel); self.baseDraw[d.dotType || 'cercle'](soi,{ x : gauche 12, y : top 10, r : 4, fillColor : d.color }) .appendTo(legendPanel); }autre{ self.baseDraw.rect(soi,{ arc : 0,1, remplir : d.color, bordure : 1, borderColor : d.color, gauche : gauche, haut : haut, largeur : t_width 'px', hauteur : t_height 'px' }) .appendTo(légendPanel) > gauche = gauche t_width 2 t_space; var w = calTextLen(d.name,css).w self.baseDraw.span(self,{ 'text-anchor':'gauche', x : gauche, y : haut th }) .css(extend(css,{cursor:'pointer'})) .on('clic',function(){ handle.call(this,i); }) .addText(d.nom) .appendTo(legendPanel); gauche = gauche w; }); this.baseDraw.rect(this,{ arc : 0,1, remplir : 'aucun', bordure : 1,5, borderColor : '#666666', largeur : gauche t_space- orig_pos[0], hauteur : maxHeight, gauche : orig_pos[0], haut : orig_pos[1] }) .appendTo(legendPanel); }autre{ var top = orig_pos[1] 5, th = hasSVG?0:3, gauche = orig_pos[0] 5; chacun(données, fonction(i,d){ haut = je===0 ? haut : t_space haut; self.baseDraw.rect(soi,{ arc : 0,1, remplir : d.color, bordure : 1, borderColor : d.color, gauche : gauche, haut : haut, largeur : t_width 'px', hauteur : t_height 'px' }) .appendTo(legendPanel); var h = calTextLen(d.name,css).h; self.baseDraw.span(self,{ 'text-anchor':'gauche', x : gauche t_width 2 t_space, y : haut th }) .css(extend(css,{cursor:'pointer'})) .addText(d.nom) .on('clic',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,{ &