선형 차트, 영역 차트, 막대 차트, 원형 차트 지원 다양한 브라우저 지원 svg vml을 사용했습니다 코드 복사 코드는 다음과 같습니다. 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> (함수(문서,정의되지 않음){<br> var win = 이,<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> 경로 = hasSVG?'d':'경로',<br> 봉인 = hasSVG?'z':'e',<br> 수학 = 수학,<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 = '엘';<br> win.$$ = 함수(ID){<br> return document.getElementById(Id);<br> };<br> win.extend = 함수(){<br> var 대상 = 인수[0] || {}, i = 1, 길이 = 인수.길이, 깊이 = true, 옵션;<br> if ( typeof target === "boolean" ) {<br> 깊은 = 목표;<br> 대상 = 인수[1] || {};<br> 나는 = 2;<br> }<br> if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]")<br> 대상 = {};<br> for(;i<length></length> if ( (옵션 = 인수[ i ]) != null )<br> for(옵션의 변수 이름){<br> var src = 대상[ 이름 ], copy = 옵션[ 이름 ];<br> if ( 대상 === 복사 )<br> 계속;<br> if ( deep && copy && typeof copy === "object" && !copy.nodeType ){<br> target[ 이름 ] = 인수.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy );<br> } <br> else if(복사 !== 정의되지 않음)<br> 대상[이름] = 복사; <br> }<br> <br> }<br> 반환 대상; <br> };<br> <br> win.each = 함수(객체, 콜백, 인수) { <br> var 이름, i = 0, 길이 = object.length; <br> if (args) {<br> args = Array.prototype.slice.call(arguments).slice(2);<br> if ( 길이 === 정의되지 않음 ) { <br> for ( 개체의 이름 ) <br> if ( callback.apply( object[ 이름 ],[name,object[ 이름 ]].concat(args) ) === false ) <br> 부서지다; <br> } 그 외<br> for ( ; i if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) //<br> 부서지다; <br> } else { <br> if ( 길이 === 정의되지 않음 ) { <br> for ( 개체의 이름 ) <br> if ( callback.call( 객체[ 이름 ], 이름, 객체[ 이름 ] ) === false ) <br> 부서지다; <br> } 그 외<br> for ( var value = object[0]; <br> 나는 < length && callback.call( value, i, value ) !== false; 값 = 객체[ i] ){} <br /> } <br /> 반환 개체; <br /> }; <br /> <br /> win.contains = 함수(p,c){<br /> if(!p||!c)false를 반환;<br /> if(p===c) true를 반환합니다.<br /> 반환 isIE<br /> ? p.contains(c)<br /> : p.compareDocumentPosition(c)==20<br /> ? 사실<br /> : 거짓;<br /> };<br /> //------------------------------------------------ ---------------<br /> 함수 processPoint( x ){<br /> 반환 isIE ? ~~x.toFixed(0) : ~~x.toFixed(0) 0.5;<br /> };<br /> 함수 calTextLen(txt, cssStr){<br /> var 스팬 = doc.createElement('span');<br /> if(cssStr){<br /> cssStr 유형 === '문자열' <br /> ? span.style.cssText = cssStr <br /> : 확장(span.style,cssStr);<br /> }그밖에{<br /> 확장(span.style,{<br /> 글꼴 크기 : '12px',<br /> FontFamily: '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif' <br /> });<br /> }<br /> span.innerHTML = txt || ''; <br /> span.style.visibility = '숨김'; <br /> doc.body.appendChild(span); <br /> var 너비 =span.offsetWidth,<br /> 높이 =span.offsetHeight;<br /> doc.body.removeChild(span);<br /> {w:너비, h:높이}를 반환합니다.<br /> };<br /> 함수 각도(r,center,o,jingdu){<br /> var hudu = Math.PI*2*(o/360),<br /> x = 중심[0] r*Math.sin(hudu),<br /> y = 중심[1] -r*Math.cos(hudu);<br /> return [x.toFixed(jingdu||0),y.toFixed(jingdu||0)]; <br /> }<br /> 함수 xx(a,b,lineNum){<br /> 변수 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 /> if(stf<arr[0]){<br /> while( stf<arr[0] ){<br /> c = c*10;<br /> arr[0]=arr[0]/c; <br /> }<br /> 각각([1,2,2.5,5,10],함수(i,o){<br /> 도착[i]= o/c;<br /> });<br /> }else if(stf>arr[4]){<br> while( stf>arr[4] ){<br> c = c*10;<br> arr[4] = arr[4]*c;<br> }<br> 각각([1,2,2.5,5,10],함수(i,o){<br> arr[i]= o*c;<br> }); <br> }<br> <br> //상면找到间隔后 找到间隔中最接近的一个 <br> 각각(arr,function(i,o)){<br> if(stf<=o){<br /> v = o;<br /> false를 반환합니다.<br /> }<br /> }); <br /> var bj = (mathAbs(a)*t)/(v*t),<br /> 바 = 0,<br /> isZ = bj!==parseInt(bj);<br /> 이즈Z<br /> &&a>0<br> ? ba = -a%v*t<br> : ba = (mathAbs(a)%v-v)*t; <br> <br> <br> a = (a*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> if(a>=0){<br> <br> //坐标比较整数化 <br> if(a!=0&&num!=0&&a !==0){<br> while(a!=0&&num!=0){<br> a = (a*t-v*t)/t;<br> 숫자--;<br> if((a*t-v*num*t)/10000>0&&a ===0)<br> 휴식;<br> }<br> }<br> <br> if(num!=0){<br> 동안(num!==0){<br> b = (b*t v*t)/t<br> 숫자--; <br> }<br> } <br> <br> }그밖에{<br> //坐标比较整数化 <br> if(b while(b!=0&&num!=0&&b !==0){<br> b = (b*t v*t)/t;<br> 숫자--;<br> if((b*t v*num*t)/t<0&&b ===0)<br /> 부서지다; <br /> }<br /> }<br /> if(num!=0){<br /> 동안(num!==0){<br /> a = (a*t-v*t)/t<br /> 숫자--; <br /> }<br /> } <br /> }<br /> 반환 {min:a,max:b,stf:v};<br /> } <br />//------------------------------------------------ ------------------------------------- -------------<br /> //对svg vml元素的 一些创建 修改属性 样式 删除 == 一些的操작품<br /> win.Vector = function(){};<br /> 벡터.프로토타입 = {<br /> $c : 함수(그래픽,노드이름){<br /> this.element = this[0] = doc.createElementNS('http://www.w3.org/2000/svg', nodeName); <br /> this.graphic = 그래픽;<br /> 이것을 돌려주세요;<br /> },<br /> attr: 함수(해시, 값){<br /> var elem = this.element,<br /> 열쇠,<br /> 가치;<br /> if(해시 유형 === '문자열'){<br /> if(val === 정의되지 않음){<br /> return elem.getAttribute(hash);<br /> }그밖에{<br /> elem.setAttribute(hash, val);<br /> 이것을 돌려주세요;<br /> }<br /> } 그 밖의 {<br /> for(해시 키){<br /> 값 = 해시[키];<br /> if(키 === 경로){<br /> 가치 && 가치.조인<br /> &&(value = value.join(' '));<br /> /(NaN| |^$)/.test(값)<br /> &&(값 = 'M 0 0');<br /> }<br /> elem.setAttribute(키, 값) <br /> }<br /> }<br /> 이것을 돌려주세요;<br /> },<br /> CSS: 함수(해시){<br /> for(해시의 var 키){<br /> isIE && 키 == "불투명도"<br /> ? this[0].style['filter'] = "alpha(opacity=" hash[key] * 100 ")"<br /> : this[0].style[key] = hash[key];<br /> }<br /> 이것을 돌려주세요;<br /> },<br /> on: 함수(이벤트 이름, 핸들러){<br /> var self = this;<br /> /*this.element.addEventListener(eventName,function(){<br /> handler.call(자체)<br /> },거짓);*/<br /> this.element['on' eventName] = 함수(e){<br /> e = e || win.event;<br /> handler.call(self,e);<br /> } <br /> 이것을 돌려주세요;<br /> },<br /> 추가: 함수(상위){<br /> if(부모){<br /> 상위.요소<br /> ? parent.element.appendChild(this.element)<br /> : parent.appendChild(this.element)<br /> <br /> } 그 밖의 {<br /> this.graphic.container.appendChild(this.element);<br /> }<br /> 이것을 돌려주세요;<br /> },<br /> addText: 함수(str){<br /> var elem = this.element;<br /> if(elem.nodeName === '텍스트'){<br /> elem.appendChild(doc.createTextNode(str ''));<br /> }<br /> 이것을 돌려주세요;<br /> },<br /> setOpacity : 함수(v){<br /> this.attr('fill-opacity',v);<br /> 이것을 돌려주세요;<br /> },<br /> setSize : 함수(v){<br /> this[0].nodeName==='원'<br /> ? this.attr('r',4 (v===0?0:2))<br /> : this.attr({'획-너비':v});<br /> 이것을 돌려주세요;<br /> },<br /> toFront: 함수() {<br /> this[0].parentNode.appendChild(this[0]);<br /> 이것을 돌려주세요;<br /> }, <br /> 표시: 함수(){<br /> this[0].style.display = '차단';<br /> 이것을 돌려주세요;<br /> },<br /> 숨기기: 함수(){<br /> this[0].style.display = '없음';<br /> 이거 돌려줘; <br /> },<br /> 파괴 : 함수(){<br /> //销毁节点.......................<br /> var 노드 = this[0] || 이거;<br /> node.onmouseover = node.onmouseout = node.onclick = null;<br /> 노드.부모노드<br /> &&node.parentNode.removeChild(노드);<br /> 이것을 돌려주세요;<br /> }<br /> };<br />//------------------------------------------------ ------------------------------------- -------------<br /> //------------------------------------------------ ------------------------------------- -<br /> //vml이라면 메소드 일부 수정 <br /> if(!hasSVG){<br /> //-------------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 /> <br /> //---------------일부 메소드 수정------<br /> 확장(벡터.프로토타입,{<br /> $c : 함수(그래픽,노드이름){<br /> var 이름 = 노드 이름 || '모양' <br /> This.element= this[0] = (이름 === 'div' || 이름 === 'span')<br /> ?doc.createElement(이름)<br /> : doc.createElement('<vml:' 이름 ' class="vml">') <br> This.graphic = 그래픽;<br> 이것을 돌려주세요 <br> },<br> /*on : 함수(이벤트 이름, 핸들러){<br> var self = this;<br> This.element.attachEvent("on" eventName,function(){<br> handler.call(self);<br> });<br> 이것을 돌려주세요;<br> },*/<br> AddText: 함수(txt){<br> 이[0].innerHTML = txt || 이것을 돌려주세요;<br> },<br> setSize : 함수(v){<br> This[0].strokeWeight = v;<br> 이것을 돌려주세요;<br> }, <br> setOpacity : 함수(v){<br> This.opacity.opacity=v;<br> 이것을 돌려주세요;<br> } <br> });<br> }<br> //------------------------------------------------ ------------------------------------- -<br> //드로잉 수업 <br> //------------------------------------------------ ------------<br> win.smipleChart = 함수(){<br> This.init.apply(this,arguments);<br> };<br> smipleChart.list = [];<br> smipleChart.timer = null;<br> smipleChart.lazyLoad = 함수(id){<br> 아이디 = 아이디 || smipleChart.list[id]<br> &&smipleChart.list[id].loadMe();<br> };<br> smipleChart.prototype = {<br> 옵션 : {<br> 차트: {<br> paddingRight: 20,<br> 반경 : 200,<br> 스타일 : {<br> FontFamily : '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif',<br> 글꼴 크기 : '12px',<br> 배경 : '#FFFFFF'<br> }<br> },<br> 제목: {<br> 텍스트 : '',<br> y : 10,<br> 스타일: {<br> 글꼴 계열:'Verdana,Arial,Helvetica,sans-serif',<br> 글꼴 크기:'16px',<br> 글꼴 무게:'bold'<br> }<br> },<br> 부제목: {<br> 텍스트 : '',<br> y : 30,<br> 스타일 : {<br> 글꼴 계열:'Verdana,Arial,Helvetica,sans-serif',<br> 글꼴 크기:'12px', <br> 색상: '#111' <br> }<br> },<br> y단위: {<br> 텍스트 : '',<br> 스타일: {<br> 글꼴 계열:'Verdana,Arial,Helvetica,sans-serif',<br> 글꼴 크기:'12px', <br> 색상: '#111'<br> },<br> 라인번호:10<br> }<br> },<br> init : 함수(컨테이너, 옵션){<br> 클리어타임아웃(smipleChart.timer)<br> var self = this;<br>This.width = 컨테이너.offsetWidth;<br> This.height = 컨테이너.offsetHeight;<br> This.currList = {};<br> This.uuuid = uuuid <br> This.timer = null;<br> //메인 드로잉 그룹의 컬렉션 형태 <br> //{id : {dom:xx,show:true}}<br> This.mainGroup = {};<br> // 분할할 때 다시 그리기와 관련되어 어떤 항목이 숨겨져 있는지 확인하는 데 사용됩니다. <br> This.hideList = {};<br> <br> //svg 안에 그림을 그릴 때는 svg 태그가 있어야 합니다. vml의 경우 div를 사용합니다<br> This.container = hasSVG <br> ? 새로운 벡터().$c(1,'svg')<br> .attr({<br> xmlns : 'http://www.w3.org/2000/svg',<br> 버전: '1.1',<br> 너비: this.width,<br> 높이 : this.height<br> <br> })<br> .css({글꼴 크기 : '12px'})<br> .appendTo(컨테이너)<br> : 새로운 벡터().$c(1,'div')<br> .css({<br> 글꼴 크기 : '12px',<br> : this.width 'px',<br> 높이 : this.height 'px'<br> })<br> .appendTo(컨테이너);<br> <br> This.loading = 컨테이너.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 = '절대';<br> This.loading.style.top = 컨테이너.offsetHeight/2- this.loading.offsetHeight/2 'px';<br> This.loading.style.left = 컨테이너.offsetWidth/2- this.loading.offsetWidth/2 'px';<br> <br> var c = 확장(true,{},this.options),<br> opts = this.opts = extend(true,c,options),<br> 스타일 = 확장(opts.charts.style,{<br> 너비 : this.width,<br> 높이 : this.height<br> });<br> <br> smipleChart.list[this.uuuid] = 이 <br> <br> smipleChart.timer = setTimeout(function(){<br> smipleChart.lazyLoad();<br> },200);<br> <br> },<br> loadMe : 함수(){<br> var opts = this.opts,<br> 자기=이것,<br> 유형 = opts.charts.type;<br> This.container = this.container<br> .on('mouseout',function(e){<br> var elem = e.관련Target || e.toElement;<br> If(!contains(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> //플레이트를 칠할 때 필요한 일부 매개변수를 계산합니다<br> This.getDrawArea()<br> .createTooltip() //프롬프트 정보를 위한 프레임 생성<br> .drawTitle() //제목 그리기<br> > <br> 'line,area,pie'.indexOf(type)>=0<br> &&(opts.charts.panel = 'x');<br> <br> <br> ' 파이,파이'.indexOf(type)<0<br /> &&this.drawPanel();<br /> <br /> <br /> this.drawLegend(opts.legend.type); //画color块条<br /> 변수 유형 = {<br /> 선 : 'drawLine',<br /> 영역 : 'drawArea',<br /> 열 : 'drawColumns',<br /> 파이 : 'drawPie',<br /> 파이 : 'drawPies',<br /> 세그먼트 : 'drawSegment'<br /> }[opts.charts.type];<br /> //开始画图........<br /> 이것[유형]();<br /> <br /> //删除节点<br /> this.loading.parentNode.removeChild(this.loading);<br /> //断开引用<br /> this.loading = null;<br /> <br /> this.container.style.display = '';<br /> setTimeout(함수(){<br /> smipleChart.lazyLoad(( self.uuuid) '');<br /> },10)<br /> <br /> },<br /> createElement : 함수(nodeName){<br /> 새로운 벡터()를 반환합니다.$c(this,nodeName);<br /> },<br /> 그룹: 함수(이름){<br /> return this.createElement(hasSVG?'g':'div').attr('mark',name);<br /> },<br /> getDrawArea : 함수(){<br /> var opts = this.opts,<br /> 너비 = this.width,<br /> 높이 = this.height,<br /> 제목 = opts.title,<br /> subTitle = opts.subTitle,<br /> 지역 = {<br /> // 去掉坐标轴左边的刻titude文本宽titude(预估) 80为定值 左边只留80的间距<br /> AreaWidth : 너비 - 80, <br /> // 去掉坐标轴底下的文本和标线적고도<br /> AreaHeight : 높이 - 40,<br /> //원래 X位置 下면会计算到<br /> startX : 0,<br /> //원래 Y位置 下면会计算到<br /> startY : 0,<br /> //중심적 x坐标 画饼图的时候需要知道圆心的位置<br /> centerX: 0,<br /> //中心的y坐标 画饼图的时候需要知道圆心的位置<br /> centerY: 0<br /> };<br /> //如果主标题存가 减去主标题의 높이 否则 减去10的高<br /> Area.areaHeight -=(title.text !== '')<br /> ? title.y<br /> : 10;<br /> <br /> // 去掉副标题고도<br /> Area.areaHeight -=(subTitle.text !== '')<br /> ? 하위제목.y<br /> : 10<br /> <br /> Area.startX = 80;<br /> Area.startY = 높이 - 40;<br /> <br /> //심심한 삶<br /> Area.centerX = 너비 / 2;<br /> Area.centerY = 높이 / 2; <br /> <br /> //右边留一些空隙<br /> Area.areaWidth -=20;<br /> //上边也留一些间距<br /> Area.areaHeight -=15;<br /> <br /> opts.area = 면적; <br /> <br /> 이것을 돌려주세요;<br /> },<br /> drawTitle : 함수(){ <br /> var opts = this.opts,<br /> 자기 = 이것,<br /> 도착 = [opts.title,opts.subTitle,opts.yUnit],<br /> //3个标题坐标的位置的基本参数<br /> 구성 = [<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 : this.height / 2 - 20 <br /> ],<br /> tpanel = this.group('제목')<br /> .appendTo();<br /> 각각(arr,function(i,title)){<br /> var text = title.text;<br /> If(텍스트){<br /> var elem = self.baseDraw.span(self,{<br /> 'text-anchor':'왼쪽',<br /> x: mathMax(config[i].x - calTextLen(text,title.style).w/2,10),<br /> y : 구성[i].y<br /> },calTextLen(title.text,title.style).h)<br /> .css(제목.스타일)<br /> .addText(텍스트)<br /> .appendTo(tpanel);<br /> <br /> //2이면 세로로 뒤집는다는 뜻입니다<br /> If(i===2){<br /> HasSVG<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 /> 이것을 돌려주세요;<br /> },<br /> //접시 그리는 게 더 귀찮아요<br /> drawPanel : 함수(유형){<br /> var opts = this.opts,<br /> 자기=이것,<br /> 면적 = opts.area,<br /> ChartsType = opts.charts.type,<br /> isSegment =chartType === '세그먼트',<br /> //접시 종류 : 가로판 or 세로판<br /> 유형 = opts.charts.panel || // 베이스 플레이트<br /> var drawAreaWidth = Area.areaWidth,<br /> drawAreaHeight = Area.areaHeight, <br /> //원점 좌표<br /> StartX = Area.startX,<br /> StartY = Area.startY;<br /> var allData = [],<br /> 최소값 = 0,<br /> maxValue = 10,<br /> //줄 수는 1~10까지만 가능합니다<br /> LineNum = mathMin(10,mathMax(opts.yUnit.lineNum,1)),<br /> 직원;<br /> <br /> //모든 데이터 결합<br /> 각각(opts.chartData,function(i,o)){<br /> // 히스토그램이라면 모든 데이터의 합입니다<br /> 세그먼트<br /> ? 각각(o.data,function(j,d){<br /> 모든데이터[j]<br /> ? allData[j] = allData[j] (~~d)<br /> : allData[j] = ~~d;<br /> })<br /> : allData = allData.concat(o.data)<br /> });<br /> <br /> // 모든 데이터를 정렬하여 아래 최대값과 최소값을 찾습니다. <br /> AllData.sort(function(a,b){return a-b});<br /> <br /> //최대값과 최소값 찾기<br /> maxValue = allData[allData.length - 1];<br /> <br /> 각(allData,함수(i,o){<br /> If(o!==null){<br /> minValue = o;<br /> 거짓을 반환합니다.<br /> } <br /> }); <br /> //메인 플레이트 용기<br /> var 패널 = this.group('panel').appendTo();<br /> <br /> var 결과 = xx(minValue,maxValue,lineNum),<br /> 최소 = 결과.분,<br /> 최대 = 결과.최대,<br /> f = 결과.stf;<br /> 세그먼트<br /> &&(최소 = 0) <br /> //그림이 가로좌표 또는 이중좌표임을 나타냅니다<br /> If(type.toLowerCase()==='x'){<br /> //가로좌표 단위 간격<br /> var xPices = drawAreaWidth / opts.xUnit.units.length,<br />//단위 간격의 중심점<br /> 오프셋 = xPices / 2,<br /> <br /> yPices = drawAreaHeight / lineNum;<br /> <br /> //------가로 점 및 텍스트 그리기---------- - -------------------------------------------------<br /> var y = hasSVG?5:10,<br /> t = 1000,<br /> 스팬; <br /> 각각(opts.xUnit.units,function(i,d){ Self.baseDraw.path(self,{<br /> 테두리 : 1,<br /> 테두리색상: '#C0C0C0',<br /> isfill : 거짓,<br /> 경로 : [<br /> 남, <br /> processPoint(startX (i * xPices)), <br /> processPoint(startY), <br /> 엘,<br /> processPoint(startX (i*xPices)),<br /> ProcessPoint(startY 5)<br /> ]<br /> }).<br /> appendTo(패널);<br /> <br /> 스팬 = self.baseDraw.span(self,{<br /> x: startX 오프셋 (i * xPices),<br /> y : 시작Y y,<br /> 'text-anchor':'가운데'<br /> })<br /> .css({<br /> 글꼴 패밀리 : 'Verdana,Arial,Helvetica,sans-serif',<br /> 글꼴 크기 : '12px'<br /> })<br /> .addText(opts.xUnit.units[i])<br /> .appendTo(패널)[0];<br /> <br /> !SVG가 있습니다<br /> &&(span.style.left =parseInt(span.style.left) -span.offsetWidth/2 'px');<br /> <br /> });<br /> //-------------------세로 점과 텍스트 그리기---------- - ------------------------------------------------- - ---------- <br /> for(i=0;i<=lineNum;i ){<br /> Self.baseDraw.path(self,{<br /> 테두리 : 1,<br /> 테두리색상: '#C0C0C0',<br /> isfill : 거짓,<br /> 경로: [M, startX, processPoint(startY - (i * yPices)), L, processPoint(startX drawAreaWidth), processPoint(startY - (i *yPices))]<br /> })<br /> .css({zIndex:-10}) <br /> .appendTo(패널);<br /> <br /> var 스팬 = self.baseDraw.span(self,{<br /> x : startX - 15,<br /> y : startY - i * yPices-calTextLen(min i*f '').h/2,<br /> '텍스트 앵커':'가운데'<br /> })<br /> .css({<br /> 'font-family': 'Verdana,Arial,Helvetica,sans-serif',<br /> '글꼴 크기': '12px',<br /> 너비 : '40px',<br /> 디스플레이: '차단',<br /> textAlign : '오른쪽'<br /> })<br /> .addText((min*t (i*t*f/t)*t)/t '')<br /> .appendTo(패널)[0];<br /> If(!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 /> }그밖에{<br /> //가로좌표 단위 간격<br /> var yPices = drawAreaHeight / (opts.xUnit.units.length),<br /> //단위 간격의 중심점<br /> 오프셋 = Math.round(yPices / 2),<br /> x = hasSVG ? 25 : 70,<br /> y=hasSVG ? 0 : 5,<br /> 스팬<br /> <br /> 각각(opts.xUnit.units,function(i,d){ Self.baseDraw.path(self,{<br /> 테두리 : 1,<br /> 테두리색상: '#C0C0C0',<br /> isfill : 거짓,<br /> 경로 : [<br /> 남<br /> 프로세스포인트(startX-5),<br /> ProcessPoint(startY-i * yPices),<br /> 엘,<br /> 프로세스포인트(startX),<br /> ProcessPoint(startY-i * yPices),<br /> ]<br /> })<br /> .appendTo(패널);<br /> 스팬 = self.baseDraw.span(self,{<br /> x: startX - x,<br /> y : startY -i * yPices-offset-calTextLen(d).h/2 y,<br /> '텍스트 앵커':'가운데'<br /> })<br /> .css({<br /> 글꼴 계열:'Verdana,Arial,Helvetica,sans-serif',<br /> 글꼴 크기:'12px',<br /> 너비 : '60px',<br /> textAlign:'right'<br /> })<br /> .addText(d)<br /> .appendTo(패널) <br /> <br /> });<br /> <br /> <br /> var xPices = drawAreaWidth / lineNum;<br /> <br /> for(var i=0;i<=lineNum;i ){<br /> Self.baseDraw.path(self,{<br /> 테두리 : 1,<br /> 테두리색상: '#C0C0C0',<br /> isfill : 거짓,<br /> 경로 : [<br /> 남, <br /> processPoint(startX (i * xPices)), <br /> processPoint(startY), <br /> 엘, <br /> processPoint(startX (i*xPices)),<br /> processPoint(startY - drawAreaHeight)<br /> ]<br /> }).<br /> appendTo(패널);<br /> <br /> Self.baseDraw.span(self,{<br /> x: startX - calTextLen(min i*f '').w/2 i * xPices,<br /> y : 시작Y,<br /> '텍스트 앵커':'왼쪽'<br /> })<br /> .css({<br /> 글꼴 계열:'Verdana,Arial,Helvetica,sans-serif',<br /> 글꼴 크기:'12px'<br /> })<br /> .addText(min i*f '')<br /> .appendTo(패널); <br /> }<br /> <br /> }<br /> //------------------------------------------------ ------------------------------------- --- <br /> //시작점이 0부터 시작하지 않을 가능성이 높기 때문에 시작점에 0까지의 값을 추가해야 합니다<br /> var jianju =0;<br /> If(min>0)jianju = min;<br />If(max<0)지안주 = max;<br /> <br /> StartX = opts.charts.panel==='x' ? startX :startX-xPices*(min/f);<br /> StartY = opts.charts.panel==='x' ? startY yPices*(min/f) : startY <br /> Opts.draw = {<br /> StartX : startX, // X축 시작점<br /> StartY : startY, // Y축 시작점<br /> xPices : xPices, // X축 각 부분의 너비<br /> yPices : yPices, // Y축 각 부분의 너비<br /> 오프셋 : 오프셋, // X 단일점 중심점 위치 오프셋 <br /> jianjuY : jianju*yPices/f,<br /> jianjuX : jianju*xPices/f, <br /> Feed : f // Y축에 몇 개의 복사본이 있는지 <br /> }<br /> 이것을 돌려주세요;<br /> },<br /> createTooltip: 함수(){<br /> //그룹<br /> This.tipC = this.group('tip')<br /> .css({zIndex: 200,높이:'20px',너비:'20px',위치:'절대'})<br /> .appendTo()<br /> .hide()<br /> //프레임 그리기 baseDraw <br /> This.tipBox = this.baseDraw.lect(this,{arc:0.22,fill:'#fff',border:2,borderColor:'#606060'})<br /> .appendTo(this.tipC)<br /> <br /> //svg의 g는 직접 위치를 지정할 수 있지만 vml의 그룹 렌더링이 너무 느려서 div를 변경해서 여기 부모가 다릅니다<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 /> 글꼴 계열:'Verdana,Arial,Helvetica,sans-serif',<br /> 글꼴 크기:'12px',<br /> 배경: '#FFF'<br /> })<br /> .appendTo(p);<br /> <br /> This.tipText = doc.createTextNode('');<br /> This.tipTxtContainer[0].appendChild(this.tipText);<br /> 이것을 돌려주세요;<br /> },<br /> showTooltip: 함수(obj, x, y,data){<br /> <br /> /*var txt = obj.name ':' 데이터,<br /> 크기 = calTextLen(txt,this.tipTxtContainer[0].style.cssText),<br /> pos = {x : x - (size.w 5 * 2)/2 ,y : y - 32};<br /> This.tipC<br /> .toFront()<br /> .show();<br /> if(hasSVG){<br /> This.tipC.attr({transform:'translate(' pos.x ',' pos.y ')'});<br /> <br /> This.tipBox<br /> .attr({너비 : size.w 5 * 2, 높이 : size.h 5 * 2, 획 : obj.color||'#606060'});<br /> }그밖에{<br /> This.tipC.css({left:pos.x,top:pos.y});<br /> <br /> This.tipBox<br /> .css({너비:size.w 5 * 2,높이 : 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 ':' 데이터,<br /> 자기=이것,<br /> 크기 = calTextLen(txt,this.tipTxtContainer[0].style.cssText),<br /> pos = {x : x - (size.w 5 * 2)/2 ,y : y - 32};<br /> if(hasSVG){ <br /> self.tipBox<br /> .attr({너비 : size.w 5 * 2, 높이 : size.h 5 * 2, 획 : obj.color||'#606060'});<br /> }또 다른{ self.tipBox<br /> .css({너비:size.w 5 * 2,높이 : size.h 5 * 2})<br /> Self.tipBox[0].StrokeColor = obj.color||'#000' <br /> }<br /> This.tipText.nodeValue = txt || <br /> If(this.tipC[0].style.display === '없음'){<br /> HasSVG<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 /> }그밖에{<br /> var 이동 = 함수(t,b,c,d){<br /> return c*(t/=d)*t b;<br /> },<br /> t = 0,<br /> b = self.tipC.attr('pos').split('-'),<br /> c = [위치x,위치y],<br /> d = 5;<br /> <br /> this.timer = setInterval(function(){<br /> if(t<d){<br /> ;<br /> <br /> var x = 이동(t,~~b[0],(~~c[0])-(~~b[0]),d),<br /> y = 이동(t,~~b[1],(~~c[1])-(~~b[1]),d);<br /> hasSVG<br /> ? self.tipC.attr({transform:'translate(' x ',' y ')',pos:x '-' y})<br /> : self.tipC.attr({pos:x '-' y}).css({left:x,top:y});<br /> }그밖에{<br /> clearTimeout(self.timer);<br /> }<br /> },1);<br /> }; <br /> },<br /> hideTooltip: 함수(){<br /> this.tipC.hide();<br /> }, <br /> drawLegend : 함수(유형,다시 그리기){<br /> var self = 이,<br /> 선택 = this.opts,<br /> isLine = opts.charts.type === '라인', <br /> //색깔의 큰소<br /> t_너비 = 20,<br /> t_height = 20,<br /> //块之间的距离<br /> t_space = 5, <br /> 데이터 = opts.chartData,<br /> len = datas.length,<br /> CSS = opts.legend.style,<br /> //最大长titude 如果是纵着的 需要最大的长島<br /> maxWidth = 10,<br /> 최대 높이= 30,<br /> //这个东西的位置<br /> orig_pos = opts.legend.pos?opts.legend.pos:[2,2],<br /> <br /> //显示隐藏组的函数<br /> 핸들 = 함수(i){<br /> var g = self.mainGroup['chart' i],<br /> issegment = opts.charts.type==='세그먼트';<br /> <br /> if(g.show){<br /> g.chart.hide();<br /> g.show = false;<br /> hasSVG<br /> ? this.attr({fill:'#ccc'})<br /> : this[0].style.color = '#ccc';<br /> <br /> <br /> //如果是分段图 是会涉及到重画的<br /> if(문제세그먼트){<br /> self.hideList[i] ='';<br /> var mainGroup = self.mainGroup;<br /> <br /> for(mainGroup의 변수 이름){ <br /> var parent = mainGroup[이름].chart,<br /> 노드 = parent[0].childNodes,<br /> len = node.length;<br /> //销毁图上面画的东西<br /> for(var i = len-1;i>=0;i--){<br> vector.prototype.destroy.call(노드[i])<br> } <br> }<br> //중요한 내용 <br> self.drawSegment();<br> } <br> <br> }그밖에{<br> g.chart.show();<br> g.show = true;<br> hasSVG<br> ? this.attr({fill:'#000'})<br> : this[0].style.color = '#000'<br> <br> if(문제세그먼트){<br> self.hideList 삭제[i];<br> var mainGroup = self.mainGroup;<br> <br> for(mainGroup의 변수 이름){<br> <br> var parent = mainGroup[이름].chart,<br> 노드 = parent[0].childNodes,<br> len = node.length;<br> for(var i = len-1;i>=0;i--){<br> vector.prototype.destroy.call(노드[i])<br> } <br> <br> }<br> self.drawSegment();<br> } <br> }<br> },<br> <br> arr = [];<br> 유형 = 유형 ||'측면'; <br> var legendPanel = self.group('범례')<br> .appendTo();<br> if(type==='측면'){<br> //如果是横着的<br> var top = orig_pos[1] 5,<br> 일 = hasSVG?0:3,<br> 왼쪽 = orig_pos[0] 5; <br> 각(데이터, 함수(i,d){ <br> 왼쪽 = i===0 ? 왼쪽 : t_space 왼쪽;<br> //计算所는 왼쪽의 位置<br> //如果是线性图 按线性图的方式画图<br> if(isLine){<br> self.baseDraw.path(self,{<br> 테두리 : 1.5,<br> borderColor : d.color,<br> isfill : 거짓,<br> 경로 : [<br> 남<br> left.toFixed(0),<br> (상위 10).toFixed(0),<br> 엘<br> (왼쪽 25).toFixed(0),<br> (상위 10).toFixed(0)<br> ]<br> })<br> .appendTo(legendPanel);<br> self.baseDraw[d.dotType || '원'](자신,{<br> x : 왼쪽 12, <br> y : 상위 10위,<br> r : 4,<br> fillColor : d.color<br> })<br> .appendTo(legendPanel);<br> }그밖에{<br> self.baseDraw.ect(self,{<br> 호 : 0.1,<br> 채우기 : d.color,<br> 테두리 : 1,<br> borderColor : d.color,<br> 왼쪽 : 왼쪽,<br> 상단 : 상단,<br> 너비 : t_width 'px',<br> 높이 : t_height 'px' <br> })<br> .appendTo(legendPanel)<br> }<br> <br> 왼쪽 = 왼쪽 t_width 2 t_space;<br> var w = calTextLen(d.name,css).w<br> self.baseDraw.span(self,{<br> '텍스트 앵커':'왼쪽',<br> x : 왼쪽,<br> y : 위<br> })<br> .css(extend(css,{cursor:'pointer'}))<br> .on('클릭',function(){<br> handler.call(this,i);<br> })<br> .addText(d.name)<br> .appendTo(legendPanel);<br> 왼쪽 = 왼쪽 w;<br> });<br> this.baseDraw.lect(this,{<br> 호 : 0.1,<br> 채우기 : '없음',<br> 테두리 : 1.5,<br> borderColor : '#666666',<br> 너비 : 왼쪽 t_space- orig_pos[0],<br> 높이 : 최대 높이,<br> 왼쪽 : orig_pos[0],<br> 상단 : orig_pos[1]<br> })<br> .appendTo(legendPanel);<br> }그밖에{<br> var top = orig_pos[1] 5,<br> 일 = hasSVG?0:3,<br> 왼쪽 = orig_pos[0] 5;<br> 각각(데이터, 함수(i,d)){<br> 상단 = i===0 ? top : t_space top;<br> self.baseDraw.ect(self,{<br> 호 : 0.1,<br> 채우기 : d.color,<br> 테두리 : 1,<br> borderColor : d.color,<br> 왼쪽 : 왼쪽,<br> 상단 : 상단,<br> 너비 : t_width 'px',<br> 높이 : t_height 'px' <br> })<br> .appendTo(legendPanel);<br> var h = calTextLen(d.name,css).h;<br> <br> self.baseDraw.span(self,{<br> '텍스트 앵커':'왼쪽',<br> x : 왼쪽 t_너비 2 t_space,<br> y : 위<br> })<br> .css(extend(css,{cursor:'pointer'}))<br> .addText(d.name)<br> .on('클릭',function(){<br> //如果是多层饼图 不行进隐藏 <br> if(opts.charts.type==='pies')return;<br> handler.call(this,i); <br> })<br> .appendTo(legendPanel); <br> top = 상단 h t_space;<br> maxWidth = Math.max(maxWidth,calTextLen(d.name,css).w);<br> }); <br> this.baseDraw.lect(this,{<br> &</div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
