javascript smipleChart 간단한 아이콘 class_javascript 기술

편집기로 인해 코드가 손상될 수 있으므로 온라인 데모를 제공합니다 http://demo.jb51.net/chengxu/smipleChart.htm

코드 복사 코드는 다음과 같습니다. smipleChart

.cc{ height:450px; width:800px; border:1px solid #999; position:relative; margin:20px; }

(function(doc,undefine){ var win = this, hasSVG = win.SVGAngle || doc.implementation.hasFeature("http://www.w3.org/TR/SVG11/ feature#BasicStructure", "1.1"), isIE = /msie/i.test(navigator.userAgent) && !win.opera, path = hasSVG?'d':'path', seal = hasSVG?'z':'e', math = Math, mathRound = math.round, mathFloor = math.floor, mathCeil = math.ceil, mathMax = math.max, mathMin = math.min, mathAbs = math.abs, mathCos = math.cos, mathSin = math.sin, M = 'M', L = 'L';

win.$ = function(Id){ return document.getElementById(Id) }; function(){ var target = 인수[0] || {}, i = 1, length = 인수.length, deep = true, if ( typeof target === "boolean" ) { deep = target; target = 인수[1] || {}; i = 2; } if ( typeof target !== "object" && Object.prototype. toString.call(target)!="[객체 함수]") target = {}; for(;i if ( (옵션 = 인수[ i ]) ! = null ) for(옵션의 var 이름){ var src = 대상[ 이름 ], copy = 옵션[ 이름 ]; if ( target === copy ) 계속; if ( deep && copy && typeof copy === "object" && !copy.nodeType ){ target[ name ] = 인수.callee( deep, src || ( copy.length != null ? [ ] : { } ), 복사 ); } else if(copy !== undefine) target[ name ] = copy; }

} 반환 대상; };

win.each = 함수(객체, 콜백, args) { var 이름, i = 0, 길이 = object.length; if ( args ) { args = Array.prototype.slice.call(arguments).slice(2); if ( 길이 === 정의되지 않음 ) { for ( 객체의 이름 ) if ( callback.apply( 객체[ 이름 ],[name,object[ 이름 ]].concat(args) ) = == false ) break; } else for ( ; i if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) // break; } else { if ( 길이 === 정의되지 않음 ) { for ( 객체의 이름 ) if ( callback.call( 객체[ 이름 ], 이름, 객체[ 이름 ] ) == = 거짓) break; } else for ( var value = object[0]; i } 객체 반환; }; //---------------------------------- ------------------ function processPoint( x ){ return isIE ? ~~x.toFixed(0) : ~~x.toFixed(0) 0.5; }; function calTextLen(txt, cssStr){ varspan = doc.createElement('span'); if(cssStr){ cssStr 유형 === '문자열' ? span.style.cssText = cssStr : 확장(span.style,cssStr); }else{ extend(span.style,{ fontSiz: '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); return {w:너비,h:높이}; }; 함수 각도(r,center,o,jingdu){ var hudu = Math.PI*2*(o/360), x = center[0] r*Math.sin(hudu) , y = center[1] -r*Math.cos(hudu); return [x.toFixed(jingdu||0),y.toFixed(jingdu||0)]; }

function xx(a,b,lineNum){

var t = 10000; var 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],function(i,o){ arr[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],function(i,o){ arr[i]= o*c; }); }

//上side找到间隔后 找到间隔中最接近的一个 each(arr,function(i,o){ if(stf v = o; 거짓 반환 } }); //a 是最작은 //b是最大 적인 a = (a*t-mathAbs((a%v)*t))/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){ //让图比较靠中间 /*while(num!==0){ num%2===0 ? a = (a*t-v*t)/t : b = (b*t v*t)/t; 번호--; }*/

//坐标比较整数化 if(a!=0&&num!=0){ while(a!=0&&num!=0){ a = (a*t-v*t)/t; 번호--; if((a*t-v*num*t)/10000>0&&a ===0) break; } }

if(num!=0){ while(num!==0){ b = (b*t v*t)/t 번호--; } }

}else{ //让图比较靠中间 /*while(num!==0){ num%2=== 0 ? b = (b*t v*t)/t : a = (a*t-v*t)/t num--; }*/ //坐标比较整数化 if(b while(b!=0&&num!=0){ b = (b* t v*t)/t; 번호--; if((b*t v*num*t)/t break; } } if(num!=0){ while(num!==0){ a = (a*t-v*t)/t num--; } }

} return {min:a,max:b,stf:v}; } //---------------------------- ------------------------------------- ------- //对svg vml元素的一些创建 修改属性 样式 删除 == 一些的操작품 win.Vector = function( ){}; win.Vector.prototype = { $c : function(graphic,nodeName){ this.element = this[0] = doc.createElementNS('http://www.w3.org/ 2000/svg', 노드이름); this.graphic = 그래픽; 이것을 돌려주세요; }, attr: function(hash,val){ var elem = this.element, key, value; if(해시 유형 === '문자열'){ if(val === 정의되지 않음){ return elem.getAttribute(hash); }else{ elem.setAttribute(hash, val); 이것을 돌려주세요; } } else { for(해시 키){ 값 = 해시[키]; if(key === path){ value && value.join &&(value = value.join(' '));

/(NaN| |^$)/.test(value) &&(value = 'M 0 0'); } elem.setAttribute(key, value) } } 이것을 반환합니다. }, css: function(hash){ var str = ''; for(var key in hash){ if(isIE && key == "opacity"){ this.element.style['filter'] = "alpha(opacity=" hash[key] * 100 ")"; }else{ this.element.style[key] = hash[key]; } } 이것을 반환하세요. }, on: function(eventName, handler){ var self = this; this.element.addEventListener(eventName,function(){ handler.call(self) },false); 이것을 돌려주세요; }, appendTo: function(parent){ if(parent){ parent.element ? parent.element.appendChild(this.element) : parent.appendChild(this.element)

} else { this.graphic.container.appendChild(this.element); } 이것을 반환하세요. }, addText: function(str){ var elem = this.element; if(elem.nodeName === 'text'){ elem.appendChild(doc.createTextNode(str.toString() || ' ')); } 이것을 반환하세요. }, setOpacity: function(v){ this.attr('fill-opacity',v) }, toFront: function() { this.element .parentNode.appendChild(this.element) 이것을 반환합니다. }, 표시: function(){ this.element.style.display = 'block'; 이것을 돌려주세요; }, hide: function(){ this.element.style.display = 'none'; 이것을 돌려주세요; } }; //---------------------------------- ------------------------------------- ----------------

