因为编辑器会对代码有所破坏,所以提供一个在线演示http://demo.jb51.net/chengxu/smipleChart.htm 复制代码 代码如下: smipleChart <br><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>hasSVG = win.SVGAngle || doc.implementation.hasFeature("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><br>win.$ = function(Id){ <BR>return document.getElementById(Id); <BR>}; <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>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><br>function xx(a,b,lineNum){ <br><br>var t = 10000; <BR>var stf = ((b*t-a*t)/lineNum)/t, <BR>arr = [1,2,2.5,5,10], <BR>c = 1, <BR>v; <br><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>//a 是最小的 <BR>//b是最大 的 <BR>a = (a*t-mathAbs((a%v)*t))/t; <BR>b = (b*t+(b%v===0?0:(v-b%v))*t)/t; <br><br>//看看还剩几条线没有画 <br><br>var num = Math.max(0,lineNum - Math.round((b-a)/v)); <br><br>if(a>=0){ <BR>//让图比较靠中间 <BR>/*while(num!==0){ <BR>num%2===0 <BR>? a = (a*t-v*t)/t <BR>: b = (b*t+v*t)/t; <BR>num--; <BR>}*/ <br><br>//坐标比较整数化 <BR>if(a!=0&&num!=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>/*while(num!==0){ <BR>num%2===0 <BR>? b = (b*t+v*t)/t <BR>: a = (a*t-v*t)/t <BR>num--; <BR>}*/ <BR>//坐标比较整数化 <BR>if(b<0&&num!=0){ <BR>while(b!=0&&num!=0){ <BR>b = (b*t+v*t)/t; <BR>num--; <BR>if((b*t+v*num*t)/t<0&&a%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>} <BR>return {min:a,max:b,stf:v}; <BR>} <BR>//--------------------------------------------------------------------------------------------------------------- <BR>//对svg vml元素的一些创建 修改属性 样式 删除 == 一些的操作 <BR>win.vector = function(){}; <BR>win.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><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>var str = ''; <BR>for(var key in hash){ <BR>if(isIE && key == "opacity"){ <BR>this.element.style['filter'] = "alpha(opacity="+ hash[key] * 100+")"; <BR>}else{ <BR>this.element.style[key] = hash[key]; <BR>} <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>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.toString() || ' ')); <BR>} <BR>return this; <BR>}, <BR>setOpacity : function(v){ <BR>this.attr('fill-opacity',v) <BR>}, <BR>toFront: function() { <BR>this.element.parentNode.appendChild(this.element) <BR>return this; <BR>}, <BR>show: function(){ <BR>this.element.style.display = 'block'; <BR>return this; <BR>}, <BR>hide: function(){ <BR>this.element.style.display = 'none'; <BR>return this; <BR>} <BR>}; <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>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>var elem = this.element; <BR>elem.innerHTML = txt || ''; <BR>return this; <BR>}, <BR>setOpacity : function(v){ <BR>this.opacity.opacity=v; <BR>} <BR>}); <BR>} <BR>//--------------------------------------------------------------------------------------------------- <br><br><br><br><br><br><br><br>//画图类 <BR>//------------------------------------------------------------ <BR>win.smipleChart = function(){ <BR>this.init.apply(this,arguments); <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,width,height){ <BR>this.width = width || container.offsetWidth; <BR>this.height = height || container.offsetHeight; <BR>this.mainGroup = {}; <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>}) <BR>.css({fontSize : '12px'}) <BR>.appendTo(container).element <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).element; <BR>var c = extend(true,{},this.options) <BR>var opts = this.opts = extend(true,c,options), <BR>style = extend(opts.charts.style,{ <BR>width : this.width, <BR>height : this.height <BR>}); <br><br><br><br>//计算绘画盘子的时候需要的一些参数 <BR>this.getDrawArea() <BR>.createTooltip() //创建提示信息的框框 <BR>.drawTitle() //画标题 <BR>//画盘子 <br><br>if('line,area,pie'.indexOf(opts.charts.type)>=0){ <BR>opts.charts.panel = 'x'; <BR>} <br><br>if(' pie,pies'.indexOf(opts.charts.type)<0){ <BR>this.drawPanel(); <BR>} <br><br>this.drawLegend(opts.legend.type); //画色块条 <br><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>this[type](); <br><br>}, <BR>createElement : function(nodeName){ <BR>return new vector().$c(this,nodeName); <BR>}, <BR>group: function(name){ <BR>return this.createElement(isIE?'div':'g').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><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>}, <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><br>each(arr,function(i,title){ <BR>var text = title.text; <BR>if(text){ <BR>var elem = self.baseDraw('span',{ <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>}); <BR>return this; <BR>}, <br><br><BR>//画盘子 比较麻烦 <BR>drawPanel : function(type){ <BR>var opts = this.opts, <BR>self = this, <BR>area = opts.area, <BR>isSegment= opts.charts.type==='segment', <BR>//盘子的类型 是横盘子 还是纵盘子 <BR>type = opts.charts.panel || 'x'; <br><br>// 底板 <BR>var drawAreaWidth = area.areaWidth, <BR>drawAreaHeight = area.areaHeight, <BR>//原点的坐标 <BR>startX = area.startX, <BR>startY = area.startY; <br><br>var allData = [], <BR>minValue = 0, <BR>maxValue = 10, <BR>lineNum = mathMax(opts.yUnit.lineNum,2), <BR>min = opts.yUnit.min, <BR>staff; <br><br>//组合所有的数据 <BR>each(opts.chartData,function(i,o){ <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){ <BR>minValue = o; <BR>return false; <BR>} <BR>}); <br><br>//主盘子容器 <BR>this.panel = this.group('panel').appendTo(); <br><br><BR>var dd = xx(minValue,maxValue,lineNum), <BR>min = dd.min, <BR>max = dd.max, <BR>f = dd.stf; <br><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>//--------------------------------画横向的点和文字--------------------------------------------------------- <BR>each(opts.xUnit.units,function(i,d){ <BR>self.baseDraw('path',{ <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(self.panel); <BR>var y = hasSVG?5:10, <BR>span = self.baseDraw('span',{ <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(self.panel) <BR>.element; <br><br>//vml没有x y的概念 所以要简单span宽度的一半 以后用span都需要减掉 <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',{ <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(self.panel); <br><br>var span = self.baseDraw('span',{ <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*1000+(i*1000*f/1000)*1000)/1000+'') <BR>.appendTo(self.panel) <BR>.element; <br><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><br><br><br>var x = hasSVG?25:70, <BR>vv = hasSVG?0:5; <br><br>each(opts.xUnit.units,function(i,d){ <br><br>self.baseDraw('path',{ <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(self.panel); <BR>var span = self.baseDraw('span',{ <BR>x : startX - x, <BR>y : startY -i * yPices-offset-calTextLen(d).h/2+vv, <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(self.panel) <br><br>}); <br><br><BR>var xPices = drawAreaWidth / lineNum; <br><br>for(var i=0;i<=lineNum;i++){ <BR>self.baseDraw('path',{ <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(self.panel); <br><br>var span = self.baseDraw('span',{ <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(self.panel) <BR>.element; <BR>} <br><br>} <br><br>//----------------------------------------------------------------------------------------------------- <BR>//在画区域图的时候还需要起点的位置啊 <BR>//因为坐标很可能是负数 而且也能不是从0开始的 所以+上jianju <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><br>opts.draw = { <BR>startX : startX, // X 轴起点 <BR>startY : startY , // Y 轴起点 <BR>xPices : xPices, // X 轴每份的宽度 <BR>yPices : yPices, // Y 轴每份的宽度 <BR>offset : offset, // X 单分中心点位置偏移量 <BR>jianju : jianju*yPices/f, <BR>feed : f // Y 轴的每份有多少 <BR>}; <BR>return this; <BR>}, <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><br>//画一个框框baseDraw <BR>this.tipBox = this.baseDraw('rect',{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',{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>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><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||'#606060'; <BR>} <br><br>this.tipText.nodeValue = txt || ''; <BR>}, <BR>hideTooltip: function(){ <BR>this.tipC.hide(); <BR>}, <br><br>drawLegend : function(type,redraw){ <BR>var self = this, <BR>opts = this.opts, <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>//最大长度 如果是纵着的 需要最大的长度 <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>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>}else{ <BR>g.chart.show(); <BR>g.show = true; <BR>hasSVG <BR>? this.attr({fill:'#000'}) <BR>: this[0].style.color = '#000' <BR>} <BR>}, <br><br>arr = []; <br><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>self.baseDraw('rect',{ <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>left = left + t_width+2 + t_space; <BR>var w = calTextLen(d.name,css).w <BR>self.baseDraw('span',{ <BR>'text-anchor':'left', <BR>x : left, <BR>y : top+th <BR>}) <BR>.css(extend(css,{cursor:'pointer'})) <BR>.on('click',function(){ <BR>if(opts.charts.type==='pies')return; <BR>handle.call(this,i); <BR>}) <BR>.addText(d.name) <BR>.appendTo(legendPanel); <BR>left = left + w; <br><br>}); <BR>this.baseDraw('rect',{ <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><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',{ <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>var h = calTextLen(d.name,css).h; <br><br>self.baseDraw('span',{ <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>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',{ <BR>arc : 0.1, <BR>fill : 'none', <BR>border : 1.5, <BR>borderColor : '#666666', <BR>width : maxWidth+22+15, <BR>height : top+t_space-orig_pos[1], <BR>left : orig_pos[0], <BR>top : orig_pos[1] <BR>}) <BR>.appendTo(legendPanel); <BR>} <BR>return this; <BR>}, <BR>drawLine : function(){ <BR>var self = this, <BR>opts = this.opts; <BR>draw = opts.draw; <BR>each(opts.chartData,function(i,o){ <BR>var id = 'chart'+i, <BR>lineGroup = self.group(id) <BR>.appendTo(); <BR>self.mainGroup[id]={chart:lineGroup,show:true}; <BR>var path = [M], <BR>data = o.data, <BR>line; <br><br>for(var i = 0; i < data.length; i++){ <BR>if( data[i] == null){ <BR>//如果这个数据不存在 并且不是第一个数据 路径上加 M <BR>if(path[path.length - 1] !== M) <BR>path.push(M); <BR>}else{ <BR>//如果不是第一个数据 路径添加L <BR>i !== 0 && path.push("L"); <BR>//如果前面一个是null 并且不是第一个 把那个L去掉 <BR>if(i > 0 && data[i - 1] == null) <BR>path.pop(); <BR>//计算出 点的x,y的位置 <BR>var x = draw.startX + draw.offset + (i * draw.xPices), <BR>y = draw.startY - (data[i] * (draw.yPices / draw.feed)); <BR>if(isIE){ <BR>x = parseInt(x); <BR>y = parseInt(y); <BR>} <BR>path.push(x); <BR>path.push(y); <BR>//画点 <BR>self.baseDraw('circle',{ <BR>x : x, <BR>y : y, <BR>r : 4, <BR>fillColor : o.color <BR>}) <BR>.attr({data:data[i]}) <BR>.css({zIndex:10,cursor:'pointer'}) <BR>.on('mouseover',(function(o,x,y){ <BR>return function(){ <BR>hasSVG <BR>? (this[0].setAttribute('r','5'),line.attr({'stroke-width':2.5})) <BR>: (this[0].strokeWeight = 3,line[0].strokeWeight = 2.5); <BR>self.showTooltip(o,x,y,this.attr('data')); <BR>} <br><br>})(o,x,y)) <BR>.on('mouseout',function(){ <BR>hasSVG <BR>? (this[0].setAttribute('r','4'),line.attr({'stroke-width':1.5})) <BR>: (this[0].strokeWeight = 1,line[0].strokeWeight = 1.5); <BR>self.hideTooltip() <BR>}) <BR>.on('click',function(){lineGroup.toFront(); }) <BR>.appendTo(lineGroup); <br><br>} <BR>}; <BR>//画折线 <BR>line = self.baseDraw('path',{ <BR>border : 1.5, <BR>borderColor : o.color, <BR>isfill : false, <BR>path : path <BR>}) <BR>.css({zIndex:5}) <BR>.on('mouseover',function(){ <BR>hasSVG <BR>? this.attr({'stroke-width':2.5}) <BR>: (this[0].strokeWeight = 2.5); <BR>}) <BR>.on('mouseout',function(){ <BR>hasSVG <BR>? this.attr({'stroke-width':1.5}) <BR>: (this[0].strokeWeight = 1.5); <BR>}) <BR>.on('click',function(){lineGroup.toFront(); }) <BR>.appendTo(lineGroup); <BR>}); <BR>return this; <BR>}, <BR>drawArea : function(){ <BR>var self = this, <BR>opts = this.opts, <BR>draw = opts.draw; <BR>each(opts.chartData,function(i,o){ <BR>var id = 'chart' + i, <BR>areaGroup = self.group(id).appendTo(); <BR>self.mainGroup[id] = {chart : areaGroup,show : true}; <BR>//有2个路径 一个是区域的路径 一个是线的路径 <br><br>var areaPath = [M, (draw.startX + draw.offset).toFixed(0), (draw.startY-draw.jianju).toFixed(0)], <BR>path = [M], <BR>data = o.data, <BR>line; <BR>for(var n=0,l=data.length;n<l;n++){ <BR>//如果数据是空的 <BR>var len = areaPath.length; <BR>if( data[n] === null){ <BR>//如果前面的一个不是m 就重新画 所以加上 M <BR>if(path[path.length - 1] !== M) <BR>path.push(M); <br><br>//如果第1个 或者前面的都为bull 修改起点坐标 <BR>len===3 <BR>&&(areaPath[1] = (draw.startX +(n+1)*draw.xPices + draw.offset).toFixed(0)); <br><br>//如果前面一个不是结束标识符 区域图结束 如果第一个数据是null 则不进行下面的操作 <BR>if(areaPath[len - 1] !== seal&&n!==0){ <BR>areaPath=areaPath.concat([ <BR>areaPath[len - 2], <BR>(draw.startY-draw.jianju).toFixed(0), <BR>seal <BR>]); <BR>} <BR>}else{ <BR>n !== 0 && path.push(L); <BR>areaPath.push(L); <BR>//如果前面的那个数据是null 把之前的那个L去掉 <BR>if(n > 0 && data[n - 1] == null){ <BR>path.pop(); <BR>//如果是第一个为null 不删除L <BR>n!==1&&areaPath.pop(); <BR>} <br><br>var x = draw.startX + draw.offset + (n * draw.xPices), <BR>y = draw.startY - ((data[n]) * (draw.yPices / draw.feed)); <BR>if(isIE){ <BR>x = parseInt(x); <BR>y = parseInt(y); <BR>} <BR>path.push(x); <BR>path.push(y); <br><br><BR>if(areaPath[len - 1] === seal){ <BR>areaPath = areaPath.concat([ <BR>M, <BR>x, <BR>parseInt(draw.startY-draw.jianju), <BR>L, <BR>x, <BR>y <BR>]); <BR>}else{ <BR>areaPath.push(x); <BR>areaPath.push(y); <BR>} <br><br>//如果是最后一个点 <BR>if(n === l - 1){ <br><br>areaPath.push(x); <br><br>areaPath.push(parseInt(draw.startY-draw.jianju)); <BR>} <br><br>//画点 <BR>self.baseDraw('circle',{ <BR>x : x, <BR>y : y, <BR>r : 4, <BR>fillColor : o.color <BR>}) <BR>.attr({data:data[n]}) <BR>.on('mouseover',(function(o,x,y){ <BR>return function(){ <BR>hasSVG <BR>? (this[0].setAttribute('r','5'),line.attr({'stroke-width':2.5})) <BR>: (this[0].strokeWeight = 3,line[0].strokeWeight = 2.5); <BR>self.showTooltip(o,x,y,this.attr('data')); <BR>} <br><br>})(o,x,y)) <BR>.on('mouseout',function(){ <BR>hasSVG <BR>? (this[0].setAttribute('r','4'),line.attr({'stroke-width':1.5})) <BR>: (this[0].strokeWeight = 1,line[0].strokeWeight = 1.5); <BR>self.hideTooltip() <BR>}) <BR>.on('click',function(){areaGroup.toFront(); }) <BR>.css({zIndex:10,cursor:'pointer'}) <BR>.appendTo(areaGroup); <br><br>} <BR>} <br><br>areaPath.push(seal) <br><br>self.baseDraw('path',{ <BR>border : 0, <BR>isfill : true, <BR>fillColor : o.color, <BR>opacity : 0.5, <BR>path : areaPath <BR>}) <BR>.css({zIndex:5}) <BR>.appendTo(areaGroup); <br><br>line = self.baseDraw('path',{ <BR>border : 2.5, <BR>borderColor : o.color, <BR>isfill : false, <BR>path : path <BR>}) <BR>.on('mouseover',function(){ <BR>hasSVG <BR>? this.attr({'stroke-width':2.5}) <BR>: (this[0].strokeWeight = 2.5); <BR>}) <BR>.on('mouseout',function(){ <BR>hasSVG <BR>? this.attr({'stroke-width':1.5}) <BR>: (this[0].strokeWeight = 1.5); <BR>}) <BR>.on('click',function(){areaGroup.toFront(); }) <BR>.css({zIndex:-1}) <BR>.appendTo(areaGroup); <BR>}); <BR>return this; <BR>}, <BR>drawColumns : function(){ <BR>var self = this, <BR>opts = this.opts, <BR>draw = opts.draw, <BR>chartData = opts.chartData, <BR>dataLen = chartData.length, <BR>//多个柱子之间的间距 <BR>columnSpace = 3, <BR>//一个位置中 所有的间隔之和 <BR>columnPadding = columnSpace * dataLen + columnSpace, <BR>//每个柱子的宽度 <BR>columnSize = self.opts.charts.panel==='x' <BR>? Number(((draw.xPices - columnPadding) / dataLen).toFixed(0)) <BR>: Number(((draw.yPices - columnPadding) / dataLen).toFixed(0)); <br><br>each(chartData, function(i,o){ <BR>var data = o.data, <BR>id = 'chart' + i, <BR>isX = opts.charts.panel==='x', <BR>colGroup = self.group(id).appendTo(), <BR>//每个点开始的位置 <BR>start = self.opts.charts.panel==='x' <BR>? draw.startX + columnSpace + i*(columnSize+columnSpace) <BR>: draw.startY + columnSpace + i*(columnSize+columnSpace) <br><br>self.mainGroup[id] = {chart:colGroup,show:true}; <br><br>for(var j = 0,l=data.length; j < l ; j++){ <BR>if(data[j]===null) continue; <BR>//如果是横盘子 <BR>if(isX){ <BR>var x = Number((start + j *draw.xPices ).toFixed(0)), <BR>y = Number((draw.startY).toFixed(0)), <BR>height = Number((data[j] * (draw.yPices / draw.feed)).toFixed(0)), <BR>path = [ <BR>M, <BR>x, <BR>y, <BR>L, <BR>x, <BR>y -height, <BR>L, <BR>x + columnSize, <BR>y - height, <BR>L, <BR>x + columnSize, <BR>y, <BR>seal <BR>]; <BR>var pos = [x+columnSize/2,data[j]>0?y-height:draw.startY]; <BR>}else{ <br><br>var x = Number((draw.startX).toFixed(0)), <BR>width = Number((data[j]*((draw.xPices / draw.feed))).toFixed(0)), <BR>y = Number((start - (j+1) *draw.yPices ).toFixed(0)), <BR>path = [ <BR>M, <BR>x, <BR>y, <BR>L, <BR>x+ width, <BR>y , <BR>L, <BR>x + width, <BR>y + columnSize, <BR>L, <BR>x , <BR>y+ columnSize, <BR>seal <BR>]; <BR>var pos = [draw.startX+width/2,y-columnSize]; <BR>} <br><br>self.baseDraw('path',{ <BR>border : 0, <BR>isfill : true, <BR>fillColor : o.color, <BR>opacity : 1, <BR>path : path <BR>}) <BR>.attr({data:data[j]}) <BR>.css({zIndex:5,cursor:'pointer'}) <BR>.on('mouseover',(function(x,y,d){ <br><br>return function(){ <br><br>this.setOpacity(0.85); <br><br>self.showTooltip(o,x,y,this.attr('data')); <BR>} <br><br>})(pos[0],pos[1],data[j]) <br><br>) <BR>.on('mouseout',(function(x,y){ <BR>return function(){ <BR>this.setOpacity(1); <BR>self.hideTooltip(); <BR>} <BR>})(x,y)) <BR>.appendTo(colGroup); <br><br>} <BR>}); <BR>return this; <BR>}, <BR>drawPie : function(){ <BR>var self = this, <BR>opts = this.opts, <BR>area = opts.area, <BR>rx = area.centerX, <BR>ry = area.centerY, <BR>inc = 0, <BR>total = 0, <BR>data = [], <BR>cumulative = -0.25, // start at top; <BR>circ = 2 * Math.PI, <BR>radiu = mathMin(opts.charts.radius,mathMin(area.areaWidth/2,area.areaHeight/2)), <BR>fraction, <BR>half_fraction; <br><br>each(opts.chartData,function(i,o){ <BR>typeof o.data ==='object' <BR>? (data.push((function(o){ <BR>var all =0; <BR>for(var i in o) <BR>all+=~~o[i] <BR>return all <BR>})(o.data))) <BR>:data.push(mathAbs(o.data)) <br><br>}); <br><br>each(data,function(i,o){ <BR>total = total + o; <BR>}); <br><br>each(data,function(i,o){ <BR>var pieGroup = self.group('chart'+i).appendTo(), <BR>s = inc/total*360, <BR>e = (inc + o)/total*360, <BR>name = opts.chartData[i].name, <BR>size = calTextLen(name), <BR>dot = angle(radiu,[rx,ry],s+(e-s)/2,2), <BR>x = rx + (dot[0]-rx)/2 - size.w/2, <BR>y = ry + (dot[1]-ry)/2 - size.h/2, <BR>len = Math.sqrt((x-rx)*(x-rx)+(y-ry)*(y-ry)), <BR>moveDisplacement = ((x-rx)*8/len)+','+((y-ry)*8/len); <br><br>inc = inc + o; <br><br>var value = Number(o); <BR>fraction = total ? value / total : 0; <BR>half_fraction = total ? (value / 2) / total : 0; <br><br>var start = cumulative * circ; <BR>half_cumulative = cumulative + half_fraction; <BR>cumulative += fraction; <br><br>var end = cumulative * circ; <br><br>self.baseDraw('pie',{ <BR>config : opts.chartData[i], <BR>s : start, <BR>e : end, <BR>r : radiu, <BR>innerR : 0 <BR>}) <BR>.css({zIndex:5,cursor:'pointer'}) <BR>.attr({move:moveDisplacement}) <BR>.on('mouseover',function(){ <BR>this.setOpacity(0.85); <BR>}) <BR>.on('mouseout',function(){ <BR>this.setOpacity(1); <BR>}) <BR>.on('click',function(){ <BR>var m = this.attr('move') <BR>if(m.indexOf('+')>0){ <BR>hasSVG <BR>? this.attr({ <BR>transform: 'translate(0,0)' <BR>}) <BR>: this.css({ <BR>left : '0px', <BR>top : '0px' <BR>}) <BR>this.attr({move:m.replace('+','')}); <br><br>}else{ <BR>var s= m.split(','); <BR>hasSVG <BR>? this.attr({ <BR>transform: 'translate('+m+')' <BR>}) <BR>: this.css({ <BR>left : s[0]+'px', <BR>top : s[1]+'px' <BR>}) <br><br>this.attr({move:m+'+'}); <BR>} <BR>}) <BR>.appendTo(pieGroup); <br><br>self.mainGroup['chart'+i] = {chart:pieGroup,show:true}; <br><br>self.baseDraw('span',{ <BR>x : x, <BR>y : y, <BR>fill : '#fff', <BR>'text-anchor':'left' <BR>}) <BR>.css({ <BR>fontFamily : 'Verdana,Arial,Helvetica,sans-serif', <BR>fontSize : '12px', <BR>position : 'absolute', <BR>color : '#fff', <BR>zIndex : 10 <BR>}) <BR>.addText(name) <BR>.appendTo(pieGroup); <BR>}); <br><br>}, <BR>drawPies : function(){ <br><br>var self = this, <BR>opts = this.opts, <BR>area = opts.area, <BR>rx = area.centerX, <BR>ry = area.centerY, <BR>total = 0, <BR>data = [], <BR>chartData = opts.chartData, <BR>cumulative = -0.25, // start at top; <BR>circ = 2 * Math.PI, <BR>radiu = mathMin(opts.charts.radius,mathMin(area.areaWidth/2,area.areaHeight/2)), <BR>fraction, <BR>half_cumulative, <BR>half_fraction; <br><br>each(chartData,function(i,o){ <BR>each(o.data,function(j,d){ <BR>data[j] <BR>? data[j] +=mathAbs(d) <BR>: data[j] =mathAbs(d) <BR>}); <br><br>}); <BR>//看有多少个数据来生成来生成内半径 <BR>var len = data.length, <BR>innerSpace = radiu / 10; <BR>Rpice = (radiu - innerSpace) / len, <BR>piesGroup = this.group('pies').appendTo(); <br><br>each(data,function(i,d){ <BR>var inc = 0 ; <BR>if(d===0) return; <BR>each(chartData,function(j,o){ <BR>if(~~o.data[i]===0)return; <BR>var outR = radiu - Rpice * i, <BR>innerR = radiu - Rpice * (i + 1), <BR>value = ~~o.data[i], <BR>fraction = value / d; <BR>half_fraction = (value/2)/d , <BR>start = cumulative * circ, <BR>s = inc/d*360, <BR>e = (inc + value)/d*360; <br><br>inc = inc + value; <BR>var name = o.name, <BR>size = calTextLen(name), <BR>dot = angle(radiu,[rx,ry],s+(e-s)/2,2), <BR>px = dot[0]>rx?1:-1, <BR>py = dot[1]>ry?1:-1; <BR>var x = rx + px*innerSpace + ((dot[0]-rx-px*innerSpace)/len)*(len-i-1)+((dot[0]-rx-px*innerSpace)/len)/2- size.w/2, <BR>y = ry + py*innerSpace +((dot[1]-ry-py*innerSpace)/len)*(len-i-1)+((dot[1]-ry-py*innerSpace)/len)/2- size.h/2; <br><br>half_cumulative = cumulative + half_fraction, <BR>cumulative += fraction, <BR>end = cumulative * circ; <br><br>self.baseDraw('pie',{ <BR>config : o, <BR>s : start, <BR>e : end, <BR>r : outR, <BR>innerR : innerR <BR>}) <BR>.css({zIndex:5,cursor:'pointer'}) <BR>.on('mouseover',function(){ <BR>this.setOpacity(0.85); <BR>}) <BR>.on('mouseout',function(){ <BR>this.setOpacity(1); <BR>}) <BR>.appendTo(piesGroup); <BR>self.baseDraw('span',{ <BR>x : x, <BR>y : y, <BR>fill : '#fff', <BR>'text-anchor':'left' <BR>}) <BR>.css({ <BR>fontFamily : 'Verdana,Arial,Helvetica,sans-serif', <BR>fontSize : '12px', <BR>position : 'absolute', <BR>color : '#fff', <BR>zIndex : 10 <BR>}) <BR>.addText(name) <BR>.appendTo(piesGroup); <br><br>}) <BR>}); <br><br>}, <BR>drawSegment : function(){ <BR>var self = this, <BR>opts = this.opts, <BR>draw = opts.draw, <BR>chartData = opts.chartData, <BR>columnPad = 5, <BR>columnWidth = draw.xPices - columnPad * 2; <br><br>each(chartData,function(i,c){ <br><br><BR>}); <BR>}, <BR>baseDraw : function(type,config){ <BR>var self = this <BR>arg = arguments; <BR>return { <BR>rect : function(){ <BR>var set = {}; <BR>set.rx = set.ry = config.arc*30 || 5; <BR>set.width = config.width || 50; <BR>set.height = config.height || 50; <BR>set.fill = config.fill || '#fff'; <BR>set['fill-opacity'] = config.opacity || 0.85; <BR>set['stroke-width'] = config.border || 2; <BR>set.stroke = config.borderColor || '#606060'; <BR>set.transform = 'translate('+(config.left||0)+','+(config.top||0)+')'; <BR>return self.createElement('rect') <BR>.attr(set) <br><br>}, <BR>text : function(){ <BR>return self.createElement('text') <BR>.attr(config) <BR>}, <BR>span : function(){ <BR>var elem= self.createElement('text') <BR>.attr(config) <BR>.attr({ <BR>y : config.y+(arg[2]||15) <BR>}) <BR>return elem; <BR>}, <BR>path : function(){ <BR>var set = {}; <BR>set['stroke-width'] = config.border; <BR>set.stroke = config.borderColor || '#C0C0C0'; <BR>set.fill = config.isfill?config.fillColor:'none'; <BR>set.d = config.path; <BR>config.opacity <BR>&&(set['fill-opacity'] = config.opacity); <br><br>return self.createElement('path') <BR>.attr(set); <BR>}, <BR>circle : function(){ <BR>var set = {}; <BR>set.cx = config.x; <BR>set.cy = config.y; <BR>set.r = config.r; <BR>set.fill = config.fillColor; <BR>return self.createElement('circle') <BR>.attr(set); <BR>}, <BR>pie : function(){ <BR>//config,s,e,r,index <BR>var opts = self.opts, <BR>s = config.s, <BR>r = config.r, <BR>e = config.e - 0.000001, <BR>id = 'chart'+config.index, <BR>area = opts.area, <BR>rx = area.centerX, <BR>ry = area.centerY, <BR>cosStart = mathCos(s), <BR>sinStart = mathSin(s), <BR>cosEnd = mathCos(e), <BR>sinEnd = mathSin(e), <BR>color = config.config.color, <BR>innerR = config.innerR, <BR>longArc = e - s < Math.PI ? 0 : 1, <BR>path = [ <BR>M, <BR>rx + r * cosStart, <BR>ry + r * sinStart, <BR>'A', <BR>r, <BR>r, <BR>0, <BR>longArc, <BR>1, <BR>rx + r * cosEnd, <BR>ry + r * sinEnd, <BR>L, <BR>rx + innerR * cosEnd, <BR>ry + innerR * sinEnd, <BR>'A', // arcTo <BR>innerR, // x radius <BR>innerR, // y radius <BR>0, // slanting <BR>longArc, // long or short arc <BR>0, // clockwise <BR>rx + innerR * cosStart, <BR>ry + innerR * sinStart, <BR>'Z' <BR>]; <br><br>return self.baseDraw('path',{ <BR>border : 1, <BR>border : '#fff', <BR>isfill : true, <BR>fillColor : color, <BR>opacity : 1, <BR>path : path <br><br>}) <br><br>} <BR>}[type](); <BR>} <BR>}; <br><br>//--------------------------------------------------------------------------------------------------- <BR>//如果是vml 修改smipleChart.prototype中的一些方法 <BR>!hasSVG <BR>&&extend(smipleChart.prototype,{ <BR>baseDraw : function(type,config){ <BR>var self = this, <BR>width = this.width, <BR>height = this.height, <BR>name = arguments[2]; <BR>return { <BR>rect : function(){ <BR>var attr = {}, <BR>css = {}; <BR>attr.arcsize = config.arc || 0.2 +''; <BR>if(config.fill==='none'){ <BR>attr.filled = 'f' <BR>}else{ <BR>attr.filled = 't'; <BR>attr.fillcolor = config.fill || '#fff'; <BR>} <br><br>attr.strokeWeight = config.border || 2; <BR>attr.strokeColor = config.borderColor || '#606060'; <BR>css.width = config.width || 50 +'px'; <BR>css.height = config.height || 50 +'px'; <BR>css.zIndex = 10; <BR>css.left = config.left||0+'px'; <BR>css.top = config.top ||0+'px'; <br><br>return self.createElement('roundrect') <BR>.attr(attr) <BR>.css(css) <BR>}, <BR>text : function(){ <BR>return self.createElement('TextBox') <BR>.attr({inset : "2px,2px,2px,2px" }) <BR>}, <BR>span : function(){ <BR>return self.createElement('span'). <BR>css({ <BR>position:'absolute', <BR>left : config.x+'px', <BR>top : config.y+'px' <BR>}) <BR>}, <BR>path : function(){ <BR>var attr = {}, <BR>css = { <BR>width : width+'px', <BR>height : height+'px' <BR>}; <br><br>if(config.border===0){ <BR>attr.Stroked = 'f'; <BR>attr.strokeWeight =0; <BR>}else{ <BR>attr.strokeWeight = config.border||1 ; <BR>} <BR>attr.strokeColor = config.borderColor || "#C0C0C0"; <BR>attr.filled = config.isfill?'t':'f'; <BR>attr.filled==='t' <BR>&&(attr.fillcolor=config.fillColor||"#C0C0C0"); <BR>attr.coordsize = width+','+height; <BR>attr.path = config.path; <BR>var elem = self.createElement() <BR>.attr(attr) <BR>.css(css); <BR>if(config.opacity){ <BR>var fill = self.createElement('fill') <BR>.attr({ <BR>type : 'fill', <BR>color : config.fillColor||"#C0C0C0", <BR>opacity : config.opacity <BR>}) <BR>.appendTo(elem); <BR>//那这个对象的一个属性引用设置透明的元素 以后会用到 <BR>elem.opacity = fill[0]; <BR>} <BR>return elem; <br><br>}, <BR>circle : function(){ <BR>var attr ={ <BR>strokeWeight : 1, <BR>coordsize : width+','+height, <BR>filled : 't' <BR>}, <BR>css ={ <BR>width : width+'px', <BR>height : height+'px' <BR>} <BR>x = config.x, <BR>y = config.y, <BR>r = config.r; <BR>attr.strokeColor=attr.fillcolor = config.fillColor <br><br>attr.path =[ <BR>'wa', // clockwisearcto <BR>x - r, // left <BR>y - r, // top <BR>x + r, // right <BR>y + r, // bottom <BR>x + r, // start x <BR>y, // start y <BR>x + r, // end x <BR>y, // end y <BR>'e' // close <BR>]; <BR>return self.createElement() <BR>.attr(attr) <BR>.css(css) <BR>}, <BR>pie : function(){ <BR>////config,s,e,r,index <br><br>var opts = self.opts, <BR>area = opts.area, <BR>r = config.r, <BR>rx = area.centerX, <BR>ry = area.centerY, <BR>innerR= config.innerR||0, <BR>sDot = angle(r,[rx,ry],s,2), <BR>eDot = angle(r,[rx,ry],e,2), <BR>color = config.config.color, <BR>s = config.s, <BR>e = config.e, <BR>e = e - s == 2 * Math.PI ? e - 0.001 : e, <BR>cosStart = mathCos(s), <BR>sinStart = mathSin(s), <BR>cosEnd = mathCos(e), <BR>sinEnd = mathSin(e), <br><br><BR>path = [ <BR>'wa', // clockwisearcto <BR>(rx - r).toFixed(0), // left <BR>(ry - r).toFixed(0), // top <BR>(rx + r).toFixed(0), // right <BR>(ry + r).toFixed(0), // bottom <BR>(rx + r * cosStart).toFixed(0), // start x <BR>(ry + r * sinStart).toFixed(0), // start y <BR>(rx + r * cosEnd).toFixed(0), // end x <BR>(ry + r * sinEnd).toFixed(0), // end y <br><br>'at', // clockwisearcto <BR>(rx - innerR).toFixed(0), // left <BR>(ry - innerR).toFixed(0), // top <BR>(rx + innerR).toFixed(0), // right <BR>(ry + innerR).toFixed(0), // bottom <BR>(rx + innerR * cosEnd).toFixed(0), // start x <BR>(ry + innerR * sinEnd).toFixed(0), // start y <BR>(rx + innerR * cosStart).toFixed(0), // end x <BR>(ry + innerR * sinStart).toFixed(0), // end y <br><br>'x', // finish path <BR>'e' // close <BR>]; <br><br>return self.baseDraw('path',{ <BR>border : 1, <BR>border : '#fff', <BR>isfill : true, <BR>fillColor : color, <BR>opacity : 1, <BR>path : path <BR>}) <br><br>} <BR>}[type](); <BR>} <BR>}); <br><br>//--------------------------------------------------------------------------------------------------- <BR>})(document); <br><br>window.onload = function(){ <BR>var config = { <BR>charts : { <BR>type : 'line', <BR>radius : 150, <BR>panel : 'x', <BR>style: { <BR>fontFamily: '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', // default font <BR>fontSize: '12px' <BR>} <BR>}, <BR>title : { <BR>text : '线性图标' , <BR>y : 10, <BR>style : { <BR>color: 'black', <BR>fontSize: '16px' <BR>} <BR>}, <BR>subTitle : { <BR>text : '线性图标副标题', <BR>y : 35, <BR>style: { <BR>color: '#111', <BR>fontSize: '12px' <BR>} <BR>}, <BR>legend : { <BR>enable : true, <BR>//type : 'lateral', // lateral 横向 或 lengthwise 纵向 <BR>type : 'lateral', <BR>pos : [10,10], <BR>style:{ <BR>fontFamily: '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', // default font <BR>fontSize: '12px', <BR>magin:'0px' <BR>} <BR>}, <BR>yUnit : { <BR>text : '线性图标侧标题', <BR>x : 20, <BR>style: { <BR>color : '#111', <BR>fontSize : '12px' <BR>} <BR>}, <BR>xUnit : { <BR>units: [ <BR>'一月', <BR>'二月', <BR>'三月', <BR>'四月', <BR>'五月', <BR>'六月', <BR>'七月', <BR>'八月', <BR>'九月', <BR>'十月', <BR>'十一月', <BR>'十二月' <BR>] <BR>}, <BR>chartData : [ <BR>{ <br><br>name : 'xcv', <BR>color : '#4572A7', <BR>data : [-18,45,-38,29,95,-45,77] <BR>}, { <br><br>name: 'frfr', <BR>color: '#AA4643', <BR>data: [-44,12,78,-100,13,4,-56,-34] <BR>}, { <BR>name: 'AAAAA', <BR>color: '#89A54E', <br><br>data: [null,78,83,null,22,-78,2,44,78] <BR>}, { <BR>name: 'BBBB', <BR>color: '#80699B', <BR>data: [null, 58, 35, null, 52, 47, 26, -55, 39, 123,15,66] <BR>} <BR>] <BR>}; <br><br>new smipleChart($('line'),config); <BR>config.charts.type ='area'; <BR>config.title.text ='区域图标' <BR>config.subTitle.text='区域图标副标题' <BR>config.yUnit.text ='区域图标侧标题' <br><br>new smipleChart($('area'),config); <BR>config.title.text ='柱状图标' <BR>config.subTitle.text='柱状图标副标题' <BR>config.yUnit.text ='柱状图标侧标题' <BR>config.charts.type ='columns'; <BR>config.chartData =[ <BR>{ <br><br>name : 'xcv', <BR>color : '#4572A7', <br><br>data : [-0.01,-0.62,0,0.55,null,0.78,-0.63,-0.82,null,null,0.33] <BR>}, { <br><br>name: 'frfr', <BR>color: '#AA4643', <BR>data: [-0.22,0.82,0.55,1.32,0.33,0.95,null,1,0.65,null,0.78] <BR>}, { <BR>name: 'AAAAA', <BR>color: '#89A54E', <br><br>data: [null,0.62,0.34,null,0.63,0,-0.23,-1,0.62,0.45,null,-0.56] <BR>} <BR>] <br><br>new smipleChart($('zhu'),config); <BR>config.charts.panel='y' <BR>new smipleChart($('zhu1'),config); <BR>config.charts.type ='pie'; <BR>config.title.text ='饼图图标' <BR>config.subTitle.text='饼图图标副标题' <BR>config.yUnit.text ='' <BR>config.legend.type='lengthwise'; <BR>config.chartData =[ <BR>{ <br><br>name : 'aaa', <BR>color : '#4572A7', <br><br>data : [433,123,null,66] <BR>}, { <br><br>name: 'bbb', <BR>color: '#AA4643', <BR>data: [45,33,33,511] <BR>}, { <BR>name: 'ccc', <BR>color: '#89A54E', <br><br>data: [55,null,75,333] <BR>} <BR>] <BR>config.legend.pos= [680,30] <BR>new smipleChart($('pie'),config); <BR>config.charts.type ='pies'; <BR>config.title.text ='多层饼图图标' <BR>config.subTitle.text='多层饼图图标副标题' <BR>config.legend.type='lateral'; <BR>config.legend.pos= [330,400] <BR>new smipleChart($('pies'),config); <br><br><BR>config.chartData =[ <BR>{ <br><br>name : 'xcv', <BR>color : '#4572A7', <br><br>data : [433,355,275,null,588,323,576,32,99] <BR>}, { <br><br>name: 'frfr', <BR>color: '#AA4643', <BR>data: [45,666,100,null,677,56,88,633,55,64] <BR>}, { <BR>name: 'AAAAA', <BR>color: '#89A54E', <br><br>data: [55,162,75,null,364,0,637,112,163,615] <BR>} <BR>] <BR>config.yUnit.lineNum = 2; <BR>config.title.text ='比较小的' <BR>config.subTitle.text='只设置了2条线' <BR>config.yUnit.text ='小测标题' ; <br><br>config.charts.type ='line'; <BR>config.legend.pos= [10,10] <BR>new smipleChart($('vv'),config); <BR>config.yUnit.lineNum = 10; <BR>config.charts.panel = 'x'; <BR>config.charts.type ='segment'; <BR>//new smipleChart($('segment'),config); <br><br>} <BR>