JavaScript は、smipleChart を使用して単純な charts_javascript スキルを実装します-jsチュートリアル-php.cn

線形グラフ、面グラフ、棒グラフ、円グラフをサポート

複数のブラウザをサポート

使用された svg vml

コードをコピーコードは次のとおりです:

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

smipleChart

<スクリプトタイプ="text/javascript">
(関数(ドキュメント,未定義){
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,
  path = hasSVG?'d':'path',
  シール = hasSVG?'z':'e',
  math = 数学、
  mathRound = math.round,
  mathFloor = math.floor,
  mathCeil = math.ceil,
  mathMax = math.max,
  mathMin = math.min,
  mathAbs = math.abs,
  mathCos = math.cos,
  mathSin = math.sin,
  M = 'M',
  L = 'L';
win.$$ = function(Id){
  return document.getElementById(Id);
};
win.extend = function(){
  var ターゲット = 引数[0] || {}、i = 1、長さ = argument.length、深さ = true、オプション;
  if ( typeof target === "boolean" ) {
   深い = ターゲット;
   ターゲット = 引数[1] || {};
   i = 2;
  }
  if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[オブジェクト関数]")
   ターゲット = {};
  for(;i    if ( (オプション = 引数[ i ]) != null )
    for(オプションの変数名){
     var src = ターゲット[名前]、コピー = オプション[名前];
     if (ターゲット === コピー)
      続行;
     if ( deep && copy && typeof copy === "object" && !copy.nodeType ){
      target[ name ] = argument.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy );
     }
     else if(コピー !== 未定義)
      ターゲット[名前] = コピー;
    }

  }
  リターンターゲット。
};

win.each = function ( object, callback, args ) {
  変数名、i = 0、長さ = 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 ) //
      壊す;
  } else {
   if ( 長さ === 未定義 ) {
    for ( オブジェクト内の名前 )
     if ( callback.call( object[ name ], name, object[ name ] ) === false )
      壊す;
   } 他
    for ( var value = object[0];
     私は＜長さ && callback.call( value, i, value ) !== false;値 = オブジェクト[ i] ){}
  }
  オブジェクトを返します。
};

win.contains = function(p,c){
  if(!p||!c)return false;
  if(p===c)return true;
  isIE
を返します    ? p.contains(c)
   : p.compareDocumentPosition(c)==20
    ?本当
    : false;
};
//------------------------------------------------ ---------------
関数 processPoint( x ){
  戻りはIEですか？ ~~x.toFixed(0) : ~~x.toFixed(0) 0.5;
};
関数 calTextLen(txt, cssStr){
  varspan = doc.createElement('span');
  if(cssStr){
   typeof cssStr === '文字列'
    ? span.style.cssText = cssStr
    : extend(span.style,cssStr);
  }その他{
   extend(span.style,{
    fontSiz : '12px',
    fontFamily : '"Lucida Grande"、"Lucida Sans Unicode"、Verdana、Arial、Helvetica、sans-serif'
   });
  }
  spain.innerHTML = txt || '';
  スパン.スタイル.可視性 = '非表示';
  doc.body.appendChild(スパン);
  var width =span.offsetWidth,
   高さ = スパン.オフセット高さ;
  doc.body.removeChild(span);
  return {w:幅,h:高さ};
};
関数 angle(r,center,o,jingdu){
  var hudu = Math.PI*2*(o/360),
   x = center[0] r*Math.sin(hudu),
   y = center[1] -r*Math.cos(hudu);
  return [x.toFixed(jingdu||0),y.toFixed(jingdu||0)];
}
関数 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;
   }
   each([1,2,2.5,5,10],function(i,o){
    arr[i]= o/c;
   });
  }else if(stf>arr[4]){
   while( stf>arr[4] ){
    c = c*10;
    arr[4] = arr[4]*c;
   }
   each([1,2,2.5,5,10],function(i,o){
   arr[i]= o*c;
   });
  }

