支持 线性图 区域图 柱状图 饼图 支持多浏览器 用到的是svg vml 复制代码 代码如下: ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">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 /> (function(doc,undefined){<br /> var win = this,<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", "1.1"),<br /> isIE = /msie/i.test(navigator.userAgent) && !win.opera,<br /> path = hasSVG?'d':'path',<br /> seal = hasSVG?'z':'e',<br /> math = Math,<br /> mathRound = math.round,<br /> mathFloor = math.floor,<br /> mathCeil = math.ceil,<br /> mathMax = math.max,<br /> mathMin = math.min,<br /> mathAbs = math.abs,<br /> mathCos = math.cos,<br /> mathSin = math.sin, <br /> M = 'M',<br /> L = 'L';<br /> win.$$ = function(Id){<br /> return document.getElementById(Id);<br /> };<br /> win.extend = function(){<br /> var target = arguments[0] || {}, i = 1, length = arguments.length, deep = true, options;<br /> if ( typeof target === "boolean" ) {<br /> deep = target;<br /> target = arguments[1] || {};<br /> i = 2;<br /> }<br /> if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]")<br /> target = {};<br /> for(;i<length;i++){<br /> if ( (options = arguments[ i ]) != null )<br /> for(var name in options){<br /> var src = target[ name ], copy = options[ name ];<br /> if ( target === copy )<br /> continue;<br /> if ( deep && copy && typeof copy === "object" && !copy.nodeType ){<br /> target[ name ] = arguments.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy );<br /> } <br /> else if(copy !== undefined)<br /> target[ name ] = copy; <br /> }<br /> <br /> }<br /> return target; <br /> };<br /> <br /> win.each = function ( object, callback, args ) { <br /> var name, i = 0, length = object.length; <br /> if ( args ) {<br /> args = Array.prototype.slice.call(arguments).slice(2);<br /> if ( length === undefined ) { <br /> for ( name in object ) <br /> if ( callback.apply( object[ name ],[name,object[ name ]].concat(args) ) === false ) <br /> break; <br /> } else<br /> for ( ; i < length; i++) <br /> if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) //<br /> break; <br /> } else { <br /> if ( length === undefined ) { <br /> for ( name in object ) <br /> if ( callback.call( object[ name ], name, object[ name ] ) === false ) <br /> break; <br /> } else<br /> for ( var value = object[0]; <br /> i < length && callback.call( value, i, value ) !== false; value = object[++i] ){} <br /> } <br /> return object; <br /> }; <br /> <br /> win.contains = function(p,c){<br /> if(!p||!c)return false;<br /> if(p===c)return true;<br /> return isIE<br /> ? p.contains(c)<br /> : p.compareDocumentPosition(c)==20<br /> ? true<br /> : false;<br /> };<br /> //---------------------------------------------------------------<br /> function processPoint( x ){<br /> return isIE ? ~~x.toFixed(0) : ~~x.toFixed(0) + 0.5;<br /> };<br /> function calTextLen(txt, cssStr){<br /> var span = doc.createElement('span');<br /> if(cssStr){<br /> typeof cssStr === 'string' <br /> ? span.style.cssText = cssStr <br /> : extend(span.style,cssStr);<br /> }else{<br /> extend(span.style,{<br /> fontSiz : '12px',<br /> fontFamily : '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif' <br /> });<br /> }<br /> span.innerHTML = txt || ''; <br /> span.style.visibility = 'hidden'; <br /> doc.body.appendChild(span); <br /> var width = span.offsetWidth,<br /> height = span.offsetHeight;<br /> doc.body.removeChild(span);<br /> return {w:width,h:height};<br /> };<br /> function angle(r,center,o,jingdu){<br /> var hudu = Math.PI*2*(o/360),<br /> x = center[0]+ r*Math.sin(hudu),<br /> y = center[1]+ -r*Math.cos(hudu);<br /> return [x.toFixed(jingdu||0),y.toFixed(jingdu||0)]; <br /> }<br /> function xx(a,b,lineNum){<br /> var t = 1000,<br /> stf = ((b*t-a*t)/lineNum)/t,<br /> arr = [1,2,2.5,5,10],<br /> c = 1,<br /> v;<br /> // 分割线的基数是 [1,2,2.5,5,10] 这个步骤是查找 间隔 属于哪个范围<br /> if(stf<arr[0]){<br /> while( stf<arr[0] ){<br /> c = c*10;<br /> arr[0]=arr[0]/c; <br /> }<br /> each([1,2,2.5,5,10],function(i,o){<br /> arr[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 /> each([1,2,2.5,5,10],function(i,o){<br /> arr[i]= o*c;<br /> }); <br /> }<br /> <br /> //上面找到间隔后 找到间隔中最接近的一个 <br /> each(arr,function(i,o){<br /> if(stf<=o){<br /> v = o;<br /> return false;<br /> }<br /> }); <br /> var bj = (mathAbs(a)*t)/(v*t),<br /> ba = 0,<br /> isZ = bj!==parseInt(bj);<br /> isZ<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%10!==0){<br /> while(a!=0&&num!=0){<br /> a = (a*t-v*t)/t;<br /> num--;<br /> if((a*t-v*num*t)/10000>0&&a%10===0)<br /> break;<br /> }<br /> }<br /> <br /> if(num!=0){<br /> while(num!==0){<br /> b = (b*t+v*t)/t<br /> num--; <br /> }<br /> } <br /> <br /> }else{<br /> //坐标比较整数化 <br /> if(b<0&&num!=0){<br /> while(b!=0&&num!=0&&b%10!==0){<br /> b = (b*t+v*t)/t;<br /> num--;<br /> if((b*t+v*num*t)/t<0&&b%10===0)<br /> break; <br /> }<br /> }<br /> if(num!=0){<br /> while(num!==0){<br /> a = (a*t-v*t)/t<br /> num--; <br /> }<br /> } <br /> }<br /> return {min:a,max:b,stf:v};<br /> } <br /> //---------------------------------------------------------------------------------------------------------------<br /> //对svg vml元素的一些创建 修改属性 样式 删除 == 一些的操作<br /> win.vector = function(){};<br /> vector.prototype = {<br /> $c : function(graphic,nodeName){<br /> this.element = this[0] = doc.createElementNS('http://www.w3.org/2000/svg', nodeName); <br /> this.graphic = graphic;<br /> return this;<br /> },<br /> attr: function(hash,val){<br /> var elem = this.element,<br /> key,<br /> value;<br /> if(typeof hash === 'string'){<br /> if(val === undefined){<br /> return elem.getAttribute(hash);<br /> }else{<br /> elem.setAttribute(hash, val);<br /> return this;<br /> }<br /> } else {<br /> for(key in hash){<br /> value = hash[key];<br /> if(key === path){<br /> value && value.join<br /> &&(value = value.join(' '));<br /> /(NaN| |^$)/.test(value)<br /> &&(value = 'M 0 0');<br /> }<br /> elem.setAttribute(key, value) <br /> }<br /> }<br /> return this;<br /> },<br /> css: function(hash){<br /> for(var key in hash){<br /> isIE && key == "opacity"<br /> ? this[0].style['filter'] = "alpha(opacity="+ hash[key] * 100+")"<br /> : this[0].style[key] = hash[key];<br /> }<br /> return this;<br /> },<br /> on: function(eventName, handler){<br /> var self = this;<br /> /*this.element.addEventListener(eventName,function(){<br /> handler.call(self)<br /> },false);*/<br /> this.element['on' + eventName] = function(e){<br /> e = e || win.event;<br /> handler.call(self,e);<br /> } <br /> return this;<br /> },<br /> appendTo: function(parent){<br /> if(parent){<br /> parent.element<br /> ? parent.element.appendChild(this.element)<br /> : parent.appendChild(this.element)<br /> <br /> } else {<br /> this.graphic.container.appendChild(this.element);<br /> }<br /> return this;<br /> },<br /> addText: function(str){<br /> var elem = this.element;<br /> if(elem.nodeName === 'text'){<br /> elem.appendChild(doc.createTextNode(str+''));<br /> }<br /> return this;<br /> },<br /> setOpacity : function(v){<br /> this.attr('fill-opacity',v);<br /> return this;<br /> },<br /> setSize : function(v){<br /> this[0].nodeName==='circle'<br /> ? this.attr('r',4+(v===0?0:2))<br /> : this.attr({'stroke-width':v});<br /> return this;<br /> },<br /> toFront: function() {<br /> this[0].parentNode.appendChild(this[0]);<br /> return this;<br /> }, <br /> show: function(){<br /> this[0].style.display = 'block';<br /> return this;<br /> },<br /> hide: function(){<br /> this[0].style.display = 'none';<br /> return this; <br /> },<br /> destroy : function(){<br /> //销毁节点......................<br /> var node = this[0] || this;<br /> node.onmouseover = node.onmouseout = node.onclick = null;<br /> node.parentNode<br /> &&node.parentNode.removeChild(node);<br /> return this;<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 /> extend(vector.prototype,{<br /> $c : function(graphic,nodeName){<br /> var name = nodeName || 'shape'; <br /> this.element= this[0] = (name === 'div' || name === 'span')<br /> ? doc.createElement(name)<br /> : doc.createElement('<vml:'+name+' class="vml">'); <br /> this.graphic = graphic;<br /> return this; <br /> },<br /> /*on : function(eventName, handler){<br /> var self = this;<br /> this.element.attachEvent("on" + eventName,function(){<br /> handler.call(self);<br /> });<br /> return this;<br /> },*/<br /> addText : function(txt){<br /> this[0].innerHTML = txt || '';<br /> return this;<br /> },<br /> setSize : function(v){<br /> this[0].strokeWeight = v;<br /> return this;<br /> }, <br /> setOpacity : function(v){<br /> this.opacity.opacity=v;<br /> return this;<br /> } <br /> });<br /> }<br /> //---------------------------------------------------------------------------------------------------<br /> //画图类 <br /> //------------------------------------------------------------<br /> win.smipleChart = function(){<br /> this.init.apply(this,arguments);<br /> };<br /> smipleChart.list = [];<br /> smipleChart.timer = null;<br /> smipleChart.lazyLoad = function(id){<br /> id = id || '0' <br /> smipleChart.list[id]<br /> &&smipleChart.list[id].loadMe();<br /> };<br /> smipleChart.prototype = {<br /> options : {<br /> charts : {<br /> paddingRight : 20,<br /> radius : 200,<br /> style : {<br /> fontFamily : '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif',<br /> fontSize : '12px',<br /> background : '#FFFFFF'<br /> }<br /> },<br /> title : {<br /> text : '',<br /> y : 10,<br /> style : {<br /> fontFamily:'Verdana,Arial,Helvetica,sans-serif',<br /> fontSize:'16px',<br /> fontWeight:'bold'<br /> }<br /> },<br /> subTitle : {<br /> text : '',<br /> y : 30,<br /> style : {<br /> fontFamily:'Verdana,Arial,Helvetica,sans-serif',<br /> fontSize:'12px', <br /> color: '#111' <br /> }<br /> },<br /> yUnit : {<br /> text : '',<br /> style : {<br /> fontFamily:'Verdana,Arial,Helvetica,sans-serif',<br /> fontSize:'12px', <br /> color: '#111'<br /> },<br /> lineNum :10<br /> }<br /> },<br /> init : function(container,options){<br /> clearTimeout(smipleChart.timer)<br /> var self = this;<br /> this.width = container.offsetWidth;<br /> this.height = container.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 /> ? new vector().$c(1,'svg')<br /> .attr({<br /> xmlns : 'http://www.w3.org/2000/svg',<br /> version : '1.1',<br /> width : this.width,<br /> height : this.height<br /> <br /> })<br /> .css({fontSize : '12px'})<br /> .appendTo(container)<br /> : new vector().$c(1,'div')<br /> .css({<br /> fontSize : '12px',<br /> width : this.width +'px',<br /> height : this.height+'px'<br /> })<br /> .appendTo(container);<br /> <br /> this.loading = container.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 = 'absolute';<br /> this.loading.style.top = container.offsetHeight/2- this.loading.offsetHeight/2+'px';<br /> this.loading.style.left = container.offsetWidth/2- this.loading.offsetWidth/2+'px';<br /> <br /> var c = extend(true,{},this.options),<br /> opts = this.opts = extend(true,c,options),<br /> style = extend(opts.charts.style,{<br /> width : this.width,<br /> height : this.height<br /> });<br /> <br /> smipleChart.list[this.uuuid] = this; <br /> <br /> smipleChart.timer = setTimeout(function(){<br /> smipleChart.lazyLoad();<br /> },200);<br /> <br /> },<br /> loadMe : function(){<br /> var opts = this.opts,<br /> self = this,<br /> type = opts.charts.type;<br /> this.container = this.container<br /> .on('mouseout',function(e){<br /> var elem = e.relatedTarget || 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 /> })<br /> .css({display:'none'})[0];<br /> <br /> <br /> //计算绘画盘子的时候需要的一些参数<br /> this.getDrawArea()<br /> .createTooltip() //创建提示信息的框框<br /> .drawTitle() //画标题<br /> //画盘子<br /> <br /> 'line,area,pie'.indexOf(type)>=0<br /> &&(opts.charts.panel = 'x');<br /> <br /> <br /> ' pie,pies'.indexOf(type)<0<br /> &&this.drawPanel();<br /> <br /> <br /> this.drawLegend(opts.legend.type); //画色块条<br /> var type = {<br /> line : 'drawLine',<br /> area : 'drawArea',<br /> columns : 'drawColumns',<br /> pie : 'drawPie',<br /> pies : 'drawPies',<br /> segment : 'drawSegment'<br /> }[opts.charts.type];<br /> //开始画图..............<br /> this[type]();<br /> <br /> //删除节点<br /> this.loading.parentNode.removeChild(this.loading);<br /> //断开引用<br /> this.loading = null;<br /> <br /> this.container.style.display = '';<br /> setTimeout(function(){<br /> smipleChart.lazyLoad((++self.uuuid)+'');<br /> },10)<br /> <br /> },<br /> createElement : function(nodeName){<br /> return new vector().$c(this,nodeName);<br /> },<br /> group: function(name){<br /> return this.createElement(hasSVG?'g':'div').attr('mark',name);<br /> },<br /> getDrawArea : function(){<br /> var opts = this.opts,<br /> width = this.width,<br /> height = this.height,<br /> title = opts.title,<br /> subTitle = opts.subTitle,<br /> area = {<br /> // 去掉坐标轴左边的刻度文本宽度(预估) 80为定值 左边只留80的间距<br /> areaWidth : width - 80, <br /> // 去掉坐标轴底下的文本和标线的高度<br /> areaHeight : height - 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 /> ? subTitle.y<br /> : 10<br /> <br /> area.startX = 80;<br /> area.startY = height - 40;<br /> <br /> //圆心的位置<br /> area.centerX = width / 2;<br /> area.centerY = height / 2; <br /> <br /> //右边留一些空隙<br /> area.areaWidth -=20;<br /> //上边也留一些间距<br /> area.areaHeight -=15;<br /> <br /> opts.area = area; <br /> <br /> return this;<br /> },<br /> drawTitle : function(){ <br /> var opts = this.opts,<br /> self = this,<br /> arr = [opts.title,opts.subTitle,opts.yUnit],<br /> //3个标题坐标的位置的基本参数<br /> config = [<br /> {<br /> x : this.width / 2,<br /> y : opts.title.y<br /> },<br /> {<br /> x : this.width / 2,<br /> y : opts.subTitle.y <br /> },<br /> {<br /> x : opts.yUnit.x,<br /> y : this.height / 2 - 20 <br /> } <br /> ],<br /> tpanel = this.group('title')<br /> .appendTo();<br /> each(arr,function(i,title){<br /> var text = title.text;<br /> if(text){<br /> var elem = self.baseDraw.span(self,{<br /> 'text-anchor':'left',<br /> x : mathMax(config[i].x - calTextLen(text,title.style).w/2,10),<br /> y : config[i].y<br /> },calTextLen(title.text,title.style).h)<br /> .css(title.style)<br /> .addText(text)<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 /> return this;<br /> },<br /> //画盘子 比较麻烦<br /> drawPanel : function(type){<br /> var opts = this.opts,<br /> self = this,<br /> area = opts.area,<br /> chartsType = opts.charts.type,<br /> isSegment = chartsType === 'segment',<br /> //盘子的类型 是横盘子 还是纵盘子<br /> type = opts.charts.panel || 'x';<br /> // 底板<br /> var drawAreaWidth = area.areaWidth,<br /> drawAreaHeight = area.areaHeight, <br /> //原点的坐标<br /> startX = area.startX,<br /> startY = area.startY;<br /> var allData = [],<br /> minValue = 0,<br /> maxValue = 10,<br /> //线的条数 只能在1到10之间<br /> lineNum = mathMin(10,mathMax(opts.yUnit.lineNum,1)),<br /> staff;<br /> <br /> //组合所有的数据<br /> each(opts.chartData,function(i,o){<br /> // 如果是柱状图 是对所有的数据求和<br /> isSegment<br /> ? each(o.data,function(j,d){<br /> allData[j]<br /> ? allData[j] = allData[j] + (~~d)<br /> : allData[j] = ~~d;<br /> })<br /> : allData = allData.concat(o.data)<br /> });<br /> <br /> //给所有的数据排序 为了下面求最大值 最小值<br /> allData.sort(function(a,b){return a-b});<br /> <br /> //求出最大值 最小值<br /> maxValue = allData[allData.length - 1];<br /> <br /> each(allData,function(i,o){<br /> if(o!==null){<br /> minValue = o;<br /> return false;<br /> } <br /> }); <br /> <br /> //主盘子容器<br /> var panel = this.group('panel').appendTo();<br /> <br /> var result = xx(minValue,maxValue,lineNum),<br /> min = result.min,<br /> max = result.max,<br /> f = result.stf;<br /> isSegment<br /> &&(min = 0); <br /> //表示画的是横坐标 或者是双坐标<br /> if(type.toLowerCase()==='x'){<br /> //横坐标单位间隔<br /> var xPices = drawAreaWidth / opts.xUnit.units.length,<br /> //单位间隔的中心点<br /> offset = xPices / 2,<br /> <br /> yPices = drawAreaHeight / lineNum;<br /> <br /> //--------------------------------画横向的点和文字---------------------------------------------------------<br /> var y = hasSVG?5:10,<br /> t = 1000,<br /> span; <br /> each(opts.xUnit.units,function(i,d){ <br /> self.baseDraw.path(self,{<br /> border : 1,<br /> borderColor : '#C0C0C0',<br /> isfill : false,<br /> path : [<br /> M, <br /> processPoint(startX + (i * xPices)), <br /> processPoint(startY), <br /> L,<br /> processPoint(startX + (i*xPices)),<br /> processPoint(startY + 5)<br /> ]<br /> }).<br /> appendTo(panel);<br /> <br /> span = self.baseDraw.span(self,{<br /> x : startX + offset + (i * xPices),<br /> y : startY+y,<br /> 'text-anchor':'middle'<br /> })<br /> .css({<br /> fontFamily : 'Verdana,Arial,Helvetica,sans-serif',<br /> fontSize : '12px'<br /> })<br /> .addText(opts.xUnit.units[i])<br /> .appendTo(panel)[0];<br /> <br /> !hasSVG<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 /> border : 1,<br /> borderColor : '#C0C0C0',<br /> isfill : false,<br /> path : [M, startX, processPoint(startY - (i * yPices)), L, processPoint(startX + drawAreaWidth), processPoint(startY - (i *yPices))]<br /> })<br /> .css({zIndex:-10}) <br /> .appendTo(panel);<br /> <br /> var span = self.baseDraw.span(self,{<br /> x : startX - 15,<br /> y : startY - i * yPices-calTextLen(min+i*f+'').h/2,<br /> 'text-anchor':'middle'<br /> })<br /> .css({<br /> 'font-family' : 'Verdana,Arial,Helvetica,sans-serif',<br /> 'font-size' : '12px',<br /> width : '40px',<br /> display : 'block',<br /> textAlign : 'right'<br /> })<br /> .addText((min*t+(i*t*f/t)*t)/t+'')<br /> .appendTo(panel)[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 /> }else{<br /> //横坐标单位间隔<br /> var yPices = drawAreaHeight / (opts.xUnit.units.length),<br /> //单位间隔的中心点<br /> offset = Math.round(yPices / 2),<br /> x = hasSVG ? 25 : 70,<br /> y = hasSVG ? 0 : 5,<br /> span<br /> <br /> each(opts.xUnit.units,function(i,d){ <br /> self.baseDraw.path(self,{<br /> border : 1,<br /> borderColor : '#C0C0C0',<br /> isfill : false,<br /> path : [<br /> M,<br /> processPoint(startX-5),<br /> processPoint(startY-i * yPices),<br /> L,<br /> processPoint(startX),<br /> processPoint(startY-i * yPices),<br /> ]<br /> })<br /> .appendTo(panel);<br /> span = self.baseDraw.span(self,{<br /> x : startX - x,<br /> y : startY -i * yPices-offset-calTextLen(d).h/2 + y,<br /> 'text-anchor':'middle'<br /> })<br /> .css({<br /> fontFamily:'Verdana,Arial,Helvetica,sans-serif',<br /> fontSize:'12px',<br /> width : '60px',<br /> textAlign:'right'<br /> })<br /> .addText(d)<br /> .appendTo(panel) <br /> <br /> });<br /> <br /> <br /> var xPices = drawAreaWidth / lineNum;<br /> <br /> for(var i=0;i<=lineNum;i++){<br /> self.baseDraw.path(self,{<br /> border : 1,<br /> borderColor : '#C0C0C0',<br /> isfill : false,<br /> path : [<br /> M, <br /> processPoint(startX + (i * xPices)), <br /> processPoint(startY), <br /> L, <br /> processPoint(startX + (i*xPices)),<br /> processPoint(startY - drawAreaHeight)<br /> ]<br /> }).<br /> appendTo(panel);<br /> <br /> self.baseDraw.span(self,{<br /> x : startX - calTextLen(min+i*f+'').w/2 + i * xPices,<br /> y : startY,<br /> 'text-anchor':'left'<br /> })<br /> .css({<br /> fontFamily:'Verdana,Arial,Helvetica,sans-serif',<br /> fontSize:'12px'<br /> })<br /> .addText(min+i*f+'')<br /> .appendTo(panel); <br /> }<br /> <br /> }<br /> //----------------------------------------------------------------------------------------------------- <br /> //因为起点很可能不是从0开始的 所以在起点的时候要要加上到0那部分的值<br /> var jianju =0;<br /> if(min>0)jianju = min;<br /> if(max<0)jianju = max;<br /> <br /> startX = opts.charts.panel==='x' ? startX :startX-xPices*(min/f);<br /> startY = opts.charts.panel==='x' ? startY + yPices*(min/f) : startY; <br /> opts.draw = {<br /> startX : startX, // X 轴起点<br /> startY : startY , // Y 轴起点<br /> xPices : xPices, // X 轴每份的宽度<br /> yPices : yPices, // Y 轴每份的宽度<br /> offset : offset, // X 单分中心点位置偏移量<br /> jianjuY : jianju*yPices/f,<br /> jianjuX : jianju*xPices/f, <br /> feed : f // Y 轴的每份有多少 <br /> }<br /> return this;<br /> },<br /> createTooltip : function(){<br /> //一个组<br /> this.tipC = this.group('tip')<br /> .css({zIndex: 200,height:'20px',width:'20px',position:'absolute'})<br /> .appendTo()<br /> .hide()<br /> //画一个框框baseDraw <br /> this.tipBox = this.baseDraw.rect(this,{arc:0.22,fill:'#fff',border:2,borderColor:'#606060'})<br /> .appendTo(this.tipC)<br /> <br /> //因为svg里面的g可以直接定位 但是vml里面的group渲染很慢 所以改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 /> fontFamily:'Verdana,Arial,Helvetica,sans-serif',<br /> fontSize:'12px',<br /> background: '#FFF'<br /> })<br /> .appendTo(p);<br /> <br /> this.tipText = doc.createTextNode('');<br /> this.tipTxtContainer[0].appendChild(this.tipText);<br /> return this;<br /> },<br /> showTooltip : function(obj, x, y,data){<br /> <br /> /*var txt = obj.name +':' + data,<br /> size = 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({width : size.w + 5 * 2,height : size.h + 5 * 2,stroke : obj.color||'#606060'});<br /> }else{<br /> this.tipC.css({left:pos.x,top:pos.y});<br /> <br /> this.tipBox<br /> .css({width:size.w + 5 * 2,height : size.h + 5 * 2})<br /> this.tipBox[0].strokeColor = obj.color||'#000'; <br /> }<br /> this.tipText.nodeValue = txt || '';*/<br /> clearTimeout(this.timer);<br /> var txt = obj.name +':' + data,<br /> self = this,<br /> size = 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({width : size.w + 5 * 2,height : size.h + 5 * 2,stroke : obj.color||'#606060'});<br /> }else{ <br /> self.tipBox<br /> .css({width:size.w + 5 * 2,height : size.h + 5 * 2})<br /> self.tipBox[0].strokeColor = obj.color||'#000'; <br /> }<br /> this.tipText.nodeValue = txt || '';<br /> <br /> if(this.tipC[0].style.display === 'none'){<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 /> }else{<br /> var move = function(t,b,c,d){<br /> return c*(t/=d)*t + b;<br /> },<br /> t = 0,<br /> b = self.tipC.attr('pos').split('-'),<br /> c = [pos.x,pos.y],<br /> d = 5;<br /> <br /> this.timer = setInterval(function(){<br /> if(t<d){<br /> t++;<br /> <br /> var x = move(t,~~b[0],(~~c[0])-(~~b[0]),d),<br /> y = move(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 /> }else{<br /> clearTimeout(self.timer);<br /> }<br /> },1);<br /> }; <br /> },<br /> hideTooltip: function(){<br /> this.tipC.hide();<br /> }, <br /> drawLegend : function(type,redraw){<br /> var self = this,<br /> opts = this.opts,<br /> isLine = opts.charts.type === 'line', <br /> //颜色块的大小<br /> t_width = 20,<br /> t_height = 20,<br /> //块之间的距离<br /> t_space = 5, <br /> datas = opts.chartData,<br /> len = datas.length,<br /> css = opts.legend.style,<br /> //最大长度 如果是纵着的 需要最大的长度<br /> maxWidth = 10,<br /> maxHeight= 30,<br /> //这个东西的位置<br /> orig_pos = opts.legend.pos?opts.legend.pos:[2,2],<br /> <br /> //显示隐藏组的函数<br /> handle = function(i){<br /> var g = self.mainGroup['chart'+i],<br /> issegment = opts.charts.type==='segment';<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(issegment){<br /> self.hideList[i] ='';<br /> var mainGroup = self.mainGroup;<br /> <br /> for(var name in mainGroup){ <br /> var parent = mainGroup[name].chart,<br /> nodes = parent[0].childNodes,<br /> len = nodes.length;<br /> //销毁图上面画的东西<br /> for(var i = len-1;i>=0;i--){<br /> vector.prototype.destroy.call(nodes[i])<br /> } <br /> }<br /> //重画 <br /> self.drawSegment();<br /> } <br /> <br /> }else{<br /> g.chart.show();<br /> g.show = true;<br /> hasSVG<br /> ? this.attr({fill:'#000'})<br /> : this[0].style.color = '#000'<br /> <br /> if(issegment){<br /> delete self.hideList[i];<br /> var mainGroup = self.mainGroup;<br /> <br /> for(var name in mainGroup){<br /> <br /> var parent = mainGroup[name].chart,<br /> nodes = parent[0].childNodes,<br /> len = nodes.length;<br /> for(var i = len-1;i>=0;i--){<br /> vector.prototype.destroy.call(nodes[i])<br /> } <br /> <br /> }<br /> self.drawSegment();<br /> } <br /> }<br /> },<br /> <br /> arr = [];<br /> type = type ||'lateral'; <br /> var legendPanel = self.group('Legend')<br /> .appendTo();<br /> if(type==='lateral'){<br /> //如果是横着的<br /> var top = orig_pos[1] + 5,<br /> th = hasSVG?0:3,<br /> left = orig_pos[0] + 5; <br /> each(datas, function(i,d){ <br /> left = i===0 ? left : t_space+left;<br /> //计算所有left的位置<br /> //如果是线性图 按线性图的方式画图<br /> if(isLine){<br /> self.baseDraw.path(self,{<br /> border : 1.5,<br /> borderColor : d.color,<br /> isfill : false,<br /> path : [<br /> M,<br /> left.toFixed(0),<br /> (top+10).toFixed(0),<br /> L,<br /> (left+25).toFixed(0),<br /> (top+10).toFixed(0)<br /> ]<br /> })<br /> .appendTo(legendPanel);<br /> self.baseDraw[d.dotType || 'circle'](self,{<br /> x : left+12, <br /> y : top+10,<br /> r : 4,<br /> fillColor : d.color<br /> })<br /> .appendTo(legendPanel);<br /> }else{<br /> self.baseDraw.rect(self,{<br /> arc : 0.1,<br /> fill : d.color,<br /> border : 1,<br /> borderColor : d.color,<br /> left : left,<br /> top : top,<br /> width : t_width+'px',<br /> height : t_height+'px' <br /> })<br /> .appendTo(legendPanel)<br /> }<br /> <br /> left = left + t_width+2 + t_space;<br /> var w = calTextLen(d.name,css).w<br /> self.baseDraw.span(self,{<br /> 'text-anchor':'left',<br /> x : left,<br /> y : top+th<br /> })<br /> .css(extend(css,{cursor:'pointer'}))<br /> .on('click',function(){<br /> handle.call(this,i);<br /> })<br /> .addText(d.name)<br /> .appendTo(legendPanel);<br /> left = left + w;<br /> });<br /> this.baseDraw.rect(this,{<br /> arc : 0.1,<br /> fill : 'none',<br /> border : 1.5,<br /> borderColor : '#666666',<br /> width : left+ t_space- orig_pos[0],<br /> height : maxHeight,<br /> left : orig_pos[0],<br /> top : orig_pos[1]<br /> })<br /> .appendTo(legendPanel);<br /> }else{<br /> var top = orig_pos[1] + 5,<br /> th = hasSVG?0:3,<br /> left = orig_pos[0] + 5;<br /> each(datas, function(i,d){<br /> top = i===0 ? top : t_space + top;<br /> self.baseDraw.rect(self,{<br /> arc : 0.1,<br /> fill : d.color,<br /> border : 1,<br /> borderColor : d.color,<br /> left : left,<br /> top : top,<br /> width : t_width+'px',<br /> height : t_height+'px' <br /> })<br /> .appendTo(legendPanel);<br /> var h = calTextLen(d.name,css).h;<br /> <br /> self.baseDraw.span(self,{<br /> 'text-anchor':'left',<br /> x : left+t_width+2+t_space,<br /> y : top+th<br /> })<br /> .css(extend(css,{cursor:'pointer'}))<br /> .addText(d.name)<br /> .on('click',function(){<br /> //如果是多层饼图 不行进隐藏 <br /> if(opts.charts.type==='pies')return;<br /> handle.call(this,i); <br /> })<br /> .appendTo(legendPanel); <br /> top = top + h+ t_space;<br /> maxWidth = Math.max(maxWidth,calTextLen(d.name,css).w);<br /> }); <br /> this.baseDraw.rect(this,{<br /> &