//------- ------------------------------------- ---------------- //如果是vml修改其中的一些방법 if(!hasSVG) { //-------------创建vml环境------ doc.createStyleSheet().addRule( ".vml", "동작: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");

//-------------修改一些방법------ extend(Vector.prototype, { $c : function(graphic,nodeName){ var name = nodeName || 'shape'; this.element= this[0] = (name === 'div' || 이름 === 'span') ? doc.createElement(name) : doc.createElement(' ') this.graphic = graphic; return this; }, on : function(eventName, handler){ var self = this this.element.attachEvent("on" eventName,function() { handler.call(self); }); return this; }, addText : function(txt){ var elem = this.element; >elem.innerHTML = txt || return this; }, setOpacity: function(v){ this.opacity.opacity=v; }); } //---------------------------- ------------------------------------- --------

//画图类 //--------- ------------------------------------- - win.smipleChart = function(){ this.init.apply(this,arguments); }; smipleChart.prototype = { 옵션 : { 차트 : { paddingRight : 20, radius : 200, style : { fontFamily : '"Lucida Grande" , "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', fontSize: '12px', 배경: '#FFFFFF' } }, 제목: { 텍스트: '', y: 10, 스타일: { fontFamily:'Verdana,Arial,Helvetica,sans-serif', fontSize:'16px', fontWeight:'bold' } }, subTitle: { text: '', y: 30, style: { fontFamily:'Verdana, Arial,Helvetica,sans-serif', fontSize:'12px', color: '#111' } }, yUnit: { text: '', 스타일: { fontFamily:'Verdana,Arial,Helvetica,sans-serif', fontSize:'12px', color: '#111' }, lineNum :10 } }, init : function(container,options,width,height){ this.width = width || 컨테이너.오프셋폭; this.height = 높이 || 컨테이너.오프셋높이; this.mainGroup = {};

//svg 도면에 svg 태그가 있어야 합니다. vml은 div를 사용합니다 this.container = hasSVG ? new vector().$c(1,'svg') 🎜 >.attr({ xmlns : 'http://www.w3.org/2000/svg', 버전 : '1.1' }) .css({fontSize : ' 12px '}) .appendTo(container).element : 새로운 벡터().$c(1,'div') .css({ fontSize : '12px', 너비 : this.width 'px', height : this.height 'px' }) .appendTo(container).element; var c = extend(true,{}, this .options) var opts = this.opts = extend(true,c,options), style = extend(opts.charts.style,{ width : this.width, height : this.height });

//플레이트를 그릴 때 필요한 일부 매개변수를 계산합니다. this.getDrawArea() .createTooltip() //Create 프롬프트 메시지 프레임 .drawTitle() //제목 그리기 //플레이트 그리기

if('line,area,pie'.indexOf(opts.charts.type)>=0 ) { opts.charts.panel = 'x'; }

if(' Pie,pies'.indexOf(opts.charts.type) this . drawPanel(); }

this.drawLegend(opts.legend.type); //색상 블록 막대 그리기

