JavaScript는 smipleChart를 사용하여 간단한charts_javascript 기술을 구현합니다.

선형 차트, 영역 차트, 막대 차트, 원형 차트 지원

다양한 브라우저 지원

svg vml을 사용했습니다

코드 복사 코드는 다음과 같습니다. 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; } (함수(문서,정의되지 않음){ var win = 이, 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, 경로 = hasSVG?'d':'경로', 봉인 = hasSVG?'z':'e', 수학 = 수학, 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 = '엘'; win.$$ = 함수(ID){ return document.getElementById(Id); }; win.extend = 함수(){ var 대상 = 인수[0] || {}, i = 1, 길이 = 인수.길이, 깊이 = true, 옵션; if ( typeof target === "boolean" ) { 깊은 = 목표; 대상 = 인수[1] || {}; 나는 = 2; } if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]") 대상 = {}; for(;i if ( (옵션 = 인수[ i ]) != null ) for(옵션의 변수 이름){ var src = 대상[ 이름 ], copy = 옵션[ 이름 ]; if ( 대상 === 복사 ) 계속; if ( deep && copy && typeof copy === "object" && !copy.nodeType ){ target[ 이름 ] = 인수.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy ); } else if(복사 !== 정의되지 않음) 대상[이름] = 복사; } } 반환 대상; }; win.each = 함수(객체, 콜백, 인수) { var 이름, i = 0, 길이 = object.length; if (args) { args = Array.prototype.slice.call(arguments).slice(2); if ( 길이 === 정의되지 않음 ) { for ( 개체의 이름 ) if ( callback.apply( object[ 이름 ],[name,object[ 이름 ]].concat(args) ) === false ) 부서지다; } 그 외 for ( ; i if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) // 부서지다; } else { if ( 길이 === 정의되지 않음 ) { for ( 개체의 이름 ) if ( callback.call( 객체[ 이름 ], 이름, 객체[ 이름 ] ) === false ) 부서지다; } 그 외 for ( var value = object[0]; 나는 } 반환 개체; }; win.contains = 함수(p,c){ if(!p||!c)false를 반환; if(p===c) true를 반환합니다. 반환 isIE ? p.contains(c) : p.compareDocumentPosition(c)==20 ? 사실 : 거짓; }; //------------------------------------------------ --------------- 함수 processPoint( x ){ 반환 isIE ? ~~x.toFixed(0) : ~~x.toFixed(0) 0.5; }; 함수 calTextLen(txt, cssStr){ var 스팬 = doc.createElement('span'); if(cssStr){ cssStr 유형 === '문자열' ? span.style.cssText = cssStr : 확장(span.style,cssStr); }그밖에{ 확장(span.style,{ 글꼴 크기 : '12px', FontFamily: '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif' }); } span.innerHTML = txt || ''; span.style.visibility = '숨김'; doc.body.appendChild(span); var 너비 =span.offsetWidth, 높이 =span.offsetHeight; doc.body.removeChild(span); {w:너비, h:높이}를 반환합니다. }; 함수 각도(r,center,o,jingdu){ var hudu = Math.PI*2*(o/360), x = 중심[0] r*Math.sin(hudu), y = 중심[1] -r*Math.cos(hudu); return [x.toFixed(jingdu||0),y.toFixed(jingdu||0)]; } 함수 xx(a,b,lineNum){ 변수 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; } 각각([1,2,2.5,5,10],함수(i,o){ 도착[i]= o/c; }); }else if(stf>arr[4]){ while( stf>arr[4] ){ c = c*10; arr[4] = arr[4]*c; } 각각([1,2,2.5,5,10],함수(i,o){ arr[i]= o*c; }); } //상면找到间隔后 找到间隔中最接近的一个 각각(arr,function(i,o)){ if(stf v = o; false를 반환합니다. } }); var bj = (mathAbs(a)*t)/(v*t), 바 = 0, isZ = bj!==parseInt(bj); 이즈Z &&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; 숫자--; if((a*t-v*num*t)/10000>0&&a ===0) 휴식; } } if(num!=0){ 동안(num!==0){ b = (b*t v*t)/t 숫자--; } } }그밖에{ //坐标比较整数化 if(b while(b!=0&&num!=0&&b !==0){ b = (b*t v*t)/t; 숫자--; if((b*t v*num*t)/t 부서지다; } } if(num!=0){ 동안(num!==0){ a = (a*t-v*t)/t 숫자--; } } } 반환 {min:a,max:b,stf:v}; } //------------------------------------------------ ------------------------------------- ------------- //对svg vml元素的 一些创建 修改属性 样式 删除 == 一些的操작품 win.Vector = function(){}; 벡터.프로토타입 = { $c : 함수(그래픽,노드이름){ this.element = this[0] = doc.createElementNS('http://www.w3.org/2000/svg', nodeName); this.graphic = 그래픽; 이것을 돌려주세요; }, attr: 함수(해시, 값){ var elem = this.element, 열쇠, 가치; if(해시 유형 === '문자열'){ if(val === 정의되지 않음){ return elem.getAttribute(hash); }그밖에{ elem.setAttribute(hash, val); 이것을 돌려주세요; } } 그 밖의 { for(해시 키){ 값 = 해시[키]; if(키 === 경로){ 가치 && 가치.조인 &&(value = value.join(' ')); /(NaN| |^$)/.test(값) &&(값 = 'M 0 0'); } elem.setAttribute(키, 값) } } 이것을 돌려주세요; }, CSS: 함수(해시){ for(해시의 var 키){ isIE && 키 == "불투명도" ? this[0].style['filter'] = "alpha(opacity=" hash[key] * 100 ")" : this[0].style[key] = hash[key]; } 이것을 돌려주세요; }, on: 함수(이벤트 이름, 핸들러){ var self = this; /*this.element.addEventListener(eventName,function(){ handler.call(자체) },거짓);*/ this.element['on' eventName] = 함수(e){ e = e || win.event; handler.call(self,e); } 이것을 돌려주세요; }, 추가: 함수(상위){ if(부모){ 상위.요소 ? parent.element.appendChild(this.element) : parent.appendChild(this.element) } 그 밖의 { this.graphic.container.appendChild(this.element); } 이것을 돌려주세요; }, addText: 함수(str){ var elem = this.element; if(elem.nodeName === '텍스트'){ elem.appendChild(doc.createTextNode(str '')); } 이것을 돌려주세요; }, setOpacity : 함수(v){ this.attr('fill-opacity',v); 이것을 돌려주세요; }, setSize : 함수(v){ this[0].nodeName==='원' ? this.attr('r',4 (v===0?0:2)) : this.attr({'획-너비':v}); 이것을 돌려주세요; }, toFront: 함수() { this[0].parentNode.appendChild(this[0]); 이것을 돌려주세요; }, 표시: 함수(){ this[0].style.display = '차단'; 이것을 돌려주세요; }, 숨기기: 함수(){ this[0].style.display = '없음'; 이거 돌려줘; }, 파괴 : 함수(){ //销毁节点....................... var 노드 = this[0] || 이거; node.onmouseover = node.onmouseout = node.onclick = null; 노드.부모노드 &&node.parentNode.removeChild(노드); 이것을 돌려주세요; } }; //------------------------------------------------ ------------------------------------- ------------- //------------------------------------------------ ------------------------------------- - //vml이라면 메소드 일부 수정 if(!hasSVG){ //-------------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")

//---------------일부 메소드 수정------ 확장(벡터.프로토타입,{ $c : 함수(그래픽,노드이름){ var 이름 = 노드 이름 || '모양' This.element= this[0] = (이름 === 'div' || 이름 === 'span') ?doc.createElement(이름) : doc.createElement(' ') This.graphic = 그래픽; 이것을 돌려주세요 }, /*on : 함수(이벤트 이름, 핸들러){ var self = this; This.element.attachEvent("on" eventName,function(){ handler.call(self); }); 이것을 돌려주세요; },*/ AddText: 함수(txt){ 이[0].innerHTML = txt || 이것을 돌려주세요; }, setSize : 함수(v){ This[0].strokeWeight = v; 이것을 돌려주세요; }, setOpacity : 함수(v){ This.opacity.opacity=v; 이것을 돌려주세요; } }); } //------------------------------------------------ ------------------------------------- - //드로잉 수업 //------------------------------------------------ ------------ win.smipleChart = 함수(){ This.init.apply(this,arguments); }; smipleChart.list = []; smipleChart.timer = null; smipleChart.lazyLoad = 함수(id){ 아이디 = 아이디 || smipleChart.list[id] &&smipleChart.list[id].loadMe(); }; smipleChart.prototype = { 옵션 : { 차트: { paddingRight: 20, 반경 : 200, 스타일 : { FontFamily : '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', 글꼴 크기 : '12px', 배경 : '#FFFFFF' } }, 제목: { 텍스트 : '', y : 10, 스타일: { 글꼴 계열:'Verdana,Arial,Helvetica,sans-serif', 글꼴 크기:'16px', 글꼴 무게:'bold' } }, 부제목: { 텍스트 : '', y : 30, 스타일 : { 글꼴 계열:'Verdana,Arial,Helvetica,sans-serif', 글꼴 크기:'12px', 색상: '#111' } }, y단위: { 텍스트 : '', 스타일: { 글꼴 계열:'Verdana,Arial,Helvetica,sans-serif', 글꼴 크기:'12px', 색상: '#111' }, 라인번호:10 } }, init : 함수(컨테이너, 옵션){ 클리어타임아웃(smipleChart.timer) var self = this; This.width = 컨테이너.offsetWidth; This.height = 컨테이너.offsetHeight; This.currList = {}; This.uuuid = uuuid This.timer = null; //메인 드로잉 그룹의 컬렉션 형태 //{id : {dom:xx,show:true}} This.mainGroup = {}; // 분할할 때 다시 그리기와 관련되어 어떤 항목이 숨겨져 있는지 확인하는 데 사용됩니다. This.hideList = {}; //svg 안에 그림을 그릴 때는 svg 태그가 있어야 합니다. vml의 경우 div를 사용합니다 This.container = hasSVG ? 새로운 벡터().$c(1,'svg') .attr({ xmlns : 'http://www.w3.org/2000/svg', 버전: '1.1', 너비: this.width, 높이 : this.height }) .css({글꼴 크기 : '12px'}) .appendTo(컨테이너) : 새로운 벡터().$c(1,'div') .css({ 글꼴 크기 : '12px', : this.width 'px', 높이 : this.height 'px' }) .appendTo(컨테이너); This.loading = 컨테이너.appendChild(doc.createElement('img')); This.loading.setAttribute('src','http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_loading.gif'); This.loading.style.position = '절대'; This.loading.style.top = 컨테이너.offsetHeight/2- this.loading.offsetHeight/2 'px'; This.loading.style.left = 컨테이너.offsetWidth/2- this.loading.offsetWidth/2 'px';

var 결과 = xx(minValue,maxValue,lineNum), 최소 = 결과.분, 최대 = 결과.최대, f = 결과.stf; 세그먼트 &&(최소 = 0) //그림이 가로좌표 또는 이중좌표임을 나타냅니다 If(type.toLowerCase()==='x'){ //가로좌표 단위 간격 var xPices = drawAreaWidth / opts.xUnit.units.length, //단위 간격의 중심점 오프셋 = xPices / 2, yPices = drawAreaHeight / lineNum; //------가로 점 및 텍스트 그리기---------- - ------------------------------------------------- var y = hasSVG?5:10, t = 1000, 스팬; 각각(opts.xUnit.units,function(i,d){ Self.baseDraw.path(self,{ 테두리 : 1, 테두리색상: '#C0C0C0', isfill : 거짓, 경로 : [ 남, processPoint(startX (i * xPices)), processPoint(startY), 엘, processPoint(startX (i*xPices)), ProcessPoint(startY 5) ] }). appendTo(패널); 스팬 = self.baseDraw.span(self,{ x: startX 오프셋 (i * xPices), y : 시작Y y, 'text-anchor':'가운데' }) .css({ 글꼴 패밀리 : 'Verdana,Arial,Helvetica,sans-serif', 글꼴 크기 : '12px' }) .addText(opts.xUnit.units[i]) .appendTo(패널)[0]; !SVG가 있습니다 &&(span.style.left =parseInt(span.style.left) -span.offsetWidth/2 'px'); }); //-------------------세로 점과 텍스트 그리기---------- - ------------------------------------------------- - ---------- for(i=0;i Self.baseDraw.path(self,{ 테두리 : 1, 테두리색상: '#C0C0C0', isfill : 거짓, 경로: [M, startX, processPoint(startY - (i * yPices)), L, processPoint(startX drawAreaWidth), processPoint(startY - (i *yPices))] }) .css({zIndex:-10}) .appendTo(패널); var 스팬 = self.baseDraw.span(self,{ x : startX - 15, y : startY - i * yPices-calTextLen(min i*f '').h/2, '텍스트 앵커':'가운데' }) .css({ 'font-family': 'Verdana,Arial,Helvetica,sans-serif', '글꼴 크기': '12px', 너비 : '40px', 디스플레이: '차단', textAlign : '오른쪽' }) .addText((min*t (i*t*f/t)*t)/t '') .appendTo(패널)[0]; If(!hasSVG){ span.style.top =parseInt(span.style.top)span.offsetHeight/2 -5 'px'; span.style.left =parseInt(span.style.left) -35 'px' } } }그밖에{ //가로좌표 단위 간격 var yPices = drawAreaHeight / (opts.xUnit.units.length), //단위 간격의 중심점 오프셋 = Math.round(yPices / 2), x = hasSVG ? 25 : 70, y=hasSVG ? 0 : 5, 스팬 각각(opts.xUnit.units,function(i,d){ Self.baseDraw.path(self,{ 테두리 : 1, 테두리색상: '#C0C0C0', isfill : 거짓, 경로 : [ 남 프로세스포인트(startX-5), ProcessPoint(startY-i * yPices), 엘, 프로세스포인트(startX), ProcessPoint(startY-i * yPices), ] }) .appendTo(패널); 스팬 = self.baseDraw.span(self,{ x: startX - x, y : startY -i * yPices-offset-calTextLen(d).h/2 y, '텍스트 앵커':'가운데' }) .css({ 글꼴 계열:'Verdana,Arial,Helvetica,sans-serif', 글꼴 크기:'12px', 너비 : '60px', textAlign:'right' }) .addText(d) .appendTo(패널)

}); var xPices = drawAreaWidth / lineNum; for(var i=0;i Self.baseDraw.path(self,{ 테두리 : 1, 테두리색상: '#C0C0C0', isfill : 거짓, 경로 : [ 남, processPoint(startX (i * xPices)), processPoint(startY), 엘, processPoint(startX (i*xPices)), processPoint(startY - drawAreaHeight) ] }). appendTo(패널); Self.baseDraw.span(self,{ x: startX - calTextLen(min i*f '').w/2 i * xPices, y : 시작Y, '텍스트 앵커':'왼쪽' }) .css({ 글꼴 계열:'Verdana,Arial,Helvetica,sans-serif', 글꼴 크기:'12px' }) .addText(min i*f '') .appendTo(패널); } } //------------------------------------------------ ------------------------------------- --- //시작점이 0부터 시작하지 않을 가능성이 높기 때문에 시작점에 0까지의 값을 추가해야 합니다 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축 시작점 StartY : startY, // Y축 시작점 xPices : xPices, // X축 각 부분의 너비 yPices : yPices, // Y축 각 부분의 너비 오프셋 : 오프셋, // X 단일점 중심점 위치 오프셋 jianjuY : jianju*yPices/f, jianjuX : jianju*xPices/f, Feed : f // Y축에 몇 개의 복사본이 있는지 } 이것을 돌려주세요; }, createTooltip: 함수(){ //그룹 This.tipC = this.group('tip') .css({zIndex: 200,높이:'20px',너비:'20px',위치:'절대'}) .appendTo() .hide() //프레임 그리기 baseDraw This.tipBox = this.baseDraw.lect(this,{arc:0.22,fill:'#fff',border:2,borderColor:'#606060'}) .appendTo(this.tipC) //svg의 g는 직접 위치를 지정할 수 있지만 vml의 그룹 렌더링이 너무 느려서 div를 변경해서 여기 부모가 다릅니다 var p = isIE ?this.tipBox :this.tipC; This.tipTxtContainer = this.baseDraw.text(this,{fill:'#000000',x:5,y:19,'text-anchor':'left'}) .css({ 글꼴 계열:'Verdana,Arial,Helvetica,sans-serif', 글꼴 크기:'12px', 배경: '#FFF' }) .appendTo(p); This.tipText = doc.createTextNode(''); This.tipTxtContainer[0].appendChild(this.tipText); 이것을 돌려주세요; }, showTooltip: 함수(obj, x, y,data){ /*var txt = obj.name ':' 데이터, 크기 = 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({너비 : size.w 5 * 2, 높이 : size.h 5 * 2, 획 : obj.color||'#606060'}); }그밖에{ This.tipC.css({left:pos.x,top:pos.y}); This.tipBox .css({너비:size.w 5 * 2,높이 : size.h 5 * 2}) This.tipBox[0].StrokeColor = obj.color||'#000' } This.tipText.nodeValue = txt || '';*/ ClearTimeout(this.timer); var txt = obj.name ':' 데이터, 자기=이것, 크기 = calTextLen(txt,this.tipTxtContainer[0].style.cssText), pos = {x : x - (size.w 5 * 2)/2 ,y : y - 32}; if(hasSVG){ self.tipBox .attr({너비 : size.w 5 * 2, 높이 : size.h 5 * 2, 획 : obj.color||'#606060'}); }또 다른{ self.tipBox .css({너비:size.w 5 * 2,높이 : size.h 5 * 2}) Self.tipBox[0].StrokeColor = obj.color||'#000' } This.tipText.nodeValue = txt || If(this.tipC[0].style.display === '없음'){ 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(); }그밖에{ var 이동 = 함수(t,b,c,d){ return c*(t/=d)*t b; }, t = 0, b = self.tipC.attr('pos').split('-'), c = [위치x,위치y], d = 5; this.timer = setInterval(function(){ if(t ; var x = 이동(t,~~b[0],(~~c[0])-(~~b[0]),d), y = 이동(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}); }그밖에{ clearTimeout(self.timer); } },1); }; }, hideTooltip: 함수(){ this.tipC.hide(); }, drawLegend : 함수(유형,다시 그리기){ var self = 이, 선택 = this.opts, isLine = opts.charts.type === '라인', //색깔의 큰소 t_너비 = 20, t_height = 20, //块之间的距离 t_space = 5, 데이터 = opts.chartData, len = datas.length, CSS = opts.legend.style, //最大长titude 如果是纵着的 需要最大的长島 maxWidth = 10, 최대 높이= 30, //这个东西的位置 orig_pos = opts.legend.pos?opts.legend.pos:[2,2], //显示隐藏组的函数 핸들 = 함수(i){ var g = self.mainGroup['chart' i], issegment = opts.charts.type==='세그먼트'; if(g.show){ g.chart.hide(); g.show = false; hasSVG ? this.attr({fill:'#ccc'}) : this[0].style.color = '#ccc'; //如果是分段图 是会涉及到重画的 if(문제세그먼트){ self.hideList[i] =''; var mainGroup = self.mainGroup; for(mainGroup의 변수 이름){ var parent = mainGroup[이름].chart, 노드 = parent[0].childNodes, len = node.length; //销毁图上面画的东西 for(var i = len-1;i>=0;i--){ vector.prototype.destroy.call(노드[i]) } } //중요한 내용 self.drawSegment(); } }그밖에{ g.chart.show(); g.show = true; hasSVG ? this.attr({fill:'#000'}) : this[0].style.color = '#000' if(문제세그먼트){ self.hideList 삭제[i]; var mainGroup = self.mainGroup; for(mainGroup의 변수 이름){ var parent = mainGroup[이름].chart, 노드 = parent[0].childNodes, len = node.length; for(var i = len-1;i>=0;i--){ vector.prototype.destroy.call(노드[i]) } } self.drawSegment(); } } }, arr = []; 유형 = 유형 ||'측면'; var legendPanel = self.group('범례') .appendTo(); if(type==='측면'){ //如果是横着的 var top = orig_pos[1] 5, 일 = hasSVG?0:3, 왼쪽 = orig_pos[0] 5; 각(데이터, 함수(i,d){ 왼쪽 = i===0 ? 왼쪽 : t_space 왼쪽; //计算所는 왼쪽의 位置 //如果是线性图 按线性图的方式画图 if(isLine){ self.baseDraw.path(self,{ 테두리 : 1.5, borderColor : d.color, isfill : 거짓, 경로 : [ 남 left.toFixed(0), (상위 10).toFixed(0), 엘 (왼쪽 25).toFixed(0), (상위 10).toFixed(0) ] }) .appendTo(legendPanel); self.baseDraw[d.dotType || '원'](자신,{ x : 왼쪽 12, y : 상위 10위, r : 4, fillColor : d.color }) .appendTo(legendPanel); }그밖에{ self.baseDraw.ect(self,{ 호 : 0.1, 채우기 : d.color, 테두리 : 1, borderColor : d.color, 왼쪽 : 왼쪽, 상단 : 상단, 너비 : t_width 'px', 높이 : t_height 'px' }) .appendTo(legendPanel) } 왼쪽 = 왼쪽 t_width 2 t_space; var w = calTextLen(d.name,css).w self.baseDraw.span(self,{ '텍스트 앵커':'왼쪽', x : 왼쪽, y : 위 }) .css(extend(css,{cursor:'pointer'})) .on('클릭',function(){ handler.call(this,i); }) .addText(d.name) .appendTo(legendPanel); 왼쪽 = 왼쪽 w; }); this.baseDraw.lect(this,{ 호 : 0.1, 채우기 : '없음', 테두리 : 1.5, borderColor : '#666666', 너비 : 왼쪽 t_space- orig_pos[0], 높이 : 최대 높이, 왼쪽 : orig_pos[0], 상단 : orig_pos[1] }) .appendTo(legendPanel); }그밖에{ var top = orig_pos[1] 5, 일 = hasSVG?0:3, 왼쪽 = orig_pos[0] 5; 각각(데이터, 함수(i,d)){ 상단 = i===0 ? top : t_space top; self.baseDraw.ect(self,{ 호 : 0.1, 채우기 : d.color, 테두리 : 1, borderColor : d.color, 왼쪽 : 왼쪽, 상단 : 상단, 너비 : t_width 'px', 높이 : t_height 'px' }) .appendTo(legendPanel); var h = calTextLen(d.name,css).h; self.baseDraw.span(self,{ '텍스트 앵커':'왼쪽', x : 왼쪽 t_너비 2 t_space, y : 위 }) .css(extend(css,{cursor:'pointer'})) .addText(d.name) .on('클릭',function(){ //如果是多层饼图 不行进隐藏 if(opts.charts.type==='pies')return; handler.call(this,i); }) .appendTo(legendPanel); top = 상단 h t_space; maxWidth = Math.max(maxWidth,calTextLen(d.name,css).w); }); this.baseDraw.lect(this,{ &