// 上面が一定期間に到達後、一定期間内に最も近い 1 つ
  each(arr,function(i,o){
   if(stf     v = o;
    false を返します;
   }
  });
  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;
     num--;
     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;
     num--;
     if((b*t v*num*t)/t      壊す;
    }
   }
   if(num!=0){
    while(num!==0){
     a = (a*t-v*t)/t
     番号--;
    }
   }
  }
  return {min:a,max:b,stf:v};
}
//------------------------------------------------ -------------------------------------------------- -------------
//svg vml 要素のいくつかの作成変更プロパティ样式删除 == いくつかの操作
win.vector = function(){};
ベクター.プロトタイプ = {
  $c : function(graphic,nodeName){
   this.element = this[0] = doc.createElementNS('http://www.w3.org/2000/svg', ノード名);
   this.graphic = グラフィック;
   これを返します;
  }、
  attr: function(hash,val){
   var elem = this.element,
    キー、
    値;
   if(ハッシュの種類 === '文字列'){
    if(val === 未定義){
     return elem.getAttribute(hash);
    }その他{
     elem.setAttribute(hash, val);
     これを返します;
    }
   } else {
    for(ハッシュ内のキー){
     値 = ハッシュ[キー];
     if(キー === パス){
      値 && 値.結合
       &&(value = value.join(' '));
      /(NaN| |^$)/.test(value)
       &&(値 = 'M 0 0');
     }
     elem.setAttribute(キー, 値)
    }
   }
   これを返します;
  }、
  css: 関数(ハッシュ){
   for(ハッシュ内のvarキー){
    isIE && キー == "不透明度"
     ? this[0].style['filter'] = "alpha(opacity=" hash[key] * 100 ")"
     : this[0].style[key] = ハッシュ[key];
   }
   これを返します;
  }、
  on: function(eventName, handler){
   var self = this;
   /*this.element.addEventListener(eventName,function(){
    handler.call(self)
   },false);*/
   this.element['on' イベント名] = function(e){
    e = e || win.event;
    handler.call(self,e);
   }
   これを返します;
  }、
  appendTo: 関数(親){
   if(親){
    親.要素
     ? parent.element.appendChild(this.element)
     :parent.appendChild(this.element)

   } else {
    this.graphic.container.appendChild(this.element);
   }
   これを返します;
  }、
  addText: function(str){
   var elem = this.element;
   if(elem.nodeName === 'テキスト'){
    elem.appendChild(doc.createTextNode(str ''));
   }
   これを返します;
  }、
  setOpacity : function(v){
   this.attr('fill-opacity',v);
   これを返します;
  }、
  setSize : function(v){
   this[0].nodeName==='circle'
    ? this.attr('r',4 (v===0?0:2))
    : this.attr({'ストローク幅':v});
   これを返します;
  }、
  toFront: function() {
   this[0].parentNode.appendChild(this[0]);
   これを返します;
  },
  show: function(){
   this[0].style.display = 'ブロック';
   これを返します;
  }、
  隠す: function(){
   this[0].style.display = 'none';
   これを返します。
  }、
  破壊: function(){
   //销毁节点....................
   var ノード = this[0] ||これ;
   ノード.onmouseover = ノード.onmouseout = ノード.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){
変数名 = ノード名 || '形状'; This.element= this[0] = (name === 'div' || name === 'span')
? doc.createElement(名前)
: doc.createElement(''); This.graphic = グラフィック;
これを返してください
}、
/*on : function(eventName, handler){
var self = this;
This.element.attachEvent("on" イベント名,function(){
handler.call(self);
});
これを返してください;
},*/
AddText: function(txt){
This[0].innerHTML = '';
これを返してください;
}、
setSize : function(v){
This[0].ストロークウェイト = v;
これを返してください;
}、
setOpacity : function(v){
This.opacity.opacity=v;
これを返してください;
}
});
}
//------------------------------------------------ -------------------------------------------------- -
//描画クラス
//------------------------------------------------ ------------
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 = {
オプション: {
チャート: {
パディング右: 20、
半径 : 200、
スタイル : {
fontFamily : '"Lucida Grande"、"Lucida Sans Unicode"、Verdana、Arial、Helvetica、sans-serif'、
フォントサイズ : '12px',
背景: '#FFFFFF'
}
}、
タイトル: {
テキスト: ''、
y : 10、
スタイル: {
fontFamily:'Verdana、Arial、Helvetica、サンセリフ'、
フォントサイズ:'16px',
fontWeight:'bold'
}
}、
サブタイトル: {
テキスト: ''、
y : 30、
スタイル : {
fontFamily:'Verdana、Arial、Helvetica、サンセリフ'、
fontSize:'12px'、
カラー: '#111'
}
}、
y単位: {
テキスト: ''、
スタイル: {
fontFamily:'Verdana、Arial、Helvetica、サンセリフ'、
fontSize:'12px'、
カラー: '#111'
}、
LineNum:10
}
}、
init : function(container,options){
clearTimeout(smipleChart.timer)
var self = this;
This.width = コンテナ.オフセット幅;
This.height = コンテナ.オフセット高さ;
This.currList = {};
This.uuuid = uuuid
This.timer = null;
//メイン描画グループのコレクションフォーム
//{id : {dom:xx,show:true}}
This.mainGroup = {};
// 再描画が関係するため、セグメント化するときにどれが非表示になっているかを知るために使用されます
This.hideList = {};

// svg 内に画像を描画する場合、vml の場合は svg タグが必要です
This.container = hasSVG
? 新しいベクトル().$c(1,'svg')
.attr({
xmlns : 'http://www.w3.org/2000/svg',
バージョン: '1.1'、
幅: this.width,
高さ: this.height

})
.css({fontSize : '12px'})
.appendTo(コンテナ)
: 新しいベクトル().$c(1,'div')
.css({
fontSize : '12px',
: this.width 'px',
高さ : this.height 'px'
})
.appendTo(コンテナ);

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 = '絶対';
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),
スタイル = extend(opts.charts.style,{
幅 : this.width,
高さ: this.height
});

smipleChart.list[this.uuuid] = これ;
smipleChart.timer = setTimeout(function(){
smipleChart.lazyLoad();
},200);

}、
loadMe : function(){
var opts = this.opts,
自分 = これ、
タイプ = opts.charts.type;
this.container = this.container
.on('マウスアウト',function(e){
var elem = e.relativeTarget || 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() //タイトルを描画します

'線、面積、円'.indexOf(種類)>=0
&&(opts.charts.panel = 'x');

' パイ、パイ'.indexOf(type) &&this.drawPanel();


   this.drawLegend(opts.legend.type); //画色块条
   var type = {
    行 : 'drawLine',
    エリア : 'drawArea',
    列: 'drawColumns',
    パイ : 'drawPie',
    パイ : 'drawPies',
    セグメント: 'drawSegment'
   }[opts.charts.type];
   //开始画图....
   this[type]();

   //删除节点
   this.loading.parentNode.removeChild(this.loading);
   //断开引用
   this.loading = null;

   this.container.style.display = '';
   setTimeout(function(){
    smipleChart.lazyLoad(( self.uuuid) '');
   },10)

  }、
  createElement : function(nodeName){
   return new Vector().$c(this,nodeName);
  }、
  グループ: 関数(名前){
   return this.createElement(hasSVG?'g':'div').attr('mark',name);
  }、
  getDrawArea : function(){
   var opts = this.opts,
    width = this.width,
    高さ = this.height,
    タイトル = opts.title,
    subTitle = opts.subTitle,
    面積 = {
     // 去掉座標标轴左边の刻度文本宽度(预估) 80 は定位置左边只α80 の距離
     areaWidth : 幅 - 80、
     // 去掉空間标轴底下の文本と标線の高さ
     areaHeight : 高さ - 40、
     //原点の X 位置以下の会議で計算
     startX : 0,
     //原点の Y 位置以下の会議で計算されました
     startY : 0,
     //中心のx座標标画饼図の時間気象必要知道圆心の位置
     中心X: 0,
     //中心のy座標标画饼図の時刻気象必要知道圆心の位置
     中心Y: 0
    };
   //如果主标题存在减去主标题の高さ否か减去10の高
   area.areaHeight -=(title.text !== '')
    ?タイトル.y
    : 10;

   // 去掉副标题高さ
   area.areaHeight -=(subTitle.text !== '')
    ?サブタイトル.y
    : 10

   area.startX = 80;
   area.startY = 高さ - 40;

   //圆心の位置
   area.centerX = 幅 / 2;
   エリア.センターY = 高さ / 2;

   //右边留いくつかの空隙
   エリア.エリア幅 -=20;
   //上边にも一定の距離
   エリア.エリア高さ -=15;

   opts.area = エリア;

   これを返します;
  }、
  drawTitle : function(){
   var opts = this.opts,
    自分 = これ、
    arr = [opts.title,opts.subTitle,opts.yUnit],
    //3 つの座標の位置の基本パラメータ
    config = [
     {
      x : this.width / 2,
      y : opts.title.y
     }、
     {
      x : this.width / 2,
      y : opts.subTitle.y
     }、
     {
      x : opts.yUnit.x,
      y : this.height / 2 - 20
                                                                   ]、
tpanel = this.group('title')
.appendTo();
Each(arr,function(i,title){
var text = title.text;
If(テキスト){
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(テキスト)
.appendTo(tpanel);

// 2 の場合は、縦方向に回転します
If(i===2){
HasSVG
? elem.attr({transform : 'rotate(270, ' (opts.yUnit.x 10) ', ' self.height / 2 ')'})
: (elem.element.style.filter ='progid:DXImageTransform.Microsoft.BasicImage(rotation=3)')
}
}
});
これを返してください;
}、
//皿を描くのはもっと面倒
drawPanel : function(type){
var opts = this.opts,
自分 = これ、
エリア = opts.area,
ChartsType = opts.charts.type,
isSegment = chartsType === 'セグメント',
//プレートの種類: 水平プレートまたは垂直プレート
タイプ = opts.charts.panel || 'x';
// ベースプレート
vardrawAreaWidth = 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)),
スタッフ;

//すべてのデータを結合します
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;
false を返します;
}
});