var type = { line : 'drawLine' area : 'drawArea', columns : 'drawColumns', pie : 'drawPie', pies : 'drawPies', segment : 'drawSegment' }[ opts .charts.type]; this[type]();

}, createElement : function(nodeName){ return new vector().$c(this,nodeName ) ; }, 그룹: function(name){ return this.createElement(isIE?'div':'g').attr('mark',name), getDrawArea : function(){ var opts = this.opts, width = this.width, height = this.height, title = opts.title, subTitle = opts.subTitle, area = { // 좌표축 왼쪽의 눈금 텍스트 너비 제거(추정) 80은 고정 값이고 왼쪽의 간격은 80만 남깁니다. areaWidth : width - 80, // 좌표축 아래의 텍스트 및 표시 높이를 제거합니다. areaHeight : height - 40, //원점의 X 위치는 startX 아래에서 계산됩니다. 0, //원점의 Y 위치는 아래에서 계산됩니다. startY: 0, //원형 차트를 그릴 때 원의 중심 위치를 알아야 합니다. 🎜>centerX: 0, //원형 차트를 그리기 위한 중심의 y 좌표입니다. centerY: 0 }; //메인 제목이 있으면 메인 제목의 높이를 빼고, 그렇지 않으면 높이에서 10을 뺍니다. area.areaHeight -= (title.text !== '') ? : 10;

// 자막 높이 제거 area.areaHeight -=(subTitle.text !== ' ') ? subTitle.y : 10

area.startX = 80; area.startY = 높이 - 40;

//원의 중심 위치 area.centerX = 너비 / 2; Area.centerY = height / 2;

//오른쪽에 약간의 공간을 남겨두세요 area.areaWidth -=20 //상단에도 약간의 공간을 남겨두세요 area .areaHeight -=15;

opts.area =

return this;

}, drawTitle: function(){ var opts = this.opts, self = this, arr = [opts.title,opts.subTitle,opts.yUnit], //세 개의 타이틀 좌표 위치에 대한 기본 매개변수 config = [ { x : this.width / 2, y : opts.title.y }, { x : this.width / 2, y : opts.subTitle.y }, { x : opts.yUnit.x, y : this.height / 2 - 20 } ], tpanel = this.group('title') .appendTo();

each(arr,function(i,title){ var text = title.text; if( text){ var elem = self.baseDraw('span',{ 'text-anchor':'left', x : mathMax(config[i].x - calTextLen(text,title) .style).w/2,10), y : config[i].y },calTextLen(title.text,title.style).h) .css(title.style) .addText(text) .appendTo(tpanel);

//2이면 세로로 뒤집는다는 뜻입니다. if(i= ==2 ){ hasSVG ? elem.attr({transform : 'rotate(270, ' (opts.yUnit.x 10) ', ' self.height / 2 ')'}) : (elem .element.style.filter ='progid:DXImageTransform.Microsoft.BasicImage(rotation=3)') }

} }) 이것을 반환합니다 },

//접시 그리는 게 더 귀찮다 drawPanel: function(type){ var opts = this.opts, self = this, area = opts.area, isSegment= opts.charts.type==='segment', //플레이트 유형은 가로 또는 세로입니다. type = opts.charts.panel ||

// 바닥판 var drawAreaWidth =area.areaWidth, drawAreaHeight =area.areaHeight, //원점 좌표 startX =area.startX, startY = Area.startY;

var allData = [], minValue = 0, maxValue = 10, lineNum = mathMax(opts.yUnit.lineNum,2), min = opts.yUnit.min, staff;

//모든 데이터 결합 each(opts.chartData,function(i,o){ isSegment ? (o.data,function(j,d){ allData[j] ? allData[j] = allData[j] (~~d) : allData[j] = ~~d ; }) : allData = allData.concat(o.data) })

//아래 최대값과 최소값을 찾기 위해 모든 데이터를 정렬합니다. allData .sort(function(a,b){return a-b});

//최대값과 최소값 찾기 maxValue = allData[allData.length - 1]; >각 (allData,function(i,o){ if(o){ minValue = o; return false; } });

//메인 플레이트 컨테이너 this.panel = this.group('panel').appendTo()

var dd = xx(minValue,maxValue , lineNum), min = dd.min, max = dd.max, f = dd.stf;

//가로좌표가 그려짐을 나타냅니다. if( type.toLowerCase()==='x'){ //Abscissa 단위 간격 var xPices = drawAreaWidth / opts.xUnit.units.length, //단위 간격의 중심점 offset = xPices / 2,

yPices = drawAreaHeight / lineNum

//--------- -------- ------------가로 점과 텍스트 그리기------------ ------- ------------- 각(opts.xUnit.units,function(i,d) { self.baseDraw( '경로',{ 경계 : 1, borderColor : '#C0C0C0', isfill : false, 경로 : [ M, processPoint(startX (i * xPices )), processPoint(startY), L, processPoint(startX (i*xPices)), processPoint(startY 5) ] }). appendTo(self.panel); var y = hasSVG?5:10, span = self.baseDraw('span',{ x : startX 오프셋(i) * xPices), y : startY y, 'text-anchor':'middle' }) .css({ fontFamily:'Verdana,Arial,Helvetica,sans- serif', fontSize: '12px' }) .addText(opts.xUnit.units[i]) .appendTo(self.panel) .element

//vml에는 x y가 없습니다. 따라서 개념을 단순화하려면 나중에 범위를 사용할 때 범위 너비의 절반을 줄여야 합니다. !hasSVG span.style.left = parseInt(span.style.left ) -span.offsetWidth/2 'px'

}) //------------ -------세로 점과 텍스트 그리기 ------------------------- ------------ -------- for(i=0;i self.baseDraw('path',{ border : 1, borderColor : '#C0C0C0', isfill : false, path : [M, startX, processPoint(startY - (i * yPices)), L, processPoint(startX drawAreaWidth), processPoint(startY - (i *yPices))] }) .css({zIndex:-10}) .appendTo( self.panel);

varspan = self.baseDraw('span',{ x : startX - 15, y : startY - i * yPices-calTextLen(min i*f ' ').h/2, 'text -anchor':'middle' }) .css({ 'font-family':'Verdana,Arial,Helvetica,sans-serif ', '글꼴 크기':' 12px', 너비: '40px', 디스플레이:'블록', textAlign:'right' }) . addText((min*1000(i*1000*f /1000)*1000)/1000 '') .appendTo(self.panel) .element

if(!hasSVG) { span.style.top =parseInt(span.style.top)span.offsetHeight/2 -5 'px'; span.style.left =parseInt(span.style.left) -35'px ' } }

}else{ //Abscissa 단위 간격 var yPices = drawAreaHeight / (opts.xUnit.units.length), //The 단위 간격의 중심점 offset = Math.round(yPices / 2)

var x = hasSVG?25:70, vv = hasSVG?0: 5;

각(opts.xUnit .units,function(i,d){

self.baseDraw('path',{ border : 1, borderColor : '#C0C0C0', isfill : false, path : [ M, processPoint(startX-5), processPoint(startY-i * yPices), L, processPoint(startX), processPoint( startY-i * yPices), ] }) .appendTo(self.panel) varspan = self.baseDraw( 'span',{ x : startX - x , y : startY -i * yPices-offset-calTextLen(d).h/2 vv, 'text-anchor':'middle' }) .css({ fontFamily:'Verdana,Arial,Helvetica,sans-serif', fontSize:'12px', 너비: '60px', textAlign :'right' }) .addText(d) .appendTo(self.panel)

})

var xPices = drawAreaWidth / lineNum;

for(var i= 0;i self.baseDraw('path',{ border : 1, borderColor : '#C0C0C0 ', isfill : false, path : [ M, processPoint(startX (i * xPices)), processPoint(startY), L, processPoint (startX (i*xPices)), processPoint (startY - drawAreaHeight) ] }) appendTo(self.panel)

varspan = self.baseDraw ('span',{ x : startX - calTextLen(min i*f '').w/2 i * xPices, y : startY, 'text-anchor':'left' }) .css({ fontFamily:'Verdana,Arial,Helvetica,sans-serif', fontSize:'12px' }) .addText(최소 i* f '') .appendTo(self.panel ) .element }

}

//------------ ---------- -------------- ---------- ------------- //지역 지도를 그릴 때 필요한 것 시작점 //좌표가 음수일 가능성이 높고 0에서 시작하지 않을 수 있으므로 jianju var jianju =0 if(min>0)jianju = min; 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축 각 부분의 너비 offset : offset, // X 단일 중심점 위치의 오프셋 jianju : jianju*yPices/f, feed : f // Y축에 몇 개의 복사본이 있는지 }; 반납하세요 },

