javascript smipleChart 简单图标类


Posted in Javascript onJanuary 12, 2011

因为编辑器会对代码有所破坏,所以提供一个在线演示
http://demo.3water.com/chengxu/smipleChart.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>smipleChart</title> 
<style type="text/css"> .cc{ 
height:450px; width:800px; border:1px solid #999; position:relative; margin:20px; 
} 
</style> 
</head> 
<body> 
<div id='t'></div> 
<div id='t1'> 
</div> 
<div id='line' class="cc"></div> 
<div id='area' class="cc"></div> 
<div id='zhu' class="cc"></div> 
<div id='zhu1' class="cc" style="height:600px;"></div> 
<div id='pie' class="cc"></div> 
<div id='pies' class="cc"></div> 
<div id='segment' class="cc"></div> 
<div id='vv' class="cc" style='height:300px; width:520px;'></div> 
<script type="text/javascript"> 
(function(doc,undefined){ 
var win = this, 
hasSVG = win.SVGAngle || doc.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1"), 
isIE = /msie/i.test(navigator.userAgent) && !win.opera, 
path = hasSVG?'d':'path', 
seal = hasSVG?'z':'e', 
math = Math, 
mathRound = math.round, 
mathFloor = math.floor, 
mathCeil = math.ceil, 
mathMax = math.max, 
mathMin = math.min, 
mathAbs = math.abs, 
mathCos = math.cos, 
mathSin = math.sin, 
M = 'M', 
L = 'L'; 
win.$ = function(Id){ 
return document.getElementById(Id); 
}; 
win.extend = function(){ 
var target = arguments[0] || {}, i = 1, length = arguments.length, deep = true, options; 
if ( typeof target === "boolean" ) { 
deep = target; 
target = arguments[1] || {}; 
i = 2; 
} 
if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]") 
target = {}; 
for(;i<length;i++){ 
if ( (options = arguments[ i ]) != null ) 
for(var name in options){ 
var src = target[ name ], copy = options[ name ]; 
if ( target === copy ) 
continue; 
if ( deep && copy && typeof copy === "object" && !copy.nodeType ){ 
target[ name ] = arguments.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy ); 
} 
else if(copy !== undefined) 
target[ name ] = copy; 
} 
} 
return target; 
}; 
win.each = function ( object, callback, args ) { 
var name, i = 0, length = object.length; 
if ( args ) { 
args = Array.prototype.slice.call(arguments).slice(2); 
if ( length === undefined ) { 
for ( name in object ) 
if ( callback.apply( object[ name ],[name,object[ name ]].concat(args) ) === false ) 
break; 
} else 
for ( ; i < length; i++) 
if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) // 
break; 
} else { 
if ( length === undefined ) { 
for ( name in object ) 
if ( callback.call( object[ name ], name, object[ name ] ) === false ) 
break; 
} else 
for ( var value = object[0]; 
i < length && callback.call( value, i, value ) !== false; value = object[++i] ){} 
} 
return object; 
}; 
//--------------------------------------------------------------- 
function processPoint( x ){ 
return isIE ? ~~x.toFixed(0) : ~~x.toFixed(0) + 0.5; 
}; 
function calTextLen(txt, cssStr){ 
var span = doc.createElement('span'); 
if(cssStr){ 
typeof cssStr === 'string' 
? span.style.cssText = cssStr 
: extend(span.style,cssStr); 
}else{ 
extend(span.style,{ 
fontSiz : '12px', 
fontFamily : '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif' 
}); 
} 
span.innerHTML = txt || ''; 
span.style.visibility = 'hidden'; 
doc.body.appendChild(span); 
var width = span.offsetWidth, 
height = span.offsetHeight; 
doc.body.removeChild(span); 
return {w:width,h:height}; 
}; 
function 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)]; 
} 
function xx(a,b,lineNum){ 
var t = 10000; 
var stf = ((b*t-a*t)/lineNum)/t, 
arr = [1,2,2.5,5,10], 
c = 1, 
v; 
// 分割线的基数是 [1,2,2.5,5,10] 这个步骤是查找 间隔 属于哪个范围 
if(stf<arr[0]){ 
while( stf<arr[0] ){ 
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; 
}); 
} 
//上面找到间隔后 找到间隔中最接近的一个 
each(arr,function(i,o){ 
if(stf<o){ 
v = o; 
return false; 
} 
}); 
//a 是最小的 
//b是最大 的 
a = (a*t-mathAbs((a%v)*t))/t; 
b = (b*t+(b%v===0?0:(v-b%v))*t)/t; 
//看看还剩几条线没有画 
var num = Math.max(0,lineNum - Math.round((b-a)/v)); 
if(a>=0){ 
//让图比较靠中间 
/*while(num!==0){ 
num%2===0 
? a = (a*t-v*t)/t 
: b = (b*t+v*t)/t; 
num--; 
}*/ 
//坐标比较整数化 
if(a!=0&&num!=0){ 
while(a!=0&&num!=0){ 
a = (a*t-v*t)/t; 
num--; 
if((a*t-v*num*t)/10000>0&&a%10===0) 
break; 
} 
} 
if(num!=0){ 
while(num!==0){ 
b = (b*t+v*t)/t 
num--; 
} 
} 
}else{ 
//让图比较靠中间 
/*while(num!==0){ 
num%2===0 
? b = (b*t+v*t)/t 
: a = (a*t-v*t)/t 
num--; 
}*/ 
//坐标比较整数化 
if(b<0&&num!=0){ 
while(b!=0&&num!=0){ 
b = (b*t+v*t)/t; 
num--; 
if((b*t+v*num*t)/t<0&&a%10===0) 
break; 
} 
} 
if(num!=0){ 
while(num!==0){ 
a = (a*t-v*t)/t 
num--; 
} 
} 
} 
return {min:a,max:b,stf:v}; 
} 
//--------------------------------------------------------------------------------------------------------------- 
//对svg vml元素的一些创建 修改属性 样式 删除 == 一些的操作 
win.vector = function(){}; 
win.vector.prototype = { 
$c : function(graphic,nodeName){ 
this.element = this[0] = doc.createElementNS('http://www.w3.org/2000/svg', nodeName); 
this.graphic = graphic; 
return this; 
}, 
attr: function(hash,val){ 
var elem = this.element, 
key, 
value; 
if(typeof hash === 'string'){ 
if(val === undefined){ 
return elem.getAttribute(hash); 
}else{ 
elem.setAttribute(hash, val); 
return this; 
} 
} else { 
for(key in hash){ 
value = hash[key]; 
if(key === path){ 
value && value.join 
&&(value = value.join(' ')); 
/(NaN| |^$)/.test(value) 
&&(value = 'M 0 0'); 
} 
elem.setAttribute(key, value) 
} 
} 
return this; 
}, 
css: function(hash){ 
var str = ''; 
for(var key in hash){ 
if(isIE && key == "opacity"){ 
this.element.style['filter'] = "alpha(opacity="+ hash[key] * 100+")"; 
}else{ 
this.element.style[key] = hash[key]; 
} 
} 
return this; 
}, 
on: function(eventName, handler){ 
var self = this; 
this.element.addEventListener(eventName,function(){ 
handler.call(self) 
},false); 
return this; 
}, 
appendTo: function(parent){ 
if(parent){ 
parent.element 
? parent.element.appendChild(this.element) 
: parent.appendChild(this.element) 
} else { 
this.graphic.container.appendChild(this.element); 
} 
return this; 
}, 
addText: function(str){ 
var elem = this.element; 
if(elem.nodeName === 'text'){ 
elem.appendChild(doc.createTextNode(str.toString() || ' ')); 
} 
return this; 
}, 
setOpacity : function(v){ 
this.attr('fill-opacity',v) 
}, 
toFront: function() { 
this.element.parentNode.appendChild(this.element) 
return this; 
}, 
show: function(){ 
this.element.style.display = 'block'; 
return this; 
}, 
hide: function(){ 
this.element.style.display = 'none'; 
return this; 
} 
}; 
//--------------------------------------------------------------------------------------------------------------- 

