javascript使用smipleChart實作簡單圖表_javascript技巧

支援 線性圖 區域圖 長條圖 圓餅圖

支援多瀏覽器

用到的是svg  vml

複製程式碼 程式碼如下:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

（函數（文檔，未定義）{
 var win       = 這個，
  uuuid = -1,
  hasSVG    = win.SVGAngle || doc.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1"),
,
  isIE      = /msie/i.test(navigator.userAgent) && !win.opera,
  路徑      = hasSVG?'d':'路徑',
  seal      = hasSVG?'z':'e',
  數學      = 數學，
  mathRound = math.round,
  mathFloor = math.floor,
  mathCeil = math.ceil,
  mathMax   = math.max,
  mathMin   = math.min,
  mathAbs = math.abs,
  mathCos   = math.cos，
  mathSin = math.sin,    
  M         = 'M',
  L         = 'L';
 win.$$ = 函數(Id){
  return document.getElementById(Id);
 };
 win.extend = function(){
  var 目標 = 參數[0] || {}, i = 1, length = argument.length, deep = true, options;
  if ( typeof target === "boolean" ) {
   深度=目標；
   目標=參數[1] || {};
   我 = 2;
  }
  if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]")
   目標 = {};
  for(;i    if ( (options = argument[ i ]) != null )
    for(選項中的變數名稱){
     var src = target[ name ], copy = options[ name ];
     if ( 目標 === 複製 )
      繼續；
     if ( deep && copy && typeof copy === "object" && !copy.nodeType ){
      target[ name ] = argument.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy );
     }  
     else if(複製！==未定義)
      目標[姓名]=複製；                      
    }
 
  }
  返回目標；          
 };
 
 win.each = 函數（物件、回呼、參數）{
  var name, i = 0, length = object.length; 
  if ( args ) {
   args = Array.prototype.slice.call(arguments).slice(2);
   if ( 長度 === 未定義 ) { 
    for (物件中的名稱)
     if (callback.apply(object[ name ],[name,object[ name ]].concat(args) ) === false ) 
      休息; 
   } 其他
    for ( ; i      if (callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false )   //
      休息; 
  } 其他 {    
   if ( 長度 === 未定義 ) { 
    for (物件中的名稱)
     if (callback.call(object[ name ], name, object[ name ] ) === false ) 
      休息; 
   } 其他
    for ( var value = object[0]; 
     我   } 
  回傳對象； 
 };
 
 win.contains = function(p,c){
  if(!p||!c)回傳 false;
  if(p===c)回傳 true;
  返回是IE
   ？ p.contains(c)
   : p.compareDocumentPosition(c)==20
    ？是的
    ：假；
 };
//------------------------------------------------ ---------------
 函數 processPoint( x ){  返回是IE？ ~~x.toFixed(0) : ~~x.toFixed(0) 0.5;
 };
 函數 calTextLen(txt, cssStr){
  var span = doc.createElement('span');
  if(cssStr){
   typeof cssStr === '字串'
    ？ span.style.cssText = cssStr
    : 擴充(span.style,cssStr);
  }其他{
   擴充（span.style，{
    字體大小    : '12px',
    fontFamily : '「Lucida Grande」、「Lucida Sans Unicode」、Verdana、Arial、Helvetica、sans-serif'    
   });
  }
  span.innerHTML = txt || ''; 
  span.style.visibility = '隱藏';
  doc.body.appendChild(span);  
  var width = 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);
  返回[x.toFixed(jingdu||0),y.toFixed(jingdu||0)];  
 }
 函數 xx(a,b,lineNum){
  var t = 1000,
   stf = ((b*t-a*t)/lineNum)/t,
   arr = [1,2,2.5,5,10],
   c   = 1，
   v;
//    分割線的基數是 [1,2,2.5,5,10] 這個步驟是查找間隔屬於哪個範圍
  if(stf    while( stf     c = c*10;
    arr[0]=arr[0]/c; 
   }
   每個([1,2,2.5,5,10],函數(i,o){
    arr[i]= o/c;
   });
  }否則 if(stf>arr[4]){
   while( stf>arr[4] ){
    c = c*10;
    arr[4] = arr[4]*c;
   }
   每個([1,2,2.5,5,10],函數(i,o){
   arr[i]= o*c;
   });
  }
 
//上面找到間隔後找到間隔中最接近的
  每個（arr，函數（i，o）{
   if(stf     v = o;
    回傳錯誤；
   }
  });
  var bj = (mathAbs(a)*t)/(v*t),
   ba = 0,
   isZ = bj!==parseInt(bj);
  是Z
   &&a>0
    ？ ba = -a%v*t
    : ba = (mathAbs(a)%v-v)*t;  
  
  
  a = (a*t ba)/t;
  b = (b*t (b%v===0?0:(v-b%v))*t)/t;
  
  //看看剩下幾條線沒有畫
  var num = Math.max(0,lineNum - Math.round((b-a)/v));
  if(a>=0){
  
  //座標比較整數化
   if(a!=0&&num!=0&&a !==0){
    while(a!=0&&num!=0){
     a = (a*t-v*t)/t;
     數字--;
     if((a*t-v*num*t)/10000>0&&a ===0)
     休息；
    }
   }
   
   if(num!=0){
    while(num!==0){
    b = (b*t v*t)/t
    數--；
    }
   }    
  
  }其他{
   //座標比較整數化
   if(b     while(b!=0&&num!=0&&b !==0){
     b = (b*t v*t)/t;
     數字--;
     if((b*t v*num*t)/t      休息;
    }
   }
   if(num!=0){
    while(num!==0){
     a = (a*t-v*t)/t
     數--；
    }
   }    
  }
  返回 {min:a,max:b,stf:v};
 } 