createTooltip: function(){ //그룹 this.tipC = this.group('tip') .css({zIndex: 200,height:'20px ',width:'20px',position:'absolute'}) .appendTo() .hide()

//상자 그리기 baseDraw this.tipBox = this. baseDraw('direct',{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',{fill:'#000000',x:5,y:19,'text-anchor':'left'}) .css({ fontFamily:'Verdana, Arial,Helvetica,sans-serif', fontSize:'12px', 배경: '#FFF' }) .appendTo(p)

this.tipText = doc.createTextNode(''); this.tipTxtContainer[0].appendChild(this.tipText); return this; }, showTooltip: function( obj, x, y, 데이터){ var txt =obj.name ((' : ' data)||''), size = calTextLen(txt,this.tipTxtContainer[0].style.cssText ), pos = {x : x - (size.w 5 * 2)/2 ,y : y - 32} this.tipC .toFront() .show() ;

if(hasSVG){ this.tipC.attr({transform:'translate(' pos.x ',' pos.y ')'})

this .tipBox .attr({너비 : size.w 5 * 2, 높이 : size.h 5 * 2, 스트로크 : obj.color||'#606060'}) }else{ this.tipC.css({left:pos.x,top:pos.y});

this.tipBox .css({width:size.w 5 * 2,height : size. h 5 * 2}) this.tipBox[0].StrokeColor = obj.color||'#606060'; }

this.tipText.nodeValue = txt || }, hideTooltip: function(){ this.tipC.hide(); },