//メインプレートコンテナ
var パネル = this.group('panel').appendTo();

var result = xx(minValue,maxValue,lineNum),
分 = 結果.分,
max = result.max,
f = result.stf;
isSegment
&&(分 = 0); //図面が横座標または倍精度座標であることを示します
If(type.toLowerCase()==='x'){
//横軸単位間隔
var xPices =drawAreaWidth / opts.xUnit.units.length,
//単位区間の中心点
オフセット = xPices / 2,

yPices =drawAreaHeight / lineNum;

//--------------------------------横のドットと文字を描画します---------- - -------------------------------------------------
var y = hasSVG?5:10,
t = 1000、
スパン;
Each(opts.xUnit.units,function(i,d){ Self.baseDraw.path(self,{
枠線 : 1、
境界線の色: '#C0C0C0',
isfill : false,
パス: [
ま、
processPoint(startX (i * xPices)),
processPoint(startY)、
L、
processPoint(startX (i*xPices)),
プロセスポイント(開始Y 5)
]
}).
appendTo(パネル);

スパン = self.baseDraw.span(self,{
x : startX オフセット (i * xPices),
y : startY y,
'text-anchor':'middle'
})
.css({
fontFamily : 'Verdana、Arial、Helvetica、sans-serif'、
fontSize : '12px'
})
.addText(opts.xUnit.units[i])
.appendTo(パネル)[0];

!SVG
&&(span.style.left = parseInt(span.style.left) - span.offsetWidth/2 'px');

});
//----------------------------縦のドットと文字を描画します---------- - ------------------------------------------------- - ----------
for(i=0;i Self.baseDraw.path(self,{
枠線 : 1、
境界線の色: '#C0C0C0',
isfill : false,
パス: [M, startX, processPoint(startY - (i * yPices)), L, processPoint(startXdrawAreaWidth), processPoint(startY - (i *yPices))]
})
.css({zIndex:-10})
.appendTo(パネル);

varspan = 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',
'フォントサイズ' : '12px',
幅: '40px'、
表示 : 'ブロック',
textAlign : '右'
})
.addText((min*t (i*t*f/t)*t)/t '')
.appendTo(パネル)[0];
If(!hasSVG){
span.style.top = parseInt(span.style.top) scan.offsetHeight/2 -5 'px';
span.style.left = parseInt(span.style.left) -35 'px'
}
}

}その他{
//横軸単位間隔
var yPices =drawAreaHeight / (opts.xUnit.units.length),
//単位区間の中心点
オフセット = Math.round(yPices / 2),
x = hasSVG ? 25 : 70、
y=hasSVG ? 0 : 5,
スパン

Each(opts.xUnit.units,function(i,d){ Self.baseDraw.path(self,{
枠線 : 1、
境界線の色: '#C0C0C0',
isfill : false,
パス: [
ま、
ProcessPoint(startX-5),
ProcessPoint(startY-i * yPices),
L、
ProcessPoint(startX)、
ProcessPoint(startY-i * yPices),
]
})
.appendTo(パネル);
スパン = 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',
幅: '60px',
textAlign:'right'
})
.addText(d)
.appendTo(パネル)

});