//--------------------------------------------------------------------------------------------------- 
//如果是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('<vml:'+name+' class="vml">'); 
this.graphic = graphic; 
return this; 
}, 
on : function(eventName, handler){ 
var self = this; 
this.element.attachEvent("on" + eventName,function(){ 
handler.call(self); 
}); 
return this; 
}, 
addText : function(txt){ 
var elem = this.element; 
elem.innerHTML = txt || ''; 
return this; 
}, 
setOpacity : function(v){ 
this.opacity.opacity=v; 
} 
}); 
} 
//--------------------------------------------------------------------------------------------------- 



//画图类 
//------------------------------------------------------------ 
win.smipleChart = function(){ 
this.init.apply(this,arguments); 
}; 
smipleChart.prototype = { 
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,width,height){ 
this.width = width || container.offsetWidth; 
this.height = height || container.offsetHeight; 
this.mainGroup = {}; 
//svg 里面画图 必须有一个svg标签 vml就用div了 
this.container = hasSVG 
? new vector().$c(1,'svg') 
.attr({ 
xmlns : 'http://www.w3.org/2000/svg', 
version : '1.1' 
}) 
.css({fontSize : '12px'}) 
.appendTo(container).element 
: new vector().$c(1,'div') 
.css({ 
fontSize : '12px', 
width : this.width +'px', 
height : this.height+'px' 
}) 
.appendTo(container).element; 
var c = extend(true,{},this.options) 
var opts = this.opts = extend(true,c,options), 
style = extend(opts.charts.style,{ 
width : this.width, 
height : this.height 
}); 

//计算绘画盘子的时候需要的一些参数 
this.getDrawArea() 
.createTooltip() //创建提示信息的框框 
.drawTitle() //画标题 
//画盘子 
if('line,area,pie'.indexOf(opts.charts.type)>=0){ 
opts.charts.panel = 'x'; 
} 
if(' pie,pies'.indexOf(opts.charts.type)<0){ 
this.drawPanel(); 
} 
this.drawLegend(opts.legend.type); //画色块条 
var type = { 
line : 'drawLine', 
area : 'drawArea', 
columns : 'drawColumns', 
pie : 'drawPie', 
pies : 'drawPies', 
segment : 'drawSegment' 
}[opts.charts.type]; 
this[type](); 
}, 
createElement : function(nodeName){ 
return new vector().$c(this,nodeName); 
}, 
group: function(name){ 
return this.createElement(isIE?'div':'g').attr('mark',name); 
}, 
getDrawArea : function(){ 
var opts = this.opts, 
width = this.width, 
height = this.height, 
title = opts.title, 
subTitle = opts.subTitle, 
area = { 
// 去掉坐标轴左边的刻度文本宽度(预估) 80为定值 左边只留80的间距 
areaWidth : width - 80, 
// 去掉坐标轴底下的文本和标线的高度 
areaHeight : height - 40, 
//原点的X位置 下面会计算到 
startX : 0, 
//原点的Y位置 下面会计算到 
startY : 0, 
//中心的x坐标 画饼图的时候需要知道圆心的位置 
centerX: 0, 
//中心的y坐标 画饼图的时候需要知道圆心的位置 
centerY: 0 
}; 
//如果主标题存在 减去主标题的高度 否则 减去10的高 
area.areaHeight -=(title.text !== '') 
? title.y 
: 10; 
// 去掉副标题高度 
area.areaHeight -=(subTitle.text !== '') 
? subTitle.y 
: 10 
area.startX = 80; 
area.startY = height - 40; 
//圆心的位置 
area.centerX = width / 2; 
area.centerY = height / 2; 
//右边留一些空隙 
area.areaWidth -=20; 
//上边也留一些间距 
area.areaHeight -=15; 
opts.area = area; 
return this; 
}, 
drawTitle : function(){ 
var opts = this.opts, 
self = this, 
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(text){ 
var elem = self.baseDraw('span',{ 
'text-anchor':'left', 
x : mathMax(config[i].x - calTextLen(text,title.style).w/2,10), 
y : config[i].y 
},calTextLen(title.text,title.style).h) 
.css(title.style) 
.addText(text) 
.appendTo(tpanel); 
//如果为2的时候 就说明是副标题 将它竖过来 
if(i===2){ 
hasSVG 
? elem.attr({transform : 'rotate(270, '+(opts.yUnit.x+10)+', ' + self.height / 2 + ')'}) 
: (elem.element.style.filter ='progid:DXImageTransform.Microsoft.BasicImage(rotation=3)') 
} 
} 
}); 
return this; 
}, 

//画盘子 比较麻烦 
drawPanel : function(type){ 
var opts = this.opts, 
self = this, 
area = opts.area, 
isSegment= opts.charts.type==='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, 
lineNum = mathMax(opts.yUnit.lineNum,2), 
min = opts.yUnit.min, 
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){ 
minValue = o; 
return false; 
} 
}); 
//主盘子容器 
this.panel = this.group('panel').appendTo(); 