drawLegend : function(type,redraw){ var self = this, opts = this.opts, //컬러 블록의 크기 t_width = 20, t_height = 20, //블록 사이의 거리 t_space = 5, datas = opts.chartData, len = datas.length, css = opts.legend.style,

//최대 길이 세로일 경우 최대 길이는 필수입니다 maxWidth = 10 , maxHeight = 30, //이 것의 위치 orig_pos = opts.legend.pos?opts.legend.pos:[2,2],

//그룹 기능 표시 및 숨기기 handle = function(i){ var g = self.mainGroup['chart' i] if(g.show){ g.chart.hide(); g.show = false hasSVG ? this.attr({fill:'#ccc'}) : this[0].style .color = '#ccc' }else{ g.chart.show(); g.show = hasSVG ? 000'}) : this[ 0].style.color = '#000' } },

arr = []

type = type ||'측면'; var legendPanel = self.group('Legend') .appendTo() if(type===='측면'){ //If 수평 var top = orig_pos[1 ] 5, th = hasSVG?0:3, left = orig_pos[0] 5 each(datas, function(i,d){ left = i===0 ? left : t_space left //모든 왼쪽의 위치 계산 self.baseDraw('direct',{ arc : 0.1, fill : d.color, border : 1, borderColor : d.color, left : 왼쪽, top : top, width : t_width 'px', height : t_height 'px' }) .appendTo(legendPanel); left = left t_width 2 t_space var w = calTextLen(d.name,css).w self.baseDraw ('span',{ 'text-anchor':'left', x : 왼쪽, y : 위쪽 }) .css(extend(css,{cursor :'포인터'})) .on ('click',function(){ if(opts.charts.type==='pies')return; handle.call(this,i ); }) .addText (d.name) .appendTo(legendPanel) left = left w; 'direct',{ arc: 0.1, fill: 'none', border: 1.5, borderColor: '#666666', width: left t_space- orig_pos[0] , height : maxHeight, left : orig_pos[0], top : orig_pos[1] }) .appendTo(legendPanel) }else{

var top = orig_pos[1] 5, th = hasSVG?0:3, left = orig_pos[0] 5 each(datas, function(i,d){ top = i===0 ? top : t_space top; self.baseDraw('ret',{ arc : 0.1, fill : d.color, border : 1, borderColor : d.color, left : 왼쪽, top : top, width : t_width 'px', height : t_height 'px' }) . AppendTo(legendPanel);

var h = calTextLen(d.name,css).h;

self.baseDraw('span',{ 'text-anchor':' left', x : 왼쪽 t_width 2 t_space , y : 위쪽 }) .css(extend(css,{cursor:'pointer'})) .addText( d.name) .on('click',function(){ if(opts.charts.type==='pies')return; handle.call(this,i); }) .appendTo(legendPanel) ; top = top h t_space; maxWidth = Math.max(maxWidth,calTextLen(d.name,css).w); ; this.baseDraw('direct', { arc : 0.1, fill : 'none', border : 1.5, borderColor : '#666666', width : maxWidth 22 15, 높이 : 상단 t_space -orig_pos[1], 왼쪽 : orig_pos[0], 상단 : orig_pos[1] }) .appendTo(legendPanel) ; } 이것을 반환하세요. }, drawLine : function(){ var self = this, opts = this.opts; draw = opts.draw; each(opts.chartData,function(i,o) ){ var id = 'chart' i, lineGroup = self.group(id) .appendTo() self.mainGroup[id]={chart:lineGroup,show:true }; var 경로 = [M], data = o.data, line

for(var i = 0; i if( data[i] == null){ //이 데이터가 존재하지 않고 첫 번째 데이터 경로가 아닌 경우 M을 추가하세요. if(path[path.length - 1] !== M ) path.push(M); }else{ //첫 번째 데이터 경로가 아닌 경우 L i !== 0 && path.push("L" 추가 ); //이전 항목이 null이고 첫 번째 항목이 아닌 경우 L if(i > 0 && data[i - 1] == null) path.pop을 제거합니다. (); //점의 x, y 위치 계산 var x = draw.startX draw.offset (i * draw.xPices), y = draw.startY - (data[i ] * (draw.yPices) / draw.feed)); if(isIE){ x =parseInt(x); y=parseInt(y); .push(x); path.push(y); //점 그리기 self.baseDraw('circle',{ x : x, y : y, r : 4, fillColor : o.color }) .attr({data:data[i]}) .css({zIndex:10,cursor:'pointer' }) .on ('mouseover',(function(o,x,y){ return function(){ hasSVG ? (this[0].setAttribute('r', '5'),line.attr({'획-너비':2.5})) : (this[0].스트로크웨이트 = 3,라인[0].스트로크 웨이트 = 2.5) self.showTooltip (o,x,y, this.attr('data')); }

})(o,x,y)) .on('mouseout',function() { hasSVG ? (this[0].setAttribute('r','4'),line.attr({'Stroke-width':1.5})) : (this[0] .스트로크웨이트 = 1,라인[ 0].스트로크웨이트 = 1.5); self.hideTooltip() }) .on('click',function(){lineGroup.toFront(); }) .appendTo(lineGroup );

} }; //폴리라인 그리기 line = self.baseDraw('path',{ border : 1.5, borderColor : o.color , isfill : false, path : path }) .css({zIndex:5}) .on('mouseover',function (){ hasSVG ? this.attr({'스트로크-너비':2.5}) : (this[0].strokeWeight = 2.5) .on('mouseout',function() { hasSVG ? this.attr({'Stroke-width':1.5}) : (this[0].trokWeight = 1.5); }) .on(' click',function(){lineGroup.toFront(); }) .appendTo(lineGroup) }) return this; , drawArea : function(){ var self = this, opts = this.opts, draw = opts.draw; each(opts.chartData,function(i,o) ){ var id = 'chart ' i, areaGroup = self.group(id).appendTo(); self.mainGroup[id] = {chart:areaGroup,show:true}; 🎜>//경로가 2개 있는데 그 중 하나는 영역의 경로가 선의 경로입니다.

varareaPath = [M, (draw.startX draw.offset).toFixed(0), (draw .startY-draw.jianju).toFixed(0)], path = [M], data = o.data, line for(var n=0,l=data; .length;n / /데이터가 비어 있는 경우 var len =areaPath.length if( data[n] === null){ // 이전 것이 m이 아니면 다시 그리므로 M if(path[path.length - 1] !== M) path.push(M)

//If 첫 번째 또는 이전 것은 황소입니다. 시작점 좌표를 수정하세요 len===3 &&(areaPath[1] = (draw.startX (n 1)*draw.xPices draw.offset).toFixed( 0));//이전의 경우 영역 지도의 끝 식별자가 아닙니다. 첫 번째 데이터가 null이면 다음 작업이 수행되지 않습니다. if(areaPath[len - 1 ] !== seal&&n!==0){ areaPath=areaPath.concat( [ areaPath[len - 2], (draw.startY-draw.jianju).toFixed(0), seal ]); } }else{ n !== 0 && path.push(L) areaPath.push(L)// 이전 데이터가 null인 경우 이전 L을 제거합니다 if(n &gt ; 0 && data[n - 1] == null){ path.pop() // 첫 번째는 null이고 L은 삭제되지 않습니다. n!==1&&areaPath.pop() }

var x = draw.startX draw.offset (n * draw.xPices ), y = draw.startY - ((data[n]) * (draw.yPices / draw.feed)) if(isIE){ x = parseInt(x); >y = parsInt(y); } path.push(x); path.push(y)

if(areaPath[len - 1] = == 봉인){ areaPath = AreaPath.concat([ M, x , parseInt(draw.startY-draw.jianju), L, x, y ]); }else{ areaPath.push(x) ; areaPath.push(y)

// 마지막 지점 if(n === l - 1){

areaPath.push(x)

areaPath.push(parseInt(draw.startY-draw.jianju) ); }

//점 그리기 self.baseDraw('circle',{ x : x, y : y, r : 4, fillColor : o.color }) .attr({data:data[n] }) .on('mouseover',(function(o,x,y){ return function(){ hasSVG ? (this[0].setAttribute('r', '5'),line.attr({'Stroke-width':2.5})) : ( this[0].스트로크웨이트 = 3,라인[0].스트로크웨이트 = 2.5); self.showTooltip (o,x,y,this.attr('data')) }

})(o,x,y)) .on('mouseout',function() { hasSVG ? (this[0].setAttribute('r','4') ,line.attr({'Stroke-width':1.5})) : (this[0] .스트로크웨이트 = 1,라인[0].스트로크웨이트 = 1.5) self.hideTooltip() }) .on('click',function(){areaGroup.toFront(); }) .css({zIndex:10,cursor:'pointer'}) .appendTo(areaGroup);

} }

areaPath.push(seal)

self.baseDraw('path',{ border : 0, isfill : true, fillColor : o.color, 불투명도 : 0.5, 경로 :areaPath }) .css({zIndex:5}) .appendTo(areaGroup);