//------------------------------------------------ -------------------------------------------------- -------------
//對svg vml元素的一些建立修改屬性樣式刪除==一些操作
 win.vector = function(){};
 向量.prototype = {
  $c : 函數(圖形,節點名稱){
   this.element = this[0] = doc.createElementNS('http://www.w3.org/2000/svg', nodeName);   
   this.graphic = 圖形;
   返回此；
  },
  attr：函數（哈希，val）{
   var elem    = this.element,
    關鍵，
    值；
   if(typeof hash === 'string'){
    if(val === 未定義){
     return elem.getAttribute(hash);
    }其他{
     elem.setAttribute(hash, val);
     返回此；
    }
   } 其他 {
    for（哈希中的鍵）{
     值 = 哈希[鍵];
     if(key === 路徑){
      value && value.join
       &&(value = value.join(' '));
      /(NaN|  |^$)/.test(值)
       &&(值 = 'M 0 0');
     }
     elem.setAttribute(key, value)  
    }
   }
   返回此；
  },
  css：函數（雜湊）{
   for（哈希中的 var key）{
    isIE && key == "不透明度"
     ？ this[0].style['filter'] = "alpha(opacity=" hash[key] * 100 ")"
     : this[0].style[key] = hash[key];
   }
   返回此；
  },
  on: 函數(事件名稱, 處理程序){
   var self = this;
   /*this.element.addEventListener(eventName,function(){
    handler.call(self)
   },假);*/
   this.element['on' eventName] = function(e){
    e = e || win.event;
    handler.call(self,e);
   }   
   返回此；
  },
  追加到：函數（父級）{
   如果（父級）{
    父元素
     ？ Parent.element.appendChild(this.element)
     :parent.appendChild(this.element)
    
   } 其他 {
    this.graphic.container.appendChild(this.element);
   }
   返回此；
  },
  addText: 函數(str){
   var elem = this.element;
   if(elem.nodeName === '文字'){
    elem.appendChild(doc.createTextNode(str ''));
   }
   返回此；
  },
  setOpacity : 函數(v){
   this.attr('填入不透明度',v);
   返回此；
  },
  setSize : 函數(v){
   this[0].nodeName==='圓'
    ？ this.attr('r',4 (v===0?0:2))
    : this.attr({'筆畫寬度':v});
   返回此；
  },
  toFront: 函數() {
   this[0].parentNode.appendChild(this[0]);
   返回此；
  },  
  顯示：函數(){
   this[0].style.display = 'block';
   返回此；
  },
  隱藏：函數(){
   this[0].style.display = '無';
   回這個；    
  },
  銷毀：函數（）{
   //檢索重點......................
   var 節點 = this[0] ||這個；
   node.onmouseover = node.onmouseout = node.onclick = null;
   節點.parentNode
    &&node.parentNode.removeChild(node);
   返回此；
  }
 };