var dd = xx(minValue,maxValue,lineNum), 
min = dd.min, 
max = dd.max, 
f = dd.stf; 
//表示画的是横坐标 
if(type.toLowerCase()==='x'){ 
//横坐标单位间隔 
var xPices = drawAreaWidth / opts.xUnit.units.length, 
//单位间隔的中心点 
offset = xPices / 2, 
yPices = drawAreaHeight / lineNum; 

//--------------------------------画横向的点和文字--------------------------------------------------------- 
each(opts.xUnit.units,function(i,d){ 
self.baseDraw('path',{ 
border : 1, 
borderColor : '#C0C0C0', 
isfill : false, 
path : [ 
M, 
processPoint(startX + (i * xPices)), 
processPoint(startY), 
L, 
processPoint(startX + (i*xPices)), 
processPoint(startY + 5) 
] 
}). 
appendTo(self.panel); 
var y = hasSVG?5:10, 
span = self.baseDraw('span',{ 
x : startX + offset + (i * xPices), 
y : startY+y, 
'text-anchor':'middle' 
}) 
.css({ 
fontFamily:'Verdana,Arial,Helvetica,sans-serif', 
fontSize:'12px' 
}) 
.addText(opts.xUnit.units[i]) 
.appendTo(self.panel) 
.element; 
//vml没有x y的概念 所以要简单span宽度的一半 以后用span都需要减掉 
!hasSVG 
span.style.left = parseInt(span.style.left) - span.offsetWidth/2+'px'; 
}); 
//--------------------------------画纵向的点和文字----------------------------------------------------------------------- 
for(i=0;i<=lineNum;i++){ 
self.baseDraw('path',{ 
border : 1, 
borderColor : '#C0C0C0', 
isfill : false, 
path : [M, startX, processPoint(startY - (i * yPices)), L, processPoint(startX + drawAreaWidth), processPoint(startY - (i *yPices))] 
}) 
.css({zIndex:-10}) 
.appendTo(self.panel); 
var span = self.baseDraw('span',{ 
x : startX - 15, 
y : startY - i * yPices-calTextLen(min+i*f+'').h/2, 
'text-anchor':'middle' 
}) 
.css({ 
'font-family':'Verdana,Arial,Helvetica,sans-serif', 
'font-size':'12px', 
width: '40px', 
display:'block', 
textAlign:'right' 
}) 
.addText((min*1000+(i*1000*f/1000)*1000)/1000+'') 
.appendTo(self.panel) 
.element; 
if(!hasSVG){ 
span.style.top = parseInt(span.style.top) + span.offsetHeight/2 -5+'px'; 
span.style.left = parseInt(span.style.left) -35+'px' 
} 
} 
}else{ 
//横坐标单位间隔 
var yPices = drawAreaHeight / (opts.xUnit.units.length), 
//单位间隔的中心点 
offset = Math.round(yPices / 2); 

var x = hasSVG?25:70, 
vv = hasSVG?0:5; 
each(opts.xUnit.units,function(i,d){ 
self.baseDraw('path',{ 
border : 1, 
borderColor : '#C0C0C0', 
isfill : false, 
path : [ 
M, 
processPoint(startX-5), 
processPoint(startY-i * yPices), 
L, 
processPoint(startX), 
processPoint(startY-i * yPices), 
] 
}) 
.appendTo(self.panel); 
var span = self.baseDraw('span',{ 
x : startX - x, 
y : startY -i * yPices-offset-calTextLen(d).h/2+vv, 
'text-anchor':'middle' 
}) 
.css({ 
fontFamily:'Verdana,Arial,Helvetica,sans-serif', 
fontSize:'12px', 
width : '60px', 
textAlign:'right' 
}) 
.addText(d) 
.appendTo(self.panel) 
}); 

var xPices = drawAreaWidth / lineNum; 
for(var i=0;i<=lineNum;i++){ 
self.baseDraw('path',{ 
border : 1, 
borderColor : '#C0C0C0', 
isfill : false, 
path : [ 
M, 
processPoint(startX + (i * xPices)), 
processPoint(startY), 
L, 
processPoint(startX + (i*xPices)), 
processPoint(startY - drawAreaHeight) 
] 
}). 
appendTo(self.panel); 
var span = self.baseDraw('span',{ 
x : startX - calTextLen(min+i*f+'').w/2 + i * xPices, 
y : startY, 
'text-anchor':'left' 
}) 
.css({ 
fontFamily:'Verdana,Arial,Helvetica,sans-serif', 
fontSize:'12px' 
}) 
.addText(min+i*f+'') 
.appendTo(self.panel) 
.element; 
} 
} 
//----------------------------------------------------------------------------------------------------- 
//在画区域图的时候还需要起点的位置啊 
//因为坐标很可能是负数 而且也能不是从0开始的 所以+上jianju 
var jianju =0 
if(min>0)jianju = min; 
if(max<0)jianju = max; 
//计算开始的位置 
startX = opts.charts.panel==='x' ? startX :startX-xPices*(min/f); 
startY = opts.charts.panel==='x' ? startY+yPices*(min/f) : startY; 
opts.draw = { 
startX : startX, // X 轴起点 
startY : startY , // Y 轴起点 
xPices : xPices, // X 轴每份的宽度 
yPices : yPices, // Y 轴每份的宽度 
offset : offset, // X 单分中心点位置偏移量 
jianju : jianju*yPices/f, 
feed : f // Y 轴的每份有多少 
}; 
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',{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',{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||'#606060'; 
} 
this.tipText.nodeValue = txt || ''; 
}, 
hideTooltip: function(){ 
this.tipC.hide(); 
}, 
drawLegend : function(type,redraw){ 
var self = this, 
opts = this.opts, 
//颜色块的大小 
t_width = 20, 
t_height = 20, 
//块之间的距离 
t_space = 5, 
datas = opts.chartData, 
len = datas.length, 
css = opts.legend.style, 
//最大长度 如果是纵着的 需要最大的长度 
maxWidth = 10, 
maxHeight = 30, 
//这个东西的位置 
orig_pos = opts.legend.pos?opts.legend.pos:[2,2], 
//显示隐藏组的函数 
handle = function(i){ 
var g = self.mainGroup['chart'+i]; 
if(g.show){ 
g.chart.hide(); 
g.show = false; 
hasSVG 
? this.attr({fill:'#ccc'}) 
: this[0].style.color = '#ccc' 
}else{ 
g.chart.show(); 
g.show = true; 
hasSVG 
? this.attr({fill:'#000'}) 
: this[0].style.color = '#000' 
} 
}, 
arr = []; 
type = type ||'lateral'; 
var legendPanel = self.group('Legend') 
.appendTo(); 
if(type==='lateral'){ 
//如果是横着的 
var top = orig_pos[1] + 5, 
th = hasSVG?0:3, 
left = orig_pos[0] + 5; 
each(datas, function(i,d){ 
left = i===0 ? left : t_space+left; 
//计算所有left的位置 
self.baseDraw('rect',{ 
arc : 0.1, 
fill : d.color, 
border : 1, 
borderColor : d.color, 
left : left, 
top : top, 
width : t_width+'px', 
height : t_height+'px' 
}) 
.appendTo(legendPanel); 
left = left + t_width+2 + t_space; 
var w = calTextLen(d.name,css).w 
self.baseDraw('span',{ 
'text-anchor':'left', 
x : left, 
y : top+th 
}) 
.css(extend(css,{cursor:'pointer'})) 
.on('click',function(){ 
if(opts.charts.type==='pies')return; 
handle.call(this,i); 
}) 
.addText(d.name) 
.appendTo(legendPanel); 
left = left + w; 
}); 
this.baseDraw('rect',{ 
arc : 0.1, 
fill : 'none', 
border : 1.5, 
borderColor : '#666666', 
width : left+ t_space- orig_pos[0], 
height : maxHeight, 
left : orig_pos[0], 
top : orig_pos[1] 
}) 
.appendTo(legendPanel); 
}else{ 
var top = orig_pos[1] + 5, 
th = hasSVG?0:3, 
left = orig_pos[0] + 5; 
each(datas, function(i,d){ 
top = i===0 ? top : t_space + top; 
self.baseDraw('rect',{ 
arc : 0.1, 
fill : d.color, 
border : 1, 
borderColor : d.color, 
left : left, 
top : top, 
width : t_width+'px', 
height : t_height+'px' 
}) 
.appendTo(legendPanel); 
var h = calTextLen(d.name,css).h; 
self.baseDraw('span',{ 
'text-anchor':'left', 
x : left+t_width+2+t_space, 
y : top+th 
}) 
.css(extend(css,{cursor:'pointer'})) 
.addText(d.name) 
.on('click',function(){ 
if(opts.charts.type==='pies')return; 
handle.call(this,i); 
}) 
.appendTo(legendPanel); 
top = top + h+ t_space; 
maxWidth = Math.max(maxWidth,calTextLen(d.name,css).w); 
}); 
this.baseDraw('rect',{ 
arc : 0.1, 
fill : 'none', 
border : 1.5, 
borderColor : '#666666', 
width : maxWidth+22+15, 
height : top+t_space-orig_pos[1], 
left : orig_pos[0], 
top : orig_pos[1] 
}) 
.appendTo(legendPanel); 
} 
return this; 
}, 
drawLine : function(){ 
var self = this, 
opts = this.opts; 
draw = opts.draw; 
each(opts.chartData,function(i,o){ 
var id = 'chart'+i, 
lineGroup = self.group(id) 
.appendTo(); 
self.mainGroup[id]={chart:lineGroup,show:true}; 
var path = [M], 
data = o.data, 
line; 
for(var i = 0; i < data.length; i++){ 
if( data[i] == null){ 
//如果这个数据不存在 并且不是第一个数据 路径上加 M 
if(path[path.length - 1] !== M) 
path.push(M); 
}else{ 
//如果不是第一个数据 路径添加L 
i !== 0 && path.push("L"); 
//如果前面一个是null 并且不是第一个 把那个L去掉 
if(i > 0 && data[i - 1] == null) 
path.pop(); 
//计算出 点的x,y的位置 
var x = draw.startX + draw.offset + (i * draw.xPices), 
y = draw.startY - (data[i] * (draw.yPices / draw.feed)); 
if(isIE){ 
x = parseInt(x); 
y = parseInt(y); 
} 
path.push(x); 
path.push(y); 
//画点 
self.baseDraw('circle',{ 
x : x, 
y : y, 
r : 4, 
fillColor : o.color 
}) 
.attr({data:data[i]}) 
.css({zIndex:10,cursor:'pointer'}) 
.on('mouseover',(function(o,x,y){ 
return function(){ 
hasSVG 
? (this[0].setAttribute('r','5'),line.attr({'stroke-width':2.5})) 
: (this[0].strokeWeight = 3,line[0].strokeWeight = 2.5); 
self.showTooltip(o,x,y,this.attr('data')); 
} 
})(o,x,y)) 
.on('mouseout',function(){ 
hasSVG 
? (this[0].setAttribute('r','4'),line.attr({'stroke-width':1.5})) 
: (this[0].strokeWeight = 1,line[0].strokeWeight = 1.5); 
self.hideTooltip() 
}) 
.on('click',function(){lineGroup.toFront(); }) 
.appendTo(lineGroup); 
} 
}; 
//画折线 
line = self.baseDraw('path',{ 
border : 1.5, 
borderColor : o.color, 
isfill : false, 
path : path 
}) 
.css({zIndex:5}) 
.on('mouseover',function(){ 
hasSVG 
? this.attr({'stroke-width':2.5}) 
: (this[0].strokeWeight = 2.5); 
}) 
.on('mouseout',function(){ 
hasSVG 
? this.attr({'stroke-width':1.5}) 
: (this[0].strokeWeight = 1.5); 
}) 
.on('click',function(){lineGroup.toFront(); }) 
.appendTo(lineGroup); 
}); 
return this; 
}, 
drawArea : function(){ 
var self = this, 
opts = this.opts, 
draw = opts.draw; 
each(opts.chartData,function(i,o){ 
var id = 'chart' + i, 
areaGroup = self.group(id).appendTo(); 
self.mainGroup[id] = {chart : areaGroup,show : true}; 
//有2个路径 一个是区域的路径 一个是线的路径 
var areaPath = [M, (draw.startX + draw.offset).toFixed(0), (draw.startY-draw.jianju).toFixed(0)], 
path = [M], 
data = o.data, 
line; 
for(var n=0,l=data.length;n<l;n++){ 
//如果数据是空的 
var len = areaPath.length; 
if( data[n] === null){ 
//如果前面的一个不是m 就重新画 所以加上 M 
if(path[path.length - 1] !== M) 
path.push(M); 
//如果第1个 或者前面的都为bull 修改起点坐标 
len===3 
&&(areaPath[1] = (draw.startX +(n+1)*draw.xPices + draw.offset).toFixed(0)); 
//如果前面一个不是结束标识符 区域图结束 如果第一个数据是null 则不进行下面的操作 
if(areaPath[len - 1] !== seal&&n!==0){ 
areaPath=areaPath.concat([ 
areaPath[len - 2], 
(draw.startY-draw.jianju).toFixed(0), 
seal 
]); 
} 
}else{ 
n !== 0 && path.push(L); 
areaPath.push(L); 
//如果前面的那个数据是null 把之前的那个L去掉 
if(n > 0 && data[n - 1] == null){ 
path.pop(); 
//如果是第一个为null 不删除L 
n!==1&&areaPath.pop(); 
} 
var x = draw.startX + draw.offset + (n * draw.xPices), 
y = draw.startY - ((data[n]) * (draw.yPices / draw.feed)); 
if(isIE){ 
x = parseInt(x); 
y = parseInt(y); 
} 
path.push(x); 
path.push(y); 

if(areaPath[len - 1] === seal){ 
areaPath = areaPath.concat([ 
M, 
x, 
parseInt(draw.startY-draw.jianju), 
L, 
x, 
y 
]); 
}else{ 
areaPath.push(x); 
areaPath.push(y); 
} 
//如果是最后一个点 
if(n === l - 1){ 
areaPath.push(x); 
areaPath.push(parseInt(draw.startY-draw.jianju)); 
} 
//画点 
self.baseDraw('circle',{ 
x : x, 
y : y, 
r : 4, 
fillColor : o.color 
}) 
.attr({data:data[n]}) 
.on('mouseover',(function(o,x,y){ 
return function(){ 
hasSVG 
? (this[0].setAttribute('r','5'),line.attr({'stroke-width':2.5})) 
: (this[0].strokeWeight = 3,line[0].strokeWeight = 2.5); 
self.showTooltip(o,x,y,this.attr('data')); 
} 
})(o,x,y)) 
.on('mouseout',function(){ 
hasSVG 
? (this[0].setAttribute('r','4'),line.attr({'stroke-width':1.5})) 
: (this[0].strokeWeight = 1,line[0].strokeWeight = 1.5); 
self.hideTooltip() 
}) 
.on('click',function(){areaGroup.toFront(); }) 
.css({zIndex:10,cursor:'pointer'}) 
.appendTo(areaGroup); 
} 
} 
areaPath.push(seal) 
self.baseDraw('path',{ 
border : 0, 
isfill : true, 
fillColor : o.color, 
opacity : 0.5, 
path : areaPath 
}) 
.css({zIndex:5}) 
.appendTo(areaGroup); 
line = self.baseDraw('path',{ 
border : 2.5, 
borderColor : o.color, 
isfill : false, 
path : path 
}) 
.on('mouseover',function(){ 
hasSVG 
? this.attr({'stroke-width':2.5}) 
: (this[0].strokeWeight = 2.5); 
}) 
.on('mouseout',function(){ 
hasSVG 
? this.attr({'stroke-width':1.5}) 
: (this[0].strokeWeight = 1.5); 
}) 
.on('click',function(){areaGroup.toFront(); }) 
.css({zIndex:-1}) 
.appendTo(areaGroup); 
}); 
return this; 
}, 
drawColumns : function(){ 
var self = this, 
opts = this.opts, 
draw = opts.draw, 
chartData = opts.chartData, 
dataLen = chartData.length, 
//多个柱子之间的间距 
columnSpace = 3, 
//一个位置中 所有的间隔之和 
columnPadding = columnSpace * dataLen + columnSpace, 
//每个柱子的宽度 
columnSize = self.opts.charts.panel==='x' 
? Number(((draw.xPices - columnPadding) / dataLen).toFixed(0)) 
: Number(((draw.yPices - columnPadding) / dataLen).toFixed(0)); 
each(chartData, function(i,o){ 
var data = o.data, 
id = 'chart' + i, 
isX = opts.charts.panel==='x', 
colGroup = self.group(id).appendTo(), 
//每个点开始的位置 
start = self.opts.charts.panel==='x' 
? draw.startX + columnSpace + i*(columnSize+columnSpace) 
: draw.startY + columnSpace + i*(columnSize+columnSpace) 
self.mainGroup[id] = {chart:colGroup,show:true}; 
for(var j = 0,l=data.length; j < l ; j++){ 
if(data[j]===null) continue; 
//如果是横盘子 
if(isX){ 
var x = Number((start + j *draw.xPices ).toFixed(0)), 
y = Number((draw.startY).toFixed(0)), 
height = Number((data[j] * (draw.yPices / draw.feed)).toFixed(0)), 
path = [ 
M, 
x, 
y, 
L, 
x, 
y -height, 
L, 
x + columnSize, 
y - height, 
L, 
x + columnSize, 
y, 
seal 
]; 
var pos = [x+columnSize/2,data[j]>0?y-height:draw.startY]; 
}else{ 
var x = Number((draw.startX).toFixed(0)), 
width = Number((data[j]*((draw.xPices / draw.feed))).toFixed(0)), 
y = Number((start - (j+1) *draw.yPices ).toFixed(0)), 
path = [ 
M, 
x, 
y, 
L, 
x+ width, 
y , 
L, 
x + width, 
y + columnSize, 
L, 
x , 
y+ columnSize, 
seal 
]; 
var pos = [draw.startX+width/2,y-columnSize]; 
} 
self.baseDraw('path',{ 
border : 0, 
isfill : true, 
fillColor : o.color, 
opacity : 1, 
path : path 
}) 
.attr({data:data[j]}) 
.css({zIndex:5,cursor:'pointer'}) 
.on('mouseover',(function(x,y,d){ 
return function(){ 
this.setOpacity(0.85); 
self.showTooltip(o,x,y,this.attr('data')); 
} 
})(pos[0],pos[1],data[j]) 
) 
.on('mouseout',(function(x,y){ 
return function(){ 
this.setOpacity(1); 
self.hideTooltip(); 
} 
})(x,y)) 
.appendTo(colGroup); 
} 
}); 
return this; 
}, 
drawPie : function(){ 
var self = this, 
opts = this.opts, 
area = opts.area, 
rx = area.centerX, 
ry = area.centerY, 
inc = 0, 
total = 0, 
data = [], 
cumulative = -0.25, // start at top; 
circ = 2 * Math.PI, 
radiu = mathMin(opts.charts.radius,mathMin(area.areaWidth/2,area.areaHeight/2)), 
fraction, 
half_fraction; 
each(opts.chartData,function(i,o){ 
typeof o.data ==='object' 
? (data.push((function(o){ 
var all =0; 
for(var i in o) 
all+=~~o[i] 
return all 
})(o.data))) 
:data.push(mathAbs(o.data)) 
}); 
each(data,function(i,o){ 
total = total + o; 
}); 
each(data,function(i,o){ 
var pieGroup = self.group('chart'+i).appendTo(), 
s = inc/total*360, 
e = (inc + o)/total*360, 
name = opts.chartData[i].name, 
size = calTextLen(name), 
dot = angle(radiu,[rx,ry],s+(e-s)/2,2), 
x = rx + (dot[0]-rx)/2 - size.w/2, 
y = ry + (dot[1]-ry)/2 - size.h/2, 
len = Math.sqrt((x-rx)*(x-rx)+(y-ry)*(y-ry)), 
moveDisplacement = ((x-rx)*8/len)+','+((y-ry)*8/len); 
inc = inc + o; 
var value = Number(o); 
fraction = total ? value / total : 0; 
half_fraction = total ? (value / 2) / total : 0; 
var start = cumulative * circ; 
half_cumulative = cumulative + half_fraction; 
cumulative += fraction; 
var end = cumulative * circ; 
self.baseDraw('pie',{ 
config : opts.chartData[i], 
s : start, 
e : end, 
r : radiu, 
innerR : 0 
}) 
.css({zIndex:5,cursor:'pointer'}) 
.attr({move:moveDisplacement}) 
.on('mouseover',function(){ 
this.setOpacity(0.85); 
}) 
.on('mouseout',function(){ 
this.setOpacity(1); 
}) 
.on('click',function(){ 
var m = this.attr('move') 
if(m.indexOf('+')>0){ 
hasSVG 
? this.attr({ 
transform: 'translate(0,0)' 
}) 
: this.css({ 
left : '0px', 
top : '0px' 
}) 
this.attr({move:m.replace('+','')}); 
}else{ 
var s= m.split(','); 
hasSVG 
? this.attr({ 
transform: 'translate('+m+')' 
}) 
: this.css({ 
left : s[0]+'px', 
top : s[1]+'px' 
}) 
this.attr({move:m+'+'}); 
} 
}) 
.appendTo(pieGroup); 
self.mainGroup['chart'+i] = {chart:pieGroup,show:true}; 
self.baseDraw('span',{ 
x : x, 
y : y, 
fill : '#fff', 
'text-anchor':'left' 
}) 
.css({ 
fontFamily : 'Verdana,Arial,Helvetica,sans-serif', 
fontSize : '12px', 
position : 'absolute', 
color : '#fff', 
zIndex : 10 
}) 
.addText(name) 
.appendTo(pieGroup); 
}); 
}, 
drawPies : function(){ 
var self = this, 
opts = this.opts, 
area = opts.area, 
rx = area.centerX, 
ry = area.centerY, 
total = 0, 
data = [], 
chartData = opts.chartData, 
cumulative = -0.25, // start at top; 
circ = 2 * Math.PI, 
radiu = mathMin(opts.charts.radius,mathMin(area.areaWidth/2,area.areaHeight/2)), 
fraction, 
half_cumulative, 
half_fraction; 
each(chartData,function(i,o){ 
each(o.data,function(j,d){ 
data[j] 
? data[j] +=mathAbs(d) 
: data[j] =mathAbs(d) 
}); 
}); 
//看有多少个数据来生成来生成内半径 
var len = data.length, 
innerSpace = radiu / 10; 
Rpice = (radiu - innerSpace) / len, 
piesGroup = this.group('pies').appendTo(); 
each(data,function(i,d){ 
var inc = 0 ; 
if(d===0) return; 
each(chartData,function(j,o){ 
if(~~o.data[i]===0)return; 
var outR = radiu - Rpice * i, 
innerR = radiu - Rpice * (i + 1), 
value = ~~o.data[i], 
fraction = value / d; 
half_fraction = (value/2)/d , 
start = cumulative * circ, 
s = inc/d*360, 
e = (inc + value)/d*360; 
inc = inc + value; 
var name = o.name, 
size = calTextLen(name), 
dot = angle(radiu,[rx,ry],s+(e-s)/2,2), 
px = dot[0]>rx?1:-1, 
py = dot[1]>ry?1:-1; 
var x = rx + px*innerSpace + ((dot[0]-rx-px*innerSpace)/len)*(len-i-1)+((dot[0]-rx-px*innerSpace)/len)/2- size.w/2, 
y = ry + py*innerSpace +((dot[1]-ry-py*innerSpace)/len)*(len-i-1)+((dot[1]-ry-py*innerSpace)/len)/2- size.h/2; 
half_cumulative = cumulative + half_fraction, 
cumulative += fraction, 
end = cumulative * circ; 
self.baseDraw('pie',{ 
config : o, 
s : start, 
e : end, 
r : outR, 
innerR : innerR 
}) 
.css({zIndex:5,cursor:'pointer'}) 
.on('mouseover',function(){ 
this.setOpacity(0.85); 
}) 
.on('mouseout',function(){ 
this.setOpacity(1); 
}) 
.appendTo(piesGroup); 
self.baseDraw('span',{ 
x : x, 
y : y, 
fill : '#fff', 
'text-anchor':'left' 
}) 
.css({ 
fontFamily : 'Verdana,Arial,Helvetica,sans-serif', 
fontSize : '12px', 
position : 'absolute', 
color : '#fff', 
zIndex : 10 
}) 
.addText(name) 
.appendTo(piesGroup); 
}) 
}); 
}, 
drawSegment : function(){ 
var self = this, 
opts = this.opts, 
draw = opts.draw, 
chartData = opts.chartData, 
columnPad = 5, 
columnWidth = draw.xPices - columnPad * 2; 
each(chartData,function(i,c){ 

}); 
}, 
baseDraw : function(type,config){ 
var self = this 
arg = arguments; 
return { 
rect : function(){ 
var set = {}; 
set.rx = set.ry = config.arc*30 || 5; 
set.width = config.width || 50; 
set.height = config.height || 50; 
set.fill = config.fill || '#fff'; 
set['fill-opacity'] = config.opacity || 0.85; 
set['stroke-width'] = config.border || 2; 
set.stroke = config.borderColor || '#606060'; 
set.transform = 'translate('+(config.left||0)+','+(config.top||0)+')'; 
return self.createElement('rect') 
.attr(set) 
}, 
text : function(){ 
return self.createElement('text') 
.attr(config) 
}, 
span : function(){ 
var elem= self.createElement('text') 
.attr(config) 
.attr({ 
y : config.y+(arg[2]||15) 
}) 
return elem; 
}, 
path : function(){ 
var set = {}; 
set['stroke-width'] = config.border; 
set.stroke = config.borderColor || '#C0C0C0'; 
set.fill = config.isfill?config.fillColor:'none'; 
set.d = config.path; 
config.opacity 
&&(set['fill-opacity'] = config.opacity); 
return self.createElement('path') 
.attr(set); 
}, 
circle : function(){ 
var set = {}; 
set.cx = config.x; 
set.cy = config.y; 
set.r = config.r; 
set.fill = config.fillColor; 
return self.createElement('circle') 
.attr(set); 
}, 
pie : function(){ 
//config,s,e,r,index 
var opts = self.opts, 
s = config.s, 
r = config.r, 
e = config.e - 0.000001, 
id = 'chart'+config.index, 
area = opts.area, 
rx = area.centerX, 
ry = area.centerY, 
cosStart = mathCos(s), 
sinStart = mathSin(s), 
cosEnd = mathCos(e), 
sinEnd = mathSin(e), 
color = config.config.color, 
innerR = config.innerR, 
longArc = e - s < Math.PI ? 0 : 1, 
path = [ 
M, 
rx + r * cosStart, 
ry + r * sinStart, 
'A', 
r, 
r, 
0, 
longArc, 
1, 
rx + r * cosEnd, 
ry + r * sinEnd, 
L, 
rx + innerR * cosEnd, 
ry + innerR * sinEnd, 
'A', // arcTo 
innerR, // x radius 
innerR, // y radius 
0, // slanting 
longArc, // long or short arc 
0, // clockwise 
rx + innerR * cosStart, 
ry + innerR * sinStart, 
'Z' 
]; 
return self.baseDraw('path',{ 
border : 1, 
border : '#fff', 
isfill : true, 
fillColor : color, 
opacity : 1, 
path : path 
}) 
} 
}[type](); 
} 
}; 
//--------------------------------------------------------------------------------------------------- 
//如果是vml 修改smipleChart.prototype中的一些方法 
!hasSVG 
&&extend(smipleChart.prototype,{ 
baseDraw : function(type,config){ 
var self = this, 
width = this.width, 
height = this.height, 
name = arguments[2]; 
return { 
rect : function(){ 
var attr = {}, 
css = {}; 
attr.arcsize = config.arc || 0.2 +''; 
if(config.fill==='none'){ 
attr.filled = 'f' 
}else{ 
attr.filled = 't'; 
attr.fillcolor = config.fill || '#fff'; 
} 
attr.strokeWeight = config.border || 2; 
attr.strokeColor = config.borderColor || '#606060'; 
css.width = config.width || 50 +'px'; 
css.height = config.height || 50 +'px'; 
css.zIndex = 10; 
css.left = config.left||0+'px'; 
css.top = config.top ||0+'px'; 
return self.createElement('roundrect') 
.attr(attr) 
.css(css) 
}, 
text : function(){ 
return self.createElement('TextBox') 
.attr({inset : "2px,2px,2px,2px" }) 
}, 
span : function(){ 
return self.createElement('span'). 
css({ 
position:'absolute', 
left : config.x+'px', 
top : config.y+'px' 
}) 
}, 
path : function(){ 
var attr = {}, 
css = { 
width : width+'px', 
height : height+'px' 
}; 
if(config.border===0){ 
attr.Stroked = 'f'; 
attr.strokeWeight =0; 
}else{ 
attr.strokeWeight = config.border||1 ; 
} 
attr.strokeColor = config.borderColor || "#C0C0C0"; 
attr.filled = config.isfill?'t':'f'; 
attr.filled==='t' 
&&(attr.fillcolor=config.fillColor||"#C0C0C0"); 
attr.coordsize = width+','+height; 
attr.path = config.path; 
var elem = self.createElement() 
.attr(attr) 
.css(css); 
if(config.opacity){ 
var fill = self.createElement('fill') 
.attr({ 
type : 'fill', 
color : config.fillColor||"#C0C0C0", 
opacity : config.opacity 
}) 
.appendTo(elem); 
//那这个对象的一个属性引用设置透明的元素 以后会用到 
elem.opacity = fill[0]; 
} 
return elem; 
}, 
circle : function(){ 
var attr ={ 
strokeWeight : 1, 
coordsize : width+','+height, 
filled : 't' 
}, 
css ={ 
width : width+'px', 
height : height+'px' 
} 
x = config.x, 
y = config.y, 
r = config.r; 
attr.strokeColor=attr.fillcolor = config.fillColor 
attr.path =[ 
'wa', // clockwisearcto 
x - r, // left 
y - r, // top 
x + r, // right 
y + r, // bottom 
x + r, // start x 
y, // start y 
x + r, // end x 
y, // end y 
'e' // close 
]; 
return self.createElement() 
.attr(attr) 
.css(css) 
}, 
pie : function(){ 
////config,s,e,r,index 
var opts = self.opts, 
area = opts.area, 
r = config.r, 
rx = area.centerX, 
ry = area.centerY, 
innerR= config.innerR||0, 
sDot = angle(r,[rx,ry],s,2), 
eDot = angle(r,[rx,ry],e,2), 
color = config.config.color, 
s = config.s, 
e = config.e, 
e = e - s == 2 * Math.PI ? e - 0.001 : e, 
cosStart = mathCos(s), 
sinStart = mathSin(s), 
cosEnd = mathCos(e), 
sinEnd = mathSin(e), 

path = [ 
'wa', // clockwisearcto 
(rx - r).toFixed(0), // left 
(ry - r).toFixed(0), // top 
(rx + r).toFixed(0), // right 
(ry + r).toFixed(0), // bottom 
(rx + r * cosStart).toFixed(0), // start x 
(ry + r * sinStart).toFixed(0), // start y 
(rx + r * cosEnd).toFixed(0), // end x 
(ry + r * sinEnd).toFixed(0), // end y 
'at', // clockwisearcto 
(rx - innerR).toFixed(0), // left 
(ry - innerR).toFixed(0), // top 
(rx + innerR).toFixed(0), // right 
(ry + innerR).toFixed(0), // bottom 
(rx + innerR * cosEnd).toFixed(0), // start x 
(ry + innerR * sinEnd).toFixed(0), // start y 
(rx + innerR * cosStart).toFixed(0), // end x 
(ry + innerR * sinStart).toFixed(0), // end y 
'x', // finish path 
'e' // close 
]; 
return self.baseDraw('path',{ 
border : 1, 
border : '#fff', 
isfill : true, 
fillColor : color, 
opacity : 1, 
path : path 
}) 
} 
}[type](); 
} 
}); 
//--------------------------------------------------------------------------------------------------- 
})(document); 
window.onload = function(){ 
var config = { 
charts : { 
type : 'line', 
radius : 150, 
panel : 'x', 
style: { 
fontFamily: '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', // default font 
fontSize: '12px' 
} 
}, 
title : { 
text : '线性图标' , 
y : 10, 
style : { 
color: 'black', 
fontSize: '16px' 
} 
}, 
subTitle : { 
text : '线性图标副标题', 
y : 35, 
style: { 
color: '#111', 
fontSize: '12px' 
} 
}, 
legend : { 
enable : true, 
//type : 'lateral', // lateral 横向 或 lengthwise 纵向 
type : 'lateral', 
pos : [10,10], 
style:{ 
fontFamily: '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', // default font 
fontSize: '12px', 
magin:'0px' 
} 
}, 
yUnit : { 
text : '线性图标侧标题', 
x : 20, 
style: { 
color : '#111', 
fontSize : '12px' 
} 
}, 
xUnit : { 
units: [ 
'一月', 
'二月', 
'三月', 
'四月', 
'五月', 
'六月', 
'七月', 
'八月', 
'九月', 
'十月', 
'十一月', 
'十二月' 
] 
}, 
chartData : [ 
{ 
name : 'xcv', 
color : '#4572A7', 
data : [-18,45,-38,29,95,-45,77] 
}, { 
name: 'frfr', 
color: '#AA4643', 
data: [-44,12,78,-100,13,4,-56,-34] 
}, { 
name: 'AAAAA', 
color: '#89A54E', 
data: [null,78,83,null,22,-78,2,44,78] 
}, { 
name: 'BBBB', 
color: '#80699B', 
data: [null, 58, 35, null, 52, 47, 26, -55, 39, 123,15,66] 
} 
] 
}; 
new smipleChart($('line'),config); 
config.charts.type ='area'; 
config.title.text ='区域图标' 
config.subTitle.text='区域图标副标题' 
config.yUnit.text ='区域图标侧标题' 
new smipleChart($('area'),config); 
config.title.text ='柱状图标' 
config.subTitle.text='柱状图标副标题' 
config.yUnit.text ='柱状图标侧标题' 
config.charts.type ='columns'; 
config.chartData =[ 
{ 
name : 'xcv', 
color : '#4572A7', 
data : [-0.01,-0.62,0,0.55,null,0.78,-0.63,-0.82,null,null,0.33] 
}, { 
name: 'frfr', 
color: '#AA4643', 
data: [-0.22,0.82,0.55,1.32,0.33,0.95,null,1,0.65,null,0.78] 
}, { 
name: 'AAAAA', 
color: '#89A54E', 
data: [null,0.62,0.34,null,0.63,0,-0.23,-1,0.62,0.45,null,-0.56] 
} 
] 
new smipleChart($('zhu'),config); 
config.charts.panel='y' 
new smipleChart($('zhu1'),config); 
config.charts.type ='pie'; 
config.title.text ='饼图图标' 
config.subTitle.text='饼图图标副标题' 
config.yUnit.text ='' 
config.legend.type='lengthwise'; 
config.chartData =[ 
{ 
name : 'aaa', 
color : '#4572A7', 
data : [433,123,null,66] 
}, { 
name: 'bbb', 
color: '#AA4643', 
data: [45,33,33,511] 
}, { 
name: 'ccc', 
color: '#89A54E', 
data: [55,null,75,333] 
} 
] 
config.legend.pos= [680,30] 
new smipleChart($('pie'),config); 
config.charts.type ='pies'; 
config.title.text ='多层饼图图标' 
config.subTitle.text='多层饼图图标副标题' 
config.legend.type='lateral'; 
config.legend.pos= [330,400] 
new smipleChart($('pies'),config); 

config.chartData =[ 
{ 
name : 'xcv', 
color : '#4572A7', 
data : [433,355,275,null,588,323,576,32,99] 
}, { 
name: 'frfr', 
color: '#AA4643', 
data: [45,666,100,null,677,56,88,633,55,64] 
}, { 
name: 'AAAAA', 
color: '#89A54E', 
data: [55,162,75,null,364,0,637,112,163,615] 
} 
] 
config.yUnit.lineNum = 2; 
config.title.text ='比较小的' 
config.subTitle.text='只设置了2条线' 
config.yUnit.text ='小测标题' ; 
config.charts.type ='line'; 
config.legend.pos= [10,10] 
new smipleChart($('vv'),config); 
config.yUnit.lineNum = 10; 
config.charts.panel = 'x'; 
config.charts.type ='segment'; 
//new smipleChart($('segment'),config); 
} 
</script> 
</body> 
</html>
Javascript 相关文章推荐
使用jQuery将多条数据插入模态框的实现代码
Oct 08 Javascript
js中的内部属性与delete操作符介绍
Aug 10 Javascript
javascript实现五星评分功能
Nov 10 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
javascript+css实现进度条效果
Mar 25 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
Sep 18 Javascript
Openlayers实现地图全屏显示
Sep 28 Javascript
一道JS算法面试题——冒泡、选择排序
Apr 21 Javascript
javascript Window及document对象详细整理
Jan 12 #Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 #Javascript
奉献给JavaScript初学者的编写开发的七个细节
Jan 11 #Javascript
从盛大通行证上摘下来的身份证验证js代码
Jan 11 #Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
Jan 11 #Javascript
javascript获取当前日期时间及其它操作函数
Jan 11 #Javascript
JavaScript中URL编码函数代码
Jan 11 #Javascript
You might like
说明的比较细的php 正则学习实例
2008/07/30 PHP
怎样搭建PHP开发环境
2015/07/28 PHP
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
JS 判断代码全收集
2009/04/28 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
原生JavaScript+LESS实现瀑布流
2014/12/12 Javascript
JavaScript将一个数组插入到另一个数组的方法
2015/03/19 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
如何处理JSON中的特殊字符
2016/11/30 Javascript
Node.js学习入门
2017/01/03 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
遗传算法之Python实现代码
2017/10/10 Python
python如何统计序列中元素
2020/07/31 Python
Python数据类型之Set集合实例详解
2019/05/07 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
干部下基层实施方案
2014/03/14 职场文书
区域销售主管岗位职责
2014/06/15 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android