line = self.baseDraw('path',{ border : 2.5, borderColor : o.color, isfill : false, path : path } ) .on('mouseover',function(){ hasSVG ? this.attr({'Stroke-width':2.5}) : (this[0].StrokeWeight = 2.5 ); }) .on('mouseout',function(){ hasSVG ? this.attr({'획-너비':1.5}) : (this[ 0].StrokeWeight = 1.5); }) .on('click',function(){areaGroup.toFront(); }) .css({zIndex:-1}) .appendTo(areaGroup); }); 이것을 돌려주세요; }, drawColumns : function(){ var self = this, opts = this.opts, draw = opts.draw, chartData = opts.chartData, dataLen = ChartData.length, //多个柱子 间的间距 columnSpace = 3, //一个位置中 所有间隔之와 columnPadding = columnSpace * dataLen columnSpace, //每个柱子의 크기 columnSize = self.opts.charts.panel==='x' ? Number(((draw.xPices -columnPadding) / dataLen).toFixed(0)) : Number(((draw.yPices -columnPadding) / dataLen).toFixed(0));

각(chartData, function(i,o){ var data = o.data, id = 'chart' i, isX = opts.charts.panel=== 'x', colGroup = self.group(id).appendTo(), //每个点开始的位置 start = self.opts.charts.panel==='x' ? draw.startX 컬럼스페이스 i*(columnSize 컬럼스페이스) : draw.startY 컬럼스페이스 i*(columnSize 컬럼스페이스)

self.mainGroup[id] = {chart:colGroup,show:true};

for(var j = 0,l=data.length; j if(data[j]===null) continue;横盘子 if(isX){ var x = Number((start j *draw.xPices ).toFixed(0)), y = Number((draw.startY).toFixed(0 )), height = Number((data[j] * (draw.yPices / draw.feed)).toFixed(0)), path = [ M, x, y, L, x, y -height, L, x 컬럼 크기, y - 높이, L, x 컬럼 크기, y, seal ]; var pos = [x 컬럼 크기/2,data[j]>0?y-height:draw.startY] }else 🎜> var x = Number((draw.startX).toFixed(0)), width = Number((data[j]*((draw.xPices / draw.feed))).toFixed( 0)), y = Number((start - (j 1) *draw.yPices ).toFixed(0)), path = [ M, x, y , L, x 너비, y , L, x 너비, y 컬럼 크기, L, x , y 컬럼 크기, 인감 ]; var pos = [draw.startX 너비/2,y-columnSize]; }

self.baseDraw('path',{ border : 0, isfill : true, fillColor : o.color, opacity : 1, 경로 : 경로 }) .attr({data:data[j]}) .css({zIndex:5,cursor:'pointer'}) .on(' mouseover',(function(x,y,d){

return function(){

this.setOpacity(0.85);

self.showTooltip(o,x ,y,this.attr('data')) }

})(pos[0],pos[1],data[j])

) .on('mouseout',(function(x,y){ return function(){ this.setOpacity(1); self.hideTooltip(); } })(x,y)) .appendTo(colGroup);

} }); 이것을 돌려주세요; }, drawPie : function(){ var self = this, opts = this.opts, area = opts.area, rx =area.centerX, ry =area.centerY, inc = 0, total = 0, data = [], cumulative = -0.25, // 맨 위에서 시작; circ = 2 * Math.PI, radiu = mathMin(opts.charts.radius,mathMin(area.areaWidth/2,area.areaHeight/2)), fraction, half_fraction;

each(opts.chartData,function(i,o){ o.data 유형 ==='객체' ? (data.push((function(o){ var all =0; for(var i in o) all =~~o[i] 모두 반환 })(o.data))) :data.push (mathAbs(o.data))

});

각(data,function(i,o){ total = total o; });

각(data,function(i,o){ var PieGroup = self.group('chart' i).appendTo(), s = inc/total*360, e = (inc o)/total*360, name = opts.chartData[i].name, size = calTextLen(name), dot = angle(radiu,[rx,ry] ,s (e-s)/2,2), x = rx (dot[0]-rx)/2 - size.w/2, y = ry (dot[1]-ry)/2 - size.h/2, len = Math.sqrt((x-rx)*(x-rx) (y-ry)*(y-ry)), moveDisplacement = ((x-rx )*8/len) ',' ((y-ry)*8/len);

inc = inc o

var value = Number(o); = 합계 ? 값 / 합계 : 0; half_fraction = 합계 ? (값 / 2) / 합계 : 0

var start = 누적 * circ; 누적 = 분수;

var end = 누적 * 원

self.baseDraw('pie',{ config : opts.chartData[i], s : 시작 , e : end, r : radiu, innerR : 0 }) .css({zIndex:5,cursor:'pointer'}) .attr( {move:moveDisplacement}) .on('mouseover',function(){ this.setOpacity(0.85); }) .on('mouseout',function(){ this.setOpacity(1); }) .on('click',function(){ var m = this.attr('move') if(m.indexOf(' ')>0){ hasSVG ? this.attr({ 변환: 'translate(0,0)' }) : this.css({ 왼쪽: '0px', top: '0px' }) this.attr({move:m.replace(' ','')})

}else{ var s= m.split( ','); hasSVG ? this.attr({ transform: 'translate(' m ')' }) : this.css({ 왼쪽: s[0] 'px', top : s[1] 'px' })

this.attr({move:m ' '}) } }) .appendTo(pieGroup);

self.mainGroup['chart' i] = {chart:pieGroup,show:true};

self.baseDraw('span',{ x : x, y : y, fill : '#fff', 'text-anchor':'left ' }) .css({ fontFamily : 'Verdana,Arial,Helvetica,sans-serif', fontSize : '12px', 위치 : 'absolute', color : '#fff', zIndex : 10 }) .addText(name) .appendTo(pieGroup); });

}, drawPies : function(){

var self = this, opts = this.opts, area = opts.area, rx =area.centerX, ry =area.centerY, total = 0, data = [], chartData = opts.chartData, cumulative = -0.25, // 시작 위치 맨 위; circ = 2 * Math.PI, radiu = mathMin(opts.charts.radius,mathMin(area.areaWidth/2,area.areaHeight/2)), fraction, half_cumulative, 반분수;

각(chartData,function(i,o){ 각(o.data,function(j,d){ data[j] ? data[j] =mathAbs (d) : 데이터[j] =mathAbs(d) })

}); //看多少个数据来生成来生成内半径 var len = data.length, innerSpace = radiu / 10; Rpice = (radiu - innerSpace) / len, piesGroup = this.group('pies').appendTo();

각(data,function(i,d){ var inc = 0 ; if(d===0) return; 각(chartData,function(j,o) ){ if(~~o.data[i]===0)return; var outR = radiu - Rpice * i, innerR = radiu - Rpice * (i 1), value = ~~o.data[i], fraction = value / d; half_fraction = (value/2)/d, start = 누적 * 원, s = inc/ d*360, e = (inc 값)/d*360;

inc = inc 값 var name = o.name, size = calTextLen(이름), dot = angle(radiu,[rx,ry],s (e-s)/2,2), px = dot[0]>rx?1:-1, py = dot[1 ]>ry?1:-1; var x = rx px*innerSpace ((dot[0]-rx-px*innerSpace)/len)*(len-i-1) ((dot[0] -rx-px*innerSpace)/len)/2- size.w/2, y = ry py*innerSpace ((dot[1]-ry-py*innerSpace)/len)*(len-i- 1) ((dot[1]-ry-py*innerSpace)/len)/2- size.h/2;

half_cumulative = 누적 절반_분수, 누적 = 분수, end = 누적 * circ;

self.baseDraw('pie',{ config : o, s : start, e : end, r : outR, innerR : innerR }) .css({zIndex:5,cursor:'pointer'}) .on('mouseover',function(){ this.setOpacity(0.85); }) .on('mouseout',function(){ this.setOpacity(1); }) .appendTo(piesGroup); self.baseDraw('span',{ x : x, y : y, fill : '#fff', 'text-anchor':'left' }) .css({ fontFamily : 'Verdana,Arial,Helvetica,sans-serif', fontSize : '12px', 위치 : 'absolute', color : '#fff', zIndex : 10 }) .addText(name) .appendTo(piesGroup);

}) });

}, drawSegment : function(){ var self = this, opts = this.opts, draw = opts.draw, chartData = opts. ChartData, columnPad = 5, columnWidth = draw.xPices - columnPad * 2;

각(chartData,function(i,c){

}); }, baseDraw : function(type,config){ var self = this arg = 인수; return { Rect : function(){ var set = {}; set.rx = set.ry = config.arc*30 || 5; set.width = config.width || 50; set.height = config.height || 50; set.fill = config.fill || '#fff'; set['fill-opacity'] = config.opacity || 0.85; set['획-너비'] = config.border || 2; set.Stroke = config.borderColor || '#606060'; set.transform = 'translate(' (config.left||0) ',' (config.top||0) ')'; return self.createElement('direct') .attr(set)

}, text : function(){ return self.createElement('text') .attr(config) }, span : function(){ var elem= self.createElement('text') .attr(config) .attr({ y : config.y (arg[2]||15) }) return elem; }, 경로 : function(){ var set = {}; 설정['획-너비'] = config.border; set.Stroke = config.borderColor || '#C0C0C0'; set.fill = config.isfill?config.fillColor:'없음'; set.d = config.path; config.opacity &&(set['fill-opacity'] = config.opacity);

return self.createElement('path') .attr(set); }, circle : function(){ var set = {}; set.cx = config.x; set.cy = config.y; set.r = config.r; set.fill = config.fillColor; return self.createElement('circle') .attr(set); }, pie : function(){ //config,s,e,r,index var opts = self.opts, s = config.s, r = config. r, e = config.e - 0.000001, id = '차트' config.index, area = opts.area, rx =area.centerX, ry = 면적. centerY, cosStart = mathCos(s), sinStart = mathSin(s), cosEnd = mathCos(e), sinEnd = mathSin(e), color = config.config .color, innerR = config.innerR, longArc = e - s 경로 = [ M, rx r * cosStart, ry r * sinStart, 'A', r, r, 0, longArc, 1, rx r * cosEnd, ry r * sinEnd, L, rx innerR * cosEnd, ry innerR * sinEnd, 'A', // arcTo innerR, // x 반경 innerR, // y 반경 0, // 경사 longArc, // 길거나 짧은 호 0, // 시계 방향 rx innerR * cosStart, ry innerR * sinStart, 'Z' ];

return self.baseDraw('path',{ border : 1, border : '#fff', isfill : true, fillColor : color, 불투명도 : 1, 경로 : 경로

})

} }[유형](); } };