var xPices =drawAreaWidth / lineNum;

for(var i=0;i Self.baseDraw.path(self,{
枠線 : 1、
境界線の色: '#C0C0C0',
isfill : false,
パス: [
ま、
processPoint(startX (i * xPices)),
processPoint(startY)、
L、
processPoint(startX (i*xPices)),
processPoint(startY -drawAreaHeight)
]
}).
appendTo(パネル);

Self.baseDraw.span(self,{
x : startX - calTextLen(min i*f '').w/2 i * xPices,
y : startY,
'テキストアンカー':'左'
})
.css({
fontFamily:'Verdana,Arial,Helvetica,sans-serif',
fontSize:'12px'
})
.addText(min i*f '')
.appendTo(パネル);
}

}
//------------------------------------------------ -------------------------------------------------- ---
//開始点が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) :
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 軸上のコピーの数
}
これを返してください;
}、
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 でのグループのレンダリングが非常に遅いため、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、サンセリフ'、
フォントサイズ:'12px',
背景: '#FFF'
})
.appendTo(p);

This.tipText = doc.createTextNode('');
This.tipTxtContainer[0].appendChild(this.tipText);
これを返してください;
}、
showTooltip: function(obj, x, y,data){

/*var txt = obj.name ':' データ,
サイズ = calTextLen(txt,this.tipTxtContainer[0].style.cssText),
pos = {x : x - (size.w 5 * 2)/2 ,y : y - 32};
This.tipC
.toFront()
.show();
if(hasSVG){
This.tipC.attr({transform:'translate(' pos.x ',' pos.y ')'});

This.tipBox
.attr({幅 : size.w 5 * 2,高さ : size.h 5 * 2,ストローク : obj.color||'#606060'});
}その他{
This.tipC.css({left:pos.x,top:pos.y});

This.tipBox
.css({幅:サイズ.w 5 * 2,高さ: サイズ.h 5 * 2})
This.tipBox[0].ストロークカラー = obj.color||'#000'; }
This.tipText.nodeValue = txt || '';*/
ClearTimeout(this.timer);
var txt = obj.name ':' データ,
自分 = これ、
サイズ = calTextLen(txt,this.tipTxtContainer[0].style.cssText),
pos = {x : x - (size.w 5 * 2)/2 ,y : y - 32};
if(hasSVG){
self.tipBox
.attr({幅 : size.w 5 * 2,高さ : size.h 5 * 2,ストローク : obj.color||'#606060'});
}それ以外{ self.tipBox
.css({幅:サイズ.w 5 * 2,高さ: サイズ.h 5 * 2})
Self.tipBox[0].ストロークカラー = 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});
    this.tipC
     .toFront()
     .show();

   }その他{
    var move = function(t,b,c,d){
               return c*(t/=d)*t b;
           }、
     t = 0、
     b = self.tipC.attr('pos').split('-'),
     c = [位置x,位置y],
     d = 5;

    this.timer = setInterval(function(){
     if(t       ;

     var x = move(t,~~b[0],(~~c[0])-(~~b[0]),d),
      y = move(t,~~b[1],(~~c[1])-(~~b[1]),d);
     hasSVG
      ? self.tipC.attr({transform:'translate(' x ',' y ')',pos:x '-' y})
      : self.tipC.attr({pos:x '-' y}).css({left:x,top:y});
     }その他{
      clearTimeout(self.timer);
     }
    },1);
   };
  }、
  HideTooltip: function(){
   this.tipC.hide();
  }、
  drawLegend : function(type,redraw){
   var self = これ,
    opts = this.opts,
    isLine = opts.charts.type === 'ライン',
    //颜色块の大小
    t_width = 20,
    t_height = 20、
    //块間の距離
    t_space = 5,
    データ = opts.chartData,
    len = data.length,
    css = opts.legend.style,
    // 最大長さ衣服の必要性がある場合、最大の長さ
    maxWidth = 10,
    maxHeight= 30、
    //この西の位置
    orig_pos = opts.legend.pos?opts.legend.pos:[2,2],

    //表示隐藏グループの関数
    ハンドル = function(i){
     var g = self.mainGroup['chart' i],
      issegment = opts.charts.type==='セグメント';

     if(g.show){
      g.chart.hide();
      g.show = false;
      hasSVG
       ? this.attr({fill:'#ccc'})
       : this[0].style.color = '#ccc';


      //如果是分段图是会涉及到重画的
      if(issegment){
       self.hideList[i] ='';
       var mainGroup = self.mainGroup;

       for(mainGroup の変数名){
        varparent = mainGroup[name].chart,
         ノード = 親[0].childNodes,
         len = ノード.長さ;
        //销毁图上面画的东西
        for(var i = len-1;i>=0;i--){
         Vector.prototype.destroy.call(nodes[i])
        }
       }
       // 重画
       self.drawSegment();
      }

     }その他{
      g.chart.show();
      g.show = true;
      hasSVG
       ? this.attr({fill:'#000'})
       : this[0].style.color = '#000'

      if(issegment){
       delete self.hideList[i];
       var mainGroup = self.mainGroup;

       for(mainGroup の変数名){

        varparent = mainGroup[name].chart,
         ノード = 親[0].childNodes,
         len = ノード.長さ;
        for(var i = len-1;i>=0;i--){
         Vector.prototype.destroy.call(nodes[i])
        }

       }
       self.drawSegment();
      }
     }
    }、

    arr = [];
   type = タイプ ||'横方向';
   var legendPanel = self.group('凡例')
    .appendTo();
   if(type==='横方向'){
    //結果が横着の
    var top = orig_pos[1] 5,
     th = hasSVG?0:3,
     左 = orig_pos[0] 5;
    each(datas, function(i,d){
     左 = i===0 ? left : t_space left;
     //左すべての位置を計算します
     //如果是線性图按線性图的方式画图
     if(isLine){
      self.baseDraw.path(self,{
       ボーダー : 1.5、
       borderColor : d.color,
       isfill : false,
       パス : [
        ま、
        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,
       fillColor : d.color
      })
      .appendTo(legendPanel);
     }その他{
      self.baseDraw.rect(self,{
       円弧 : 0.1、
       fill : d.color,
       境界線 : 1、
       borderColor : d.color,
       left : 左、
       トップ : トップ、
       width : t_width 'px',
       高さ : t_height 'px'
      })
      .appendTo(legendPanel)
     }

     left = left 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);
     left = 左 w;
    });
    this.baseDraw.rect(this,{
      円弧 : 0.1、
      fill : 'なし'、
      ボーダー : 1.5、
      borderColor : '#666666',
      width : left t_space-orig_pos[0],
      高さ : maxHeight,
      左 : orig_pos[0],
      トップ : orig_pos[1]
     })
     .appendTo(legendPanel);
   }その他{
    var top = orig_pos[1] 5,
     th = hasSVG?0:3,
     left = orig_pos[0] 5;
    each(datas, function(i,d){
     トップ = i===0 ?トップ : t_space トップ;
     self.baseDraw.rect(self,{
      円弧 : 0.1、
      fill : d.color,
      境界線 : 1、
      borderColor : d.color,
      left : 左、
      トップ : トップ、
      width : 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;
      handle.call(this,i);
     })
     .appendTo(legendPanel);
     top = トップ h t_space;
     maxWidth = Math.max(maxWidth,calTextLen(d.name,css).w);
    });
    this.baseDraw.rect(this,{
  &