//------------------------------------------------ -------------------------------------------------- -------------
//------------------------------------------------ -------------------------------------------------- -
//如果是vml修改其中的一些方法 
 if(!hasSVG){
//-------------創建vml環境----------------- 
  doc.createStyleSheet().addRule(".vml", "behavior:url(#default#VML);display:inline-block;position:absolute;left:0px;top:0px");
  !doc.namespaces.vml && ! "v1";
  doc.namespaces.add("vml", "urn:schemas-microsoft-com:vml");  
  
//-------------修改一些方法-----------------
  extend(vector.prototype,{
   $c : function(graphic,nodeName){
    var name = nodeName || 'shape'; 
    this.element= this[0] = (name === 'div' || name === '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){
    this[0].innerHTML = txt || '';
    return this;
   },
   setSize : function(v){
    this[0].strokeWeight = v;
    return this;
   },   
   setOpacity : function(v){
    this.opacity.opacity=v;
    return this;
   }  
  });
 }
//------------------------------------------------ -------------------------------------------------- -
//畫圖類別
//------------------------------------------------ ------------
 win.smipleChart = function(){
  this.init.apply(this,arguments);
 };
 smipleChart.list      = [];
 smipleChart.timer     = null;
 smipleChart.lazyLoad  = function(id){
  id  = id || '0'
  smipleChart.list[id]
   &&smipleChart.list[id].loadMe();
 };
 smipleChart.prototype = {
  options : {
   charts : {
    paddingRight : 20,
    radius : 200,
    style  : {
     fontFamily : '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif',
     fontSize   : '12px',
     background : '#FFFFFF'
    }
   },
   title : {
    text  : '',
    y     : 10,
    style : {
     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  : '',
    style : {
     fontFamily:'Verdana,Arial,Helvetica,sans-serif',
     fontSize:'12px',      
     color: '#111'
    },
    lineNum :10
   }
  },
  init : function(container,options){
   clearTimeout(smipleChart.timer)
   var self      = this;
   this.width    = container.offsetWidth;
   this.height   = container.offsetHeight;
   this.currList = {};
   this.uuuid    = uuuid;
   this.timer    = null;
   //主要畫圖組的集合 形式
   //{id : {dom:xx,show:true}}
   this.mainGroup = {};
   //分段的時候要用的  知道哪些是隱藏了的  因為要牽涉到重繪
   this.hideList  = {};
   
   //svg 裡面畫圖 必須有一個svg標籤 vml就用div了
   this.container = hasSVG
    ? new vector().$c(1,'svg')
     .attr({
      xmlns   : 'http://www.w3.org/2000/svg',
      version : '1.1',
      width : this.width,
      height : this.height
      
     })
     .css({fontSize : '12px'})
     .appendTo(container)
    : new vector().$c(1,'div')
     .css({
      fontSize : '12px',
      width    : this.width 'px',
      height   : this.height 'px'
     })
     .appendTo(container);
     
   this.loading = container.appendChild(doc.createElement('img'));
   this.loading.setAttribute('src','http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_loading.gif');
   this.loading.style.position = 'absolute';
   this.loading.style.top  = container.offsetHeight/2- this.loading.offsetHeight/2 'px';
   this.loading.style.left = container.offsetWidth/2- this.loading.offsetWidth/2 'px';
  
   var c     = extend(true,{},this.options),
    opts  = this.opts = extend(true,c,options),
    style = extend(opts.charts.style,{
     width  : this.width,
     height : this.height
    });
   
   smipleChart.list[this.uuuid] = this; 
   
   smipleChart.timer = setTimeout(function(){
    smipleChart.lazyLoad();
   },200);
      
  },
  loadMe : function(){
   var opts  = this.opts,
    self  = this,
    type  = opts.charts.type;
   this.container = this.container
    .on('mouseout',function(e){
     var elem = e.relatedTarget || e.toElement;
     if(!contains(this[0],elem)){
      self.hideTooltip();
      self.currList.dot
       &&self.currList.dot.setSize(0);
      self.currList.line
       &&self.currList.line.setSize(1.5);
      self.currList = {}; 
     }
    })
    .css({display:'none'})[0];
    
        
   //計算繪畫盤的時候所需的一些參數
   this.getDrawArea()
    .createTooltip()         //建立提示訊息的方塊
    .drawTitle()             //以具標題
                //畫盤
    
   'line,area,pie'.indexOf(type)>=0
    &&(opts.charts.panel = 'x');
   
   
   ' pie,pies'.indexOf(type)     &&this.drawPanel();
   
     
   this.drawLegend(opts.legend.type);  //畫色塊條
   var 類型 = {
    線    : 'drawLine',
    區域    : 'drawArea',
    列 : 'drawColumns',
    餅     : 'drawPie',
    派    : 'drawPies',
    分段 : 'drawSegment'
   }[opts.charts.type];
   //開始畫圖..............
   這個[類型]();
   
   //刪除節點
   this.loading.parentNode.removeChild(this.loading);
   // 斷開引用
   this.loading = null;
   
   this.container.style.display = '';
   setTimeout(function(){
    smipleChart.lazyLoad(( self.uuuid) '');
   },10)
   
  },
  createElement : 函數(節點名稱){
   傳回新向量().$c(this,nodeName);
  },
  組：函數（名稱）{
   return this.createElement(hasSVG?'g':'div').attr('mark',name);
  },
  getDrawArea : 函數(){
   var opts     = this.opts,
    寬度    = this.width,
    高度 = this.height,
    標題    = opts.title,
    子標題 = opts.subTitle,
    面積     = {
     // 底座座標軸左邊的文字寬度(叉) 80 為定值 左邊只留 80 的間距
     區域寬度：寬度 - 80，
     // 底座座標軸下的文字與標線的高度
     區域高度：高度 - 40，
     //原點的X位置下方會計算到
     開始X：0，
     //原點的Y位置下方會計算到
     開始Y：0，
     //中心的x座標畫餅圖的時候需要知道圓心的位置
     中心X：0，
     //中心的y座標畫餅圖的時候需要知道圓心的位置
     中心Y: 0
    };
   //如果主標題存在降低主標題的高度，否則降低10的高度
   area.areaHeight -=(title.text !== '')
    ？標題.y
    : 10;
    
   // 去掉副標題高度
   area.areaHeight -=(subTitle.text !== '')
    ？副標題.y
    : 10
   
   區域.startX = 80;
   area.startY = 高度 - 40;
   
   // 圓心的位置
   area.centerX = 寬度 / 2;
   面積.centerY = 高度 / 2;  
   
   //右邊留些空隙
   area.areaWidth -=20;
   //上邊也留一些距離
   area.areaHeight -=15;
   
   opts.area = 面積；   
   
   返回此；
  },
  繪製標題：函數（）{   
   var opts = this.opts,
    自我=這個，
    arr    = [opts.title,opts.subTitle,opts.yUnit],
    //3個標題座標的基本參數
    配置= [
     {
      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(self,{
       '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)')      
     }
    } 
   }); 
   return this;
  },
//畫盤子  比較麻煩
  drawPanel : function(type){
   var opts = this.opts,
    self = this,
    area = opts.area,
    chartsType = opts.charts.type,
    isSegment  = chartsType === 'segment',
    //盤子的種類 是橫盤 還是縱盤
    type = opts.charts.panel || 'x';
   // 底板
   var drawAreaWidth  = area.areaWidth,
    drawAreaHeight = area.areaHeight,
    //原點的座標
    startX = area.startX,
    startY = area.startY;
   var allData  = [],
    minValue = 0,
    maxValue = 10,
    //線的條數 只能在1到10之間
    lineNum  = mathMin(10,mathMax(opts.yUnit.lineNum,1)),
    staff;
   
   //組合所有的資料
   each(opts.chartData,function(i,o){
    // 如果是長條圖 是對所有的資料求和
    isSegment
     ? each(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];
   
   each(allData,function(i,o){
    if(o!==null){
     minValue = o;
     return false;
    }    
   });    
       
   //主盤容器
   var panel = this.group('panel').appendTo();
  
   var result = xx(minValue,maxValue,lineNum),
    min    = result.min,
    max    = result.max,
    f      = result.stf;
   isSegment
    &&(min = 0);   
   //表示畫的是橫座標 或是雙座標
   if(type.toLowerCase()==='x'){
    //橫座標單位間隔
    var xPices = drawAreaWidth / opts.xUnit.units.length,
     //單位間隔的中心點
     offset = xPices / 2,
     
     yPices = drawAreaHeight / lineNum;
   
//--------------------------------畫橫向的點和文字---------- -----------------------------------------------
    var y = hasSVG?5:10,
     t = 1000,
     span;   
    each(opts.xUnit.units,function(i,d){       
     self.baseDraw.path(self,{
      border      : 1,
      borderColor : '#C0C0C0',
      isfill      : false,
      path        : [
       M,
       processPoint(startX (i * xPices)),
       processPoint(startY),
       L,
       processPoint(startX (i*xPices)),
       processPoint(startY 5)
      ]
     }).
     appendTo(panel);
    
     span = self.baseDraw.span(self,{
       x   : startX offset (i * xPices),
       y   : startY y,
       'text-anchor':'middle'
      })
      .css({
        fontFamily : 'Verdana,Arial,Helvetica,sans-serif',
        fontSize   : '12px'
      })
      .addText(opts.xUnit.units[i])
      .appendTo(panel)[0];
     
     !hasSVG
      &&(span.style.left = parseInt(span.style.left) - span.offsetWidth/2 'px');
      
    });
//--------------------------------畫縱向的點和文字---------- -------------------------------------------------- -----------    
    for(i=0;i      self.baseDraw.path(self,{
      border      : 1,
      borderColor : '#C0C0C0',
      isfill      : false,
      path        : [M, startX, processPoint(startY - (i * yPices)), L, processPoint(startX drawAreaWidth), processPoint(startY - (i *Pices)]      .css({zIndex:-10})   
     .appendTo(panel);
     
     var span = self.baseDraw.span(self,{
      x : startX - 15,
      y : startY - i * yPices-calTextLen(min i*f '').h/2,
      'text-anchor':'middle'
     })
     .css({
       'font-family' : 'Verdana,Arial,Helvetica,sans-serif',
       'font-size'   : '12px',
       width         : '40px',
       display       : 'block',
       textAlign     : 'right'
     })
     .addText((min*t (i*t*f/t)*t)/t '')
     .appendTo(panel)[0];
     if(!hasSVG){
      span.style.top  = parseInt(span.style.top) span.offsetHeight/2 -5 'px';
      span.style.left = parseInt(span.style.left) -35 'px'
     }     
    }    
    
   }else{
    //橫座標單位間隔
    var yPices = drawAreaHeight / (opts.xUnit.units.length),
     //單位間隔的中心點
     offset = Math.round(yPices / 2),
     x      = hasSVG ? 25 : 70,
     y     = hasSVG ? 0 : 5,
     span
    
    each(opts.xUnit.units,function(i,d){          
     self.baseDraw.path(self,{
      border      : 1,
      borderColor : '#C0C0C0',
      isfill      : false,
      path        : [
       M,
       processPoint(startX-5),
       processPoint(startY-i * yPices),
       L,
       processPoint(startX),
       processPoint(startY-i * yPices),
      ]
     })
     .appendTo(panel);
     span = self.baseDraw.span(self,{
      x   : startX - x,
      y   : startY -i * yPices-offset-calTextLen(d).h/2 y,
      'text-anchor':'middle'
     })
     .css({
       fontFamily:'Verdana,Arial,Helvetica,sans-serif',
       fontSize:'12px',
       width   : '60px',
       textAlign:'right'
     })
     .addText(d)
     .appendTo(panel)   
  
    });
    
    
    var xPices = drawAreaWidth / lineNum;
    
    for(var i=0;i      self.baseDraw.path(self,{
      border      : 1,
      borderColor : '#C0C0C0',
      isfill      : false,
      path        : [
       M,
       processPoint(startX (i * xPices)),
       processPoint(startY),
       L,
       processPoint(startX (i*xPices)),
       processPoint(startY - drawAreaHeight)
      ]
     }).
     appendTo(panel);
     
     self.baseDraw.span(self,{
      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(min i*f '')
     .appendTo(panel);   
    }
    
   }
//------------------------------------------------ -------------------------------------------------- --- 
   //因為起點很可能不是從0開始的  所以在起點的時候要加上到0那部分的值
   var jianju =0;
   if(min>0)jianju = min;
   if(max    
   startX = opts.charts.panel==='x' ? startX :startX-xPices*(min/f);
   startY = opts.charts.panel==='x' ? startY yPices*(min/f) : startY;    
   opts.draw = {
     startX  : startX,  // X 軸起點
     startY  : startY ,  // Y 軸起點
     xPices  : xPices,  // X 軸每份的寬度
     yPices  : yPices,  // Y 軸每份的寬度
     offset  : offset,  // X 單分中心點位置偏移量
     jianjuY : jianju*yPices/f,
     jianjuX : jianju*xPices/f,     
     feed    : f    // Y 軸的每份有多少 
   }
   return this;
  },
  createTooltip : function(){
   //一組
   this.tipC = this.group('tip')
    .css({zIndex: 200,height:'20px',width:'20px',position:'absolute'})
    .appendTo()
    .hide()
   //畫一個框框baseDraw 
   this.tipBox = this.baseDraw.rect(this,{arc:0.22,fill:'#fff',border:2,borderColor:'#606060'})
    .appendTo(this.tipC)    
   //因為svg裡面的g可以直接定位 但是vml裡面的group渲染很慢 所以改div  所以這裡的父不一洋
   var p = isIE ?this.tipBox :this.tipC;
   
   this.tipTxtContainer = this.baseDraw.text(this,{fill:'#000000',x:5,y:19,'text-anchor':'left'})
    .css({
      fontFamily:'Verdana,Arial,Helvetica,sans-serif',
      fontSize:'12px',
      background: '#FFF'
    })
    .appendTo(p);
    
   this.tipText = doc.createTextNode('');
   this.tipTxtContainer[0].appendChild(this.tipText);
   return this;
  },
  showTooltip : function(obj, x, y,data){
      
   /*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({width  : size.w 5 * 2,height : size.h 5 * 2,stroke : 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||'#000';    
   }
   this.tipText.nodeValue = txt || '';*/
   clearTimeout(this.timer);
   var txt  = obj.name ':' data,
    self = this,
    size = calTextLen(txt,this.tipTxtContainer[0].style.cssText),
    pos  = {x : x - (size.w 5 * 2)/2 ,y : y - 32};
   if(hasSVG){          
    self.tipBox
     .attr({width  : size.w 5 * 2,height : size.h 5 * 2,stroke : obj.color||'#606060'});
   }else{          
    self.tipBox
     .css({width:size.w 5 * 2,height : size.h 5 * 2})
    self.tipBox[0].strokeColor = obj.color||'#000';    
   }
   this.tipText.nodeValue = txt || '';
   
   if(this.tipC[0].style.display === 'none'){
    hasSVG
     self.tipC.attr({transform:'translate(' pos.x ',' pos.y ')',pos:pos.x '-' pos.y})
     : self.tipC.attr({pos:pos.x '-' pos.y}).css({left:pos.x,top:pos.y});
    這個.tipC
     .toFront()
     .show();
        
   }其他{
    var move = function(t,b,c,d){
               返回 c*(t/=d)*t b;
           },
     t = 0,
     b = self.tipC.attr('pos').split('-'),
     c = [pos.x,pos.y],
     d = 5;
    
    this.timer = setInterval(function(){
     if(t       t ;
      
     var x = move(t,~~b[0],(~~c[0])-(~~b[0]),d),
      y = move(t,~~b[1],(~~c[1])-(~~b[1]),d);
     有SVG
      self.tipC.attr({transform:'translate('x','y')',pos:x'-'y})
      : self.tipC.attr({pos:x '-' y}).css({left:x,top:y});
     }其他{
      清除超時(self.timer);
     }
    },1);
   }; 
  },
  hideTooltip: 函數(){
   this.tipC.hide();
  },   
  drawLegend : 函數（型，重繪）{
   var self =這個，
    opts = this.opts，
    isLine = opts.charts.type === 'line',
    //色塊的大小
    t_width = 20，
    t_高度 = 20,
    // 區塊之間的距離
    t_space = 5,     
    資料    = opts.chartData,
    len      = datas.length,
    css      = opts.legend.style,
    //最大長度如果是縱著的需要最大長度
    最大寬度 = 10,
    最大高度= 30,
    //這個東西的位置
    orig_pos = opts.legend.pos?opts.legend.pos:[2,2],
    
    // 隱藏顯示組的函數
    句柄 = 函數(i){
     var g = self.mainGroup['圖表' i],
      issegment = opts.charts.type==='segment';
     
     if(g.show){
      g.chart.hide();
      g.show = false;
      有SVG
       this.attr({fill:'#ccc'})
       : this[0].style.color = '#ccc';
      
      
      //如果是分割圖  是會牽涉到重畫的
      if（基質）{
       self.hideList[i] ='';
       var mainGroup = self.mainGroup;
     
       for(mainGroup 中的指標名稱){ 
        varparent = mainGroup[名稱].chart,
         節點=父[0].childNodes，
         len    = 節點.length;
        //回顧圖上面畫的東西
        for(var i = len-1;i>=0;i--){
         vector.prototype.destroy.call(nodes[i])
        }  
       }
       //重畫
       self.drawSegment();
      } 
 
     }其他{
      g.chart.show();
      g.show = true;
      有SVG
       ？ this.attr({fill:'#000'})
       : this[0].style.color = '#000'
       
      if（分段）{
       刪除 self.hideList[i];
       var mainGroup = self.mainGroup;
     
       for(mainGroup 中的變數名稱){
        
        varparent = mainGroup[名稱].chart,
         節點=父[0].childNodes，
         len    = 節點.length;
        for(var i = len-1;i>=0;i--){
         vector.prototype.destroy.call(nodes[i])
        } 
 
       }
       self.drawSegment();
      }        
     }
    },
    
    arr = [];
   類型 = 類型 ||'橫向'; 
   var legendPanel = self.group('圖例')
    .appendTo();
   if(type==='橫向'){
    //如果是橫著的
    var top = orig_pos[1] 5,
     th = hasSVG?0:3,
     左 = orig_pos[0] 5;
    每個（數據，函數（i，d）{          
     左=我===0？左：t_space 左；
     // 計算所有剩餘的位置
     //如果是線性圖 以線性圖的方式繪製圖
     if(isLine){
      self.baseDraw.path(self,{
       邊框      ：1.5，
       borderColor : d.color,
       isfill      ：假，
       路徑        : [
        中號，
        left.toFixed(0),
        (前 10 名).toFixed(0),
        L，
        (左 25).toFixed(0),
        (前 10 名).toFixed(0)
       ]
        })
        .appendTo(legendPanel);
      self.baseDraw[d.dotType ||] '圓圈'](自我，{
       x ：左 12，     
       y ：前 10 名，
       r：4，
       填滿顏色：d.color
      })
      .appendTo(legendPanel);
     }其他{
      self.baseDraw.rect(self,{
       弧         : 0.1,
       填充        : d.color,
       邊框      ：1，
       borderColor : d.color,
       左        ：左，
       頂部         ：上，
       寬度       : t_width 'px',
       高度      : t_height 'px'   
      })
      .appendTo(legendPanel)
     }
 
     左 = 左 t_width 2 t_space;
     var w = calTextLen(d.name,css).w
     self.baseDraw.span(self,{
      '文字錨':'左',
      x：左，
      y : 上方
     })
     .css(extend(css,{cursor:'pointer'}))
     .on('點選',function(){
      handle.call(this,i);
     })
     .addText(d.name)
     .appendTo(legendPanel);
     左 = 左 w;
    });
    this.baseDraw.rect(這個,{
      弧         : 0.1,
      填寫        : '無',
      邊框      ：1.5，
      borderColor : '#666666',
      寬度       ：左 t_space- orig_pos[0],
      高度      : maxHeight,
      左        : orig_pos[0],
      上方         : orig_pos[1]
     })
     .appendTo(legendPanel);
   }其他{
    var top = orig_pos[1] 5,
     th = hasSVG?0:3,
     左 = orig_pos[0] 5;
    每個（數據，函數（i，d）{
     頂部 = i===0 ？頂部 : t_space 頂部;
     self.baseDraw.rect(self,{
      弧         : 0.1,
      填充        : d.color,
      邊框      ：1，
      borderColor : d.color,
      左        ：左，
      頂部         ：頂部，
      寬度       : t_width 'px',
      高度      : t_height 'px'   
     })
     .appendTo(legendPanel);
     var h = calTextLen(d.name,css).h;
     
     self.baseDraw.span(self,{
      '文字錨':'左',
      x : 左 t_width 2 t_space,
      y : 上方
     })
     .css(extend(css,{cursor:'pointer'}))
     .addText(d.name)
     .on('點選',function(){
      //如果是多層圓餅圖無法進入隱藏    
      if(opts.charts.type==='pies')return;
      句柄.call(this,i);     
     })
     .appendTo(圖例面板); 
     頂部 = 頂部 h t_space;
     maxWidth = Math.max(maxWidth,calTextLen(d.name,css).w);
    }); 
    this.baseDraw.rect(這,{
  &