//-------------------------------------------- ------------------------------------- ------- //如果是vml 修改smipleChart.prototype中的一些방법 !hasSVG &&extend(smipleChart.prototype,{ baseDraw : function(type,config){ var self = this, width = this.width, height = this.height, name = 인수[2] return { Rect : function(){ var attr = {}, css = {}; attr.arcsize = config.arc || 0.2 '' if(config.fill==='none'){ attr.filled = 'f' }else{ attr.filled = 't'; attr.fillcolor = config.fill }

attr.StrokeWeight = config.border || 2; attr.StrokeColor = config.borderColor || '#606060'; css.width = config.width || >css.height = config.height || 50 'px'; css.zIndex = 10; css.left = config.left||0 'px'; top ||0 'px';

return self.createElement('roundect') .attr(attr) .css(css) }, text: 함수 (){ return self.createElement('TextBox') .attr({inset : "2px,2px,2px,2px" }) }, span : function(){ self.createElement('span')을 반환합니다. css({ 위치:'절대', 왼쪽: config.x 'px', 상단: config.y 'px' }) }, path : function(){ var attr = {}, css = { width : width 'px', height : height 'px' };

if(config.border===0){ attr.Stroked = 'f'; attr.StrokeWeight =0; }else{ attr.StrokeWeight = config.border||1 ; } attr.StrokeColor = config.borderColor || "#C0C0C0"; attr.filled = config.isfill?'t':'f'; attr.filled==='t' &&(attr.fillcolor=config.fillColor||"#C0C0C0"); attr.coordsize = 너비 ',' 높이; attr.path = 구성.경로; var elem = self.createElement() .attr(attr) .css(css); if(config.opacity){ var fill = self.createElement('fill') .attr({ type : 'fill', color : config.fillColor|| "#C0C0C0", 불투명도 : config.opacity }) .appendTo(elem); //那这个对象的一个属性引用设置透명명한 元素 以后会用到 elem.opacity = fill[0]; } return 요소;

}, 원 : 함수(){ var attr ={ 스트로크 무게 : 1, 좌표 크기 : 너비 ',' 높이, 채움 : 't' }, css ={ 너비 : 너비 'px', 높이 : 높이 'px' } x = config.x, y = config. y, r = config.r; attr.StrokeColor=attr.fillcolor = config.fillColor

attr.path =[ 'wa', // 시계방향arcto x - r, // 왼쪽 y - r, // 위쪽 x r, // 오른쪽 y r, // 아래쪽 x r, // 시작 x y, // y 시작 x r, // 끝 x y, // y 종료 'e' // 닫기 ]; return self.createElement() .attr(attr) .css(css) }, pie : function(){ ////config,s,e,r,index

var opts = self.opts, area = opts.area, r = config.r, rx = 지역.centerX, ry = 지역.centerY, innerR= config.innerR||0, sDot = 각도(r,[rx,ry) ],s,2), eDot = 각도(r,[rx,ry],e,2), color = config.config.color, s = config.s, e = config.e, e = e - s == 2 * Math.PI ? e - 0.001 : e, cosStart = mathCos(s), sinStart = mathSin(s), cosEnd = mathCos(e), sinEnd = mathSin(e),

path = [ 'wa', // 시계 방향으로 (rx - r).toFixed(0), // 왼쪽 (ry - r).toFixed(0), / / 상단 (rx r).toFixed(0), // 오른쪽 (ry r).toFixed(0), // 하단 (rx r * cosStart).toFixed(0), / / x 시작 (ry r * sinStart).toFixed(0), // y 시작 (rx r * cosEnd).toFixed(0), // x 종료 (ry r * sinEnd) .toFixed(0), // y 끝

'at', // 시계방향 arcto (rx - innerR).toFixed(0), // 왼쪽 (ry - innerR).toFixed (0), // 위쪽 (rx innerR).toFixed(0), // 오른쪽 (ry innerR).toFixed(0), // 아래쪽 (rx innerR * cosEnd).toFixed (0), // x 시작 (ry innerR * sinEnd).toFixed(0), // y 시작 (rx innerR * cosStart).toFixed(0), // x 종료 ( ry innerR * sinStart).toFixed(0), // y 종료

'x', // 경로 종료 'e' // 닫기 ];

return self.baseDraw('path',{ border : 1, border : '#fff', isfill : true, fillColor : color, 불투명도 : 1, 경로 : 경로 })

} }[type](); } });

//-------------------------------------------- ------------------------------------- ------- })(문서);

window.onload = function(){ var config = { charts : { type : 'line', radius : 150, panel : 'x ', style: { fontFamily: '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', // 기본 글꼴 fontSize: '12px' } }, 제목 : { text : '线性图标' , y : 10, style : { color: 'black', fontSize: '16px' } }, subTitle : { text : '线性图标副标题', y : 35, style: { color: '#111 ', fontSize: '12px' } }, legend : { enable : true, //type : '측면', // 측면 横向 或 세로 纵向 유형: '측면', pos: [10,10], 스타일:{ fontFamily: '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans -serif', // 기본 글꼴 fontSize: '12px', magin:'0px' } }, yUnit : { text : '线性图标侧标题', x : 20, style: { color : '#111', fontSize : '12px' } }, xUnit : { 단위: [ '일월', '이월', '삼월', '사월', '오월', '六월 ', '七月', '八月', '九月', '十月', '十一月', '十two月' ] }, chartData : [ {

name : 'xcv', color : '#4572A7', data : [-18 ,45,-38,29,95,-45,77] }, {

이름: 'frfr', 색상: '#AA4643', 데이터: [- 44,12,78,-100,13,4,-56,-34] }, { 이름: 'AAAAA', 색상: '#89A54E',

데이터: [null,78,83,null,22,-78,2,44,78] }, { 이름: 'BBBB', 색상: '#80699B', 데이터: [null, 58, 35, null, 52, 47, 26, -55, 39, 123,15,66] } ] };

new smipleChart($('line'),config); config.charts.type ='지역'; config.title.text ='区域图标' config.subTitle.text='区域图标副标题' config.yUnit.text ='区域图标侧标题'

new smipleChart ($('지역'),구성); config.title.text ='柱状图标' config.subTitle.text='柱状图标副标题' config.yUnit.text ='柱状图标侧标题' config.charts.type ='열'; config.chartData =[ {

이름 : 'xcv', 색상 : '#4572A7',

데이터 : [-0.01,-0.62,0 ,0.55,null,0.78,-0.63,-0.82,null,null,0.33] }, {

이름: 'frfr', 색상: '#AA4643', 데이터: [-0.22,0.82,0.55,1.32,0.33,0.95,null,1,0.65,null,0.78] }, { 이름: 'AAAAA', 색상: '#89A54E' ,

데이터: [null,0.62,0.34,null,0.63,0,-0.23,-1,0.62,0.45,null,-0.56] } ]

new smipleChart($('zhu'),config); config.charts.panel='y' new smipleChart($('zhu1'),config); config.charts.type ='파이'; config.title.text ='饼图图标' config.subTitle.text='饼图图标副标题' config.yUnit.text ='' config.legend.type=' 세로로'; config.chartData =[ {

이름 : 'aaa', 색상 : '#4572A7',

데이터 : [433,123,null,66] }, {

이름: 'bbb', 색상: '#AA4643', 데이터: [45,33,33,511] }, { 이름: 'ccc', 색상: '#89A54E',

데이터: [55,null,75,333] } ] config.legend.pos= [680,30] new smipleChart($('pie'),config) config.charts.type ='pies'; config.title.text ='다층 원형 차트 아이콘' config.subTitle.text='다층 원형 차트 아이콘 자막' config.legend.type='측면' config. legend.pos= [330,400] new smipleChart($('pies'),config)

config.chartData =[ {

name : ' xcv' , 색상 : '#4572A7',

데이터 : [433,355,275,null,588,323,576,32,99] }, {

이름: 'frfr', 색상: '#AA4643', 데이터: [45,666,100,null,677,56,88,633,55,64] }, { 이름: 'AAAAA', 색상: '# 89A54E',

데이터: [55,162,75,null,364,0,637,112,163,615] } ] config.yUnit.lineNum = 2; config.title. text = '상대적으로 작음' config.subTitle.text='2줄만 설정됨' config.yUnit.text ='퀴즈 제목'

config.charts.type =' 줄 '; config.legend.pos= [10,10] new smipleChart($('vv'),config) config.yUnit.lineNum = 10; 패널 = 'x'; config.charts.type ='segment';//new smipleChart($('segment'),config)

/ 스크립트>