温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
圈子列表加载中...
this.p={b:2,c:10};
有道博客搜索
博友列表加载中...
this.p={b:2,m:0};
模块内容加载中...
this.p={b:2,maxb:5,maxp:6}
{if !defined('b')} 日志更新列表加载中... {elseif !b.length} 没有日志更新！ {else} {list b as x}·{/list} {/if}
{if !defined('p')} 相片更新列表加载中... {elseif !p.length} 没有相片更新！ {else} {list p as x}{/list} {/if}
{list 0..6 as x}${dv[x]}{/list} {list 1..6 as x}{list 1..7 as y}{/list}{/list}
{list df..dt as x}{/list}
发现好博客
列表加载中...
this.p={b:2,cn:12,ct:12};
模块内容加载中...
this.p={b:2,c:'57447',r:'http://b.bst.126.net/common/weather/'};
{if defined('w')} ${w.province}{if w.province!=w.cityName}，${w.cityName}{/if}
{var ne = w.weatherFromCode!=w.weatherToCode}
{if ne}{/if}
今:${w.temperatureLow}℃~${w.temperatureHigh}℃
{var ne = w.weatherFromCode48!=w.weatherToCode48}
{if ne}{/if}
明:${w.temperatureLow48}℃~${w.temperatureHigh48}℃
{else} 天气服务器当前不可用！ {/if}
列表加载中...
this.p={b:2,cn:15};
最后登录加载中...
this.p={b:2,ua:35, ub:'http://img.bimg.126.net/photo/gnaeDvkKGkYHkqFXcYiE4Q==/332356.jpg',us:'他', friendstatus:'none',followstatus:'unFollow',hmcon:'0',aShowT:'0',guideId:6};
积分 ${data.totalScore} 分，距离下一等级还有 ${data.nextGradeNeedScore}分
心情随笔列表加载中...
this.p={b:2,n:5,r:'http://xingzihuahappy./blog/#m=1&c=',mset:'000',mcon:'',srk:-100};
{if defined('fl')&&fl.length>0} {list fl as x}
${x.content|xescape:x.id,x.moveFrom} ${x.publishTime|xtime}
{if x.moveFrom&&x.moveFrom=='wap'} && {/if} {if x.moveFrom&&x.moveFrom=='mobile'} && {/if}
{/list} {else} 暂无心情随笔记录！ {/if}
模块内容加载中...
this.p={b:2,cv:'http://b.bst.126.net/newpage/images/album/cover75.gif'};
{if ps<0} {if ps==-1}博主相册被封禁，您无法查看！{else}博主尚未激活相册，您暂时无法查看！{/if} {elseif !ha} 目前没有相片！ {elseif al.length<=0}
暂时无法加载相册数据，请稍后再试！
停止 上一个 下一个 相册列表
{if defined('al')&&al.length>0} {list al as x}
${x.name|escape} ${x.count|default:0}张相片 ${x.t|format:'MM-dd HH:mm'}
{/list} {/if}
大部分的职业女性都有自信，都认为自己是成功而又漂亮的女人。都喜欢听情话，喜欢艳遇，喜欢跟成功男子来往，喜欢读灰姑娘变身童话公主的故事。而正是这些，才让女人跌落在情色的陷阱里……　
　　职场女人 如何躲避男人的桃色陷阱 　　在饭桌上，我们读不到男人们身后的信号。他们会竭尽全力的保持单身男人的风范，而不表现得像一个丈夫或者父亲。他们会找各种各样的理由和女人聚会喝酒，让空间看起来变得更容易风月。 　　然而，如何让自己不失去客户、又不吃亏，又避免陷入男人的桃色陷阱，并且还可以保持朋友关系? 　　大部分的职业女性都有自信，都认为自己是成功
恋爱与婚姻是两个不同的阶段，也许男人会选择一个性感诱人的美女当做恋爱伴侣，却未必会将她视为未来结婚对象。进入到婚姻阶段，男人总是会很有讲究。一起来看看男人选女人的时候有什么潜规则。　
妻子不同于恋人 男人选老婆也有潜规则
　　职场有潜规则，恋爱也有潜规则，潜规则潜藏于各个行业各个角落。可是你是否知道，男人选女人也有潜规则呢? 　　都说女人很现实，挑男人一定要有钱有房，甚至为了金钱甘愿做富人的情人或者小三。在当下的社会，都以金钱为上，所以我们也不好责怪这些追逐名利的女人，可是还有很多女性，不为钱财所动，她们在乎的是男人的过往。
&&&&&&&& 1.靠山山会倒，靠人人会跑，只有自己最可靠。 &&&&&&&& 2.没有人陪你走一辈子，所以你要适应孤独，没有人会帮你一辈子，所以你要奋斗一生。&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
& & &每位中国公民都会拥有一组只属于自己的身份证号码,这些普普通通的数字能为我们带来好运?不信吗?那就一起来测测吧!
玩法：身份证号码通常由0~9十个阿拉伯数字组成,有时还会有个字母X，在玩儿这个游戏时，X可以忽略不记 举例：如身份证号码为221470，这组数字中缺少的数字是5和9,接下来就找出5和9这两个数字所对应的答案吧.看看会伴随你一生的这串数字,会给你带来怎样的好运气！ 　　
缺少1之人 缺少1之
说到好色，人们就会想到男人，男人好色是出了名的，但是今天呢我要说一说好色的女人，而且我要说不好色的女人不是好女人，好色的女人才是好女人。其实不管是男人还是女人，他们在满足自己物质与精神生活的同时免不了要考虑到自身的原始欲望，我们人类也是由动物进化而来，对于繁衍生息这个历史重任我们比其他任何动物都表现的突出。男人好色人们容易看穿，女人好色人们看不穿，因为男人心里藏不住事，一有点什么事情就众人皆知，而女人不会这样，她们把自己的那些羞人的心事藏在心底，除了自己谁也不让知道。说女人好色，人们一般就会认为这个“好色”的女人是放荡的，不顾廉耻的风尘女子。好色与女人搭配到一起显得格格不入。当然了每一个人对于“好色”这个词语的理解都是不一样的，好，有爱好，喜好，追求等等意思；色，有美色，颜色，姿色等等意思。女人好色与男人可是有着天壤之别，男人好色，纯粹是美色，而女人好色，好的不仅仅是美色，还有气质，精神，信仰，感情等等。
&c.h.i.n.a.&中国&&&&
come&here.&i&need&affection.&来这&我需要爱&&&& k.o.r.e.a.&&韩国&&&& keep&optimistic&regardless&of&every&adversity.&虽然事与愿违保持乐观&&&& &h.o.l.l.a.n.d&荷兰&&&&
一个男人守住老婆过一辈子，没有花心，是没有出息的。这样的男人我不爱。我专爱偷情的男人。”
一个女大学生给我打来电话，以下是她的内心自白。郭一平原话照录： 爱偷情的男人，敢于打破常规 爱偷情的男人，敢于打破常规，想别人不敢想，做别人不敢做，剑走偏锋，这恰恰是一个人在世上成功所需要的品格。你看看，那些成功者又有哪个是循规蹈短，按常理成功的？那些不敢偷情的男人，注定与成功无缘，跟上这样的男人，女人不得受穷一辈子？ 爱偷情的男人，征服欲强 天下之物各有所
经常听到，有人说：吃是为了取悦自己，穿是为了取悦别人，仔细想来还真有那么点道理，美味的东西只有自己慢慢品尝，才能感觉到她的可口，而自己穿的衣服，不管好与否，都没有什么特殊的感觉，而只是在其他人的眼中留意下影像。　　　　如果一个人生活在一个城市，没有其他的人，那么可想而知，他所穿的衣服，是不是会特别在意与挑选，这些都是我们所能想到的，人本有懒惰心理，会顺应舒服的方向发展下去，他们可能不会在意自己穿的什么，当有好多吃的东西摆在眼前时，他们也许会一直寻找感觉到最可口的东西，也许会这样长久的下去看，当我们生活在这个大千世界中，纷繁的事物无奇不有，每天会忙碌于各种日常事情中，不会考虑太多，不知是因为事情多还是不想去考虑，这样种种的原因是我们日复一日的作息下去。　　　　根据人的本性，生活在一个群体中，每天与周围的人打交道，有着不可分割的关系，自己的时间与精力都这样度过，
& & & & & &
网易公司版权所有&&
二次元同好交流新大陆
扫码下载App
{list x.l as y}
{/list} {/list}
{if defined('wl')} {list wl as x}{/list} {/if}smipleChart
简单图表类 javascript
发布时间: 17:40:17
支持 线性图 区域图 柱状图 饼图
支持多浏览器
用到的是svg& vml
js浮点精度问题 不好解决 求助。。。。。。。。。
水平有限 难免问题多多 望赐教。。。。。。。
&!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"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&smipleChart&/title&
&style type="text/css"&
height:450 width:800 border:1px solid #999; position: margin:20
&div id='t'&&/div&
&div id='t1'&&/div&
&div id='line' &&/div&
&div id='area' &&/div&
&div id='zhu' &&/div&
&div id='zhu1'
&div id='segmentx' &&/div&
&div id='segmenty' &&/div&
&div id='pie' &&/div&
&div id='pies' &&/div&
&div id='vv'
&script type="text/javascript"&
(function(doc,undefined){
= win.SVGAngle || doc.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1"),
= /msie/i.test(navigator.userAgent) && !win.opera,
= hasSVG?'d':'path',
= hasSVG?'z':'e',
mathRound = math.round,
mathFloor = math.floor,
= math.ceil,
= math.max,
= math.min,
= math.abs,
= math.cos,
= math.sin,
win.$$ = function(Id){
return document.getElementById(Id);
win.extend = function(){
var target = arguments[0] || {}, i = 1, length = arguments.length, deep = true,
if ( typeof target === "boolean" ) {
target = arguments[1] || {};
if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]")
target = {};
for(;i&i++){
if ( (options = arguments[ i ]) != null )
for(var name in options){
var src = target[ name ], copy = options[ name ];
if ( target === copy )
if ( deep && copy && typeof copy === "object" && !copy.nodeType ){
target[ name ] = arguments.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy );
else if(copy !== undefined)
target[ name ] =
win.each =
function ( object, callback, args ) {
var name, i = 0, length = object.
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 )
for ( ; i & i++)
if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false )
if ( length === undefined ) {
for ( name in object )
if ( callback.call( object[ name ], name, object[ name ] ) === false )
for ( var value = object[0];
i & length && callback.call( value, i, value ) !== value = object[++i] ){}
win.contains = function(p,c){
if(!p||!c)
return isIE
? p.contains(c)
: p.compareDocumentPosition(c)==20
//---------------------------------------------------------------
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);
extend(span.style,{
fontFamily : '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif'
span.innerHTML = txt || '';
span.style.visibility = 'hidden';
doc.body.appendChild(span);
= span.offsetWidth,
height = span.offsetH
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){
stf = ((b*t-a*t)/lineNum)/t,
arr = [1,2,2.5,5,10],
分割线的基数是 [1,2,2.5,5,10] 这个步骤是查找 间隔 属于哪个范围
if(stf&arr[0]){
while( stf&arr[0] ){
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] ){
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){
= (mathAbs(a)*t)/(v*t),
isZ = bj!==parseInt(bj);
? 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&&num!=0&&a%10!==0){
while(a!=0&&num!=0){
a = (a*t-v*t)/t;
if((a*t-v*num*t)/10000&0&&a%10===0)
if(num!=0){
while(num!==0){
b = (b*t+v*t)/t
//坐标比较整数化
if(b&0&&num!=0){
while(b!=0&&num!=0&&b%10!==0){
b = (b*t+v*t)/t;
if((b*t+v*num*t)/t&0&&b%10===0)
if(num!=0){
while(num!==0){
a = (a*t-v*t)/t
return {min:a,max:b,stf:v};
//---------------------------------------------------------------------------------------------------------------
//对svg vml元素的一些创建 修改属性 样式 删除 ==
一些的操作
win.vector = function(){};
vector.prototype = {
$c : function(graphic,nodeName){
this.element = this[0] = doc.createElementNS('http://www.w3.org/2000/svg', nodeName);
this.graphic =
attr: function(hash,val){
= this.element,
if(typeof hash === 'string'){
if(val === undefined){
return elem.getAttribute(hash);
elem.setAttribute(hash, val);
for(key in hash){
value = hash[key];
if(key === path){
value && value.join
&&(value = value.join(' '));
|^$)/.test(value)
&&(value = 'M 0 0');
elem.setAttribute(key, value)
function(hash){
for(var key in hash){
isIE && key == "opacity"
? this[0].style['filter'] = "alpha(opacity="+ hash[key] * 100+")"
: this[0].style[key] = hash[key];
on: function(eventName, handler){
var self =
/*this.element.addEventListener(eventName,function(){
handler.call(self)
},false);*/
this.element['on' + eventName] = function(e){
e = e || win.
handler.call(self,e);
appendTo: function(parent){
if(parent){
parent.element
? parent.element.appendChild(this.element)
: parent.appendChild(this.element)
this.graphic.container.appendChild(this.element);
addText: function(str){
var elem = this.
if(elem.nodeName === 'text'){
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({'stroke-width':v});
toFront: function() {
this[0].parentNode.appendChild(this[0]);
show: function(){
this[0].style.display = 'block';
hide: function(){
this[0].style.display = 'none';
destroy : function(){
//销毁节点......................
var node = this[0] ||
node.onmouseover = node.onmouseout = node.onclick =
node.parentNode
&&node.parentNode.removeChild(node);
//---------------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------
//如果是vml修改其中的一些方法
if(!hasSVG){
//-------------创建vml环境-----------------
doc.createStyleSheet().addRule(".vml", "behavior:url(#default#VML);display:inline-position:left:0top: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+' &');
this.graphic =
/*on : function(eventName, handler){
var self =
this.element.attachEvent("on" + eventName,function(){
handler.call(self);
addText : function(txt){
this[0].innerHTML = txt || '';
setSize : function(v){
this[0].strokeWeight =
setOpacity : function(v){
this.opacity.opacity=v;
//---------------------------------------------------------------------------------------------------
//------------------------------------------------------------
win.smipleChart = function(){
this.init.apply(this,arguments);
smipleChart.list
smipleChart.timer
smipleChart.lazyLoad
= function(id){
= id || '0'
smipleChart.list[id]
&&smipleChart.list[id].loadMe();
smipleChart.prototype = {
options : {
charts : {
paddingRight : 20,
radius : 200,
fontFamily : '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif',
background : '#FFFFFF'
fontFamily:'Verdana,Arial,Helvetica,sans-serif',
fontSize:'16px',
fontWeight:'bold'
subTitle : {
text : '',
fontFamily:'Verdana,Arial,Helvetica,sans-serif',
fontSize:'12px',
color: '#111'
fontFamily:'Verdana,Arial,Helvetica,sans-serif',
fontSize:'12px',
color: '#111'
lineNum :10
init : function(container,options){
clearTimeout(smipleChart.timer)
this.width
= container.offsetW
this.height
= container.offsetH
this.currList = {};
this.uuuid
this.timer
//主要画图组的集合 形式
//{id : {dom:xx,show:true}}
this.mainGroup = {};
//分段的时候要用到的
知道哪些是隐藏了的
因为要涉及到重绘
this.hideList
//svg 里面画图 必须有一个svg标签 vml就用div了
this.container = hasSVG
? new vector().$c(1,'svg')
: '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')
fontSize : '12px',
: this.width +'px',
: this.height+'px'
.appendTo(container);
this.loading = container.appendChild(doc.createElement('img'));
this.loading.setAttribute('src','/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';
= extend(true,{},this.options),
= this.opts = extend(true,c,options),
style = extend(opts.charts.style,{
: this.width,
height : this.height
smipleChart.list[this.uuuid] =
smipleChart.timer = setTimeout(function(){
smipleChart.lazyLoad();
loadMe : function(){
= this.opts,
= opts.charts.
this.container = this.container
.on('mouseout',function(e){
var elem = e.relatedTarget || e.toE
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)&0
&&this.drawPanel();
this.drawLegend(opts.legend.type);
//画色块条
var type = {
: 'drawLine',
: 'drawArea',
columns : 'drawColumns',
: 'drawPie',
: 'drawPies',
segment : 'drawSegment'
}[opts.charts.type];
//开始画图..............
this[type]();
//删除节点
this.loading.parentNode.removeChild(this.loading);
//断开引用
this.loading =
this.container.style.display = '';
setTimeout(function(){
smipleChart.lazyLoad((++self.uuuid)+'');
createElement : function(nodeName){
return new vector().$c(this,nodeName);
group: function(name){
return this.createElement(hasSVG?'g':'div').attr('mark',name);
getDrawArea : function(){
= this.opts,
= this.width,
= this.height,
= opts.title,
subTitle = opts.subTitle,
// 去掉坐标轴左边的刻度文本宽度(预估) 80为定值 左边只留80的间距
: width - 80,
// 去掉坐标轴底下的文本和标线的高度
areaHeight : height - 40,
//原点的X位置
下面会计算到
startX : 0,
//原点的Y位置
下面会计算到
startY : 0,
//中心的x坐标 画饼图的时候需要知道圆心的位置
centerX: 0,
//中心的y坐标 画饼图的时候需要知道圆心的位置
centerY: 0
//如果主标题存在 减去主标题的高度 否则 减去10的高
area.areaHeight -=(title.text !== '')
// 去掉副标题高度
area.areaHeight -=(subTitle.text !== '')
? subTitle.y
area.startX = 80;
area.startY = height - 40;
//圆心的位置
area.centerX = width / 2;
area.centerY = height / 2;
//右边留一些空隙
area.areaWidth -=20;
//上边也留一些间距
area.areaHeight -=15;
opts.area =
drawTitle : function(){
= this.opts,
= [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.
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){
? 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,
self = this,
area = opts.area,
chartsType = opts.charts.type,
= 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之间
= mathMin(10,mathMax(opts.yUnit.lineNum,1)),
//组合所有的数据
each(opts.chartData,function(i,o){
// 如果是柱状图 是对所有的数据求和
? 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 =
//主盘子容器
var panel = this.group('panel').appendTo();
var result = xx(minValue,maxValue,lineNum),
= result.min,
= result.max,
&&(min = 0);
//表示画的是横坐标 或者是双坐标
if(type.toLowerCase()==='x'){
//横坐标单位间隔
var xPices = drawAreaWidth / opts.xUnit.units.length,
//单位间隔的中心点
offset = xPices / 2,
yPices = drawAreaHeight / lineN
//--------------------------------画横向的点和文字---------------------------------------------------------
var y = hasSVG?5:10,
each(opts.xUnit.units,function(i,d){
self.baseDraw.path(self,{
borderColor : '#C0C0C0',
processPoint(startX + (i * xPices)),
processPoint(startY),
processPoint(startX + (i*xPices)),
processPoint(startY + 5)
appendTo(panel);
span = self.baseDraw.span(self,{
: startX + offset + (i * xPices),
: startY+y,
'text-anchor':'middle'
fontFamily : 'Verdana,Arial,Helvetica,sans-serif',
.addText(opts.xUnit.units[i])
.appendTo(panel)[0];
&&(span.style.left = parseInt(span.style.left) - span.offsetWidth/2+'px');
//--------------------------------画纵向的点和文字-----------------------------------------------------------------------
for(i=0;i&=lineNi++){
self.baseDraw.path(self,{
borderColor : '#C0C0C0',
: [M, startX, processPoint(startY - (i * yPices)), L, processPoint(startX + drawAreaWidth), processPoint(startY - (i *yPices))]
.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'
'font-family' : 'Verdana,Arial,Helvetica,sans-serif',
'font-size'
: 'block',
.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'
//横坐标单位间隔
var yPices = drawAreaHeight / (opts.xUnit.units.length),
//单位间隔的中心点
offset = Math.round(yPices / 2),
= hasSVG ? 25 : 70,
= hasSVG ? 0 : 5,
each(opts.xUnit.units,function(i,d){
self.baseDraw.path(self,{
borderColor : '#C0C0C0',
processPoint(startX-5),
processPoint(startY-i * yPices),
processPoint(startX),
processPoint(startY-i * yPices),
.appendTo(panel);
span = self.baseDraw.span(self,{
: startX - x,
: startY -i * yPices-offset-calTextLen(d).h/2 + y,
'text-anchor':'middle'
fontFamily:'Verdana,Arial,Helvetica,sans-serif',
fontSize:'12px',
textAlign:'right'
.addText(d)
.appendTo(panel)
var xPices = drawAreaWidth / lineN
for(var i=0;i&=lineNi++){
self.baseDraw.path(self,{
borderColor : '#C0C0C0',
processPoint(startX + (i * xPices)),
processPoint(startY),
processPoint(startX + (i*xPices)),
processPoint(startY - drawAreaHeight)
appendTo(panel);
self.baseDraw.span(self,{
: startX - calTextLen(min+i*f+'').w/2 + i * xPices,
'text-anchor':'left'
fontFamily:'Verdana,Arial,Helvetica,sans-serif',
fontSize:'12px'
.addText(min+i*f+'')
.appendTo(panel);
//-----------------------------------------------------------------------------------------------------
//因为起点很可能不是从0开始的
所以在起点的时候要要加上到0那部分的值
var jianju =0;
if(min&0)jianju =
if(max&0)jianju =
startX = opts.charts.panel==='x' ? startX :startX-xPices*(min/f);
startY = opts.charts.panel==='x' ? startY + yPices*(min/f) : startY;
opts.draw = {
// X 轴起点
: startY ,
// Y 轴起点
// X 轴每份的宽度
// Y 轴每份的宽度
// X 单分中心点位置偏移量
jianjuY : jianju*yPices/f,
jianjuX : jianju*xPices/f,
// Y 轴的每份有多少
createTooltip : function(){
this.tipC = this.group('tip')
.css({zIndex: 200,height:'20px',width:'20px',position:'absolute'})
.appendTo()
//画一个框框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'})
fontFamily:'Verdana,Arial,Helvetica,sans-serif',
fontSize:'12px',
background: '#FFF'
.appendTo(p);
this.tipText = doc.createTextNode('');
this.tipTxtContainer[0].appendChild(this.tipText);
showTooltip : function(obj, x, y,data){
= obj.name +':' + data,
size = calTextLen(txt,this.tipTxtContainer[0].style.cssText),
= {x : x - (size.w + 5 * 2)/2 ,y : y - 32};
.toFront()
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'});
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);
= obj.name +':' + data,
self = this,
size = calTextLen(txt,this.tipTxtContainer[0].style.cssText),
= {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'});
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'){
? 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});
.toFront()
var move = function(t,b,c,d){
return c*(t/=d)*t +
b = self.tipC.attr('pos').split('-'),
c = [pos.x,pos.y],
this.timer = setInterval(function(){
var x = move(t,~~b[0],(~~c[0])-(~~b[0]),d),
y = move(t,~~b[1],(~~c[1])-(~~b[1]),d);
? self.tipC.attr({transform:'translate('+x+','+y+')',pos:x+'-'+y})
: self.tipC.attr({pos:x+'-'+y}).css({left:x,top:y});
clearTimeout(self.timer);
hideTooltip: function(){
this.tipC.hide();
drawLegend : function(type,redraw){
= this.opts,
isLine = opts.charts.type === 'line',
//颜色块的大小
t_height = 20,
//块之间的距离
= opts.chartData,
= datas.length,
= 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==='segment';
if(g.show){
g.chart.hide();
? this.attr({fill:'#ccc'})
: this[0].style.color = '#ccc';
//如果是分段图
是会涉及到重画的
if(issegment){
self.hideList[i] ='';
var mainGroup = self.mainG
for(var name in mainGroup){
var parent = mainGroup[name].chart,
= parent[0].childNodes,
//销毁图上面画的东西
for(var i = len-1;i&=0;i--){
vector.prototype.destroy.call(nodes[i])
self.drawSegment();
g.chart.show();
? this.attr({fill:'#000'})
: this[0].style.color = '#000'
if(issegment){
delete self.hideList[i];
var mainGroup = self.mainG
for(var name in mainGroup){
var parent = mainGroup[name].chart,
= parent[0].childNodes,
for(var i = len-1;i&=0;i--){
vector.prototype.destroy.call(nodes[i])
self.drawSegment();
type = type ||'lateral';
var legendPanel = self.group('Legend')
.appendTo();
if(type==='lateral'){
//如果是横着的
= orig_pos[1] + 5,
= hasSVG?0:3,
left = orig_pos[0] + 5;
each(datas, function(i,d){
left = i===0 ? left : t_space+
//计算所有left的位置
//如果是线性图
按线性图的方式画图
if(isLine){
self.baseDraw.path(self,{
borderColor : d.color,
left.toFixed(0),
(top+10).toFixed(0),
(left+25).toFixed(0),
(top+10).toFixed(0)
.appendTo(legendPanel);
self.baseDraw[d.dotType || 'circle'](self,{
x : left+12,
y : top+10,
fillColor : d.color
.appendTo(legendPanel);
self.baseDraw.rect(self,{
: d.color,
borderColor : d.color,
: t_width+'px',
: t_height+'px'
.appendTo(legendPanel)
left = left + t_width+2 + t_
var w = calTextLen(d.name,css).w
self.baseDraw.span(self,{
'text-anchor':'left',
y : top+th
.css(extend(css,{cursor:'pointer'}))
.on('click',function(){
handle.call(this,i);
.addText(d.name)
.appendTo(legendPanel);
left = left +
this.baseDraw.rect(this,{
borderColor : '#666666',
: left+ t_space- orig_pos[0],
: maxHeight,
: orig_pos[0],
: orig_pos[1]
.appendTo(legendPanel);
= orig_pos[1] + 5,
= hasSVG?0:3,
left = orig_pos[0] + 5;
each(datas, function(i,d){
top = i===0 ? top : t_space +
self.baseDraw.rect(self,{
: d.color,
borderColor : d.color,
: t_width+'px',
: t_height+'px'
.appendTo(legendPanel);
var h = calTextLen(d.name,css).h;
self.baseDraw.span(self,{
'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')
handle.call(this,i);
.appendTo(legendPanel);
top = top + h+ t_
maxWidth = Math.max(maxWidth,calTextLen(d.name,css).w);
this.baseDraw.rect(this,{
borderColor : '#666666',
: maxWidth+22+15,
: top+t_space-orig_pos[1],
: orig_pos[0],
: orig_pos[1]
.appendTo(legendPanel);
: function(){
var self = this,
opts = this.opts,
draw = opts.
each(opts.chartData,function(i,o){
var id = 'chart'+i,
lineGroup = self.group(id)
.appendTo();
self.mainGroup[id]={
chart : lineGroup,
var path = [M],
data = o.data,
for(var i = 0,l = data. i & i++){
if( data[i] == null){
//如果这个数据不存在 并且不是第一个数据 路径上加 M
if(path[path.length - 1] !== M)
path.push(M);
//如果不是第一个数据 路径添加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);
x = parseInt(x);
y = parseInt(y);
path.push(x);
path.push(y);
var dotType = o.dotType||'circle';
self.baseDraw[dotType](self,{
fillColor : o.color
.attr({data:data[i],pos:x+'-'+(y-5)})
.css({zIndex:10,cursor:'pointer'})
.on('mouseover',(function(o,x,y){
return function(){
if(self.currList.dot){
if(self.currList.dot[0] === this[0])
self.currList.dot.setSize(0);
self.currList.line.setSize(1.5);
this.setSize(2);
line.setSize(2.5);
var pos = this.attr('pos').split('-');
self.showTooltip(o,pos[0],pos[1],this.attr('data'));
self.currList.dot
self.currList.line =
})(o,x,y))
/*.on('mouseout',function(){
this.setSize(0);
line.setSize(1.5);
.on('click',function(){lineGroup.toFront(); })
.appendTo(lineGroup);
line = self.baseDraw.path(self,{
borderColor : o.color,
.css({zIndex:5})
/*.on('mouseover',function(){
this.setSize(2.5);
.on('mouseout',function(){
this.setSize(1.5);
.on('click',function(){lineGroup.toFront();})
.appendTo(lineGroup);
: function(){
var self = this,
opts = this.opts,
draw = opts.
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.jianjuY).toFixed(0)],
for(var n=0,l = data.n&l;n++){
//如果数据是空的
var len = areaPath.
if( data[n] === null){
//如果前面的一个不是m 就重新画 所以加上 M
if(path[path.length - 1] !== M)
path.push(M);
//如果第1个 或者前面的都为null 修改起点坐标
&&(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.jianjuY).toFixed(0),
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);
x = parseInt(x);
y = parseInt(y);
path.push(x);
path.push(y);
if(areaPath[len - 1] === seal){
areaPath = areaPath.concat([
parseInt(draw.startY-draw.jianjuY),
areaPath.push(x);
areaPath.push(y);
//如果是最后一个点
if(n === l - 1){
areaPath.push(x);
areaPath.push(parseInt(draw.startY-draw.jianjuY));
self.baseDraw[o.dotType || 'circle'](self,{
fillColor : o.color
.attr({data:data[n],pos:x+'-'+(y-5)})
.on('mouseover',(function(o,x,y){
return function(){
if(self.currList.dot){
if(self.currList.dot[0] === this[0])
self.currList.dot.setSize(0);
self.currList.line.setSize(1.5);
this.setSize(2);
line.setSize(2.5);
var pos = this.attr('pos').split('-');
self.showTooltip(o,pos[0],pos[1],this.attr('data'));
self.currList.dot
self.currList.line =
})(o,x,y))
/*.on('mouseout',function(){
this.setSize(0);
line.setSize(1.5);
//self.hideTooltip()
.on('click',function(){areaGroup.toFront(); })
.css({zIndex:10,cursor:'pointer'})
.appendTo(areaGroup);
areaPath.push(seal)
self.baseDraw.path(self,{
: o.color,
: areaPath
.css({zIndex:5})
.appendTo(areaGroup);
line = self.baseDraw.path(self,{
borderColor : o.color,
/*.on('mouseover',function(){
? this.attr({'stroke-width':2.5})
: (this[0].strokeWeight = 2.5);
.on('mouseout',function(){
? this.attr({'stroke-width':1.5})
: (this[0].strokeWeight = 1.5);
.on('click',function(){areaGroup.toFront(); })
.css({zIndex:-1})
.appendTo(areaGroup);
drawColumns : function(){
var self = this,
opts = this.opts,
draw = opts.draw,
= opts.chartData,
= chartData.length,
//多个柱子之间的间距
columnSpace
//一个位置中 所有的间隔之和
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){
= 'chart' + i,
= opts.charts.panel==='x',
colGroup = self.group(id).appendTo(),
//每个点开始的位置
= 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. j & j++){
if(data[j]===null)
//如果是横盘子
= Number((start + j *draw.xPices ).toFixed(0)),
= Number((draw.startY-draw.jianjuY).toFixed(0)),
height = Number((data[j] * (draw.yPices / draw.feed)-draw.jianjuY).toFixed(0)),
y -height,
x + columnSize,
y - height,
x + columnSize,
var pos = [x+columnSize/2,data[j]&0?y-height:draw.startY-draw.jianjuY];
= Number((draw.startX+draw.jianjuX).toFixed(0)),
width = Number((data[j]*((draw.xPices / draw.feed))-draw.jianjuX).toFixed(0)),
= Number((start - (j+1) *draw.yPices ).toFixed(0)),
x + width,
y + columnSize,
y+ columnSize,
var pos = [draw.startX+draw.jianjuX+width/2,y];
self.baseDraw.path(self,{
: o.color,
.attr({data:data[j],pos:pos[0]+'-'+pos[1]})
.css({zIndex:5,cursor:'pointer'})
.on('mouseover',(function(d){
return function(){
this.setOpacity(0.85);
var pos= this.attr('pos').split('-')
self.showTooltip(o,pos[0],pos[1],this.attr('data'));
})(data[j])
.on('mouseout',function(){
this.setOpacity(1);
.appendTo(colGroup);
: function(){
= this.opts,
= opts.area,
= area.centerX,
= area.centerY,
total = 0,
cumulative = -0.25, //
= 2 * Math.PI,
radiu = mathMin(opts.charts.radius,mathMin(area.areaWidth/2,area.areaHeight/2)),
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 +
each(data,function(i,o){
var pieGroup = self.group('chart'+i).appendTo(),
= inc/total*360,
= (inc + o)/total*360,
name = opts.chartData[i].name,
size = calTextLen(name),
= angle(radiu,[rx,ry],s+(e-s)/2,2),
= rx + (dot[0]-rx)/2 - size.w/2,
= ry + (dot[1]-ry)/2 - size.h/2,
= Math.sqrt((x-rx)*(x-rx)+(y-ry)*(y-ry)),
moveDisplacement = ((x-rx)*8/len)+','+((y-ry)*8/len);
inc = inc +
var value = Number(o);
fraction = total ? value / total : 0;
half_fraction = total ? (value / 2) / total : 0;
var start = cumulative *
half_cumulative = cumulative + half_
cumulative +=
var end = cumulative *
self.baseDraw.pie(self,{
: opts.chartData[i],
.css({zIndex:5,cursor:'pointer'})
.attr({move:moveDisplacement,pos:dot[0]+'-'+dot[1]})
.on('mouseover',function(){
this.setOpacity(0.85);
var pos = this.attr('pos').split('-');
self.showTooltip(opts.chartData[i],pos[0],pos[1],((e-s)/360*100).toFixed(0)+'%')
.on('mouseout',function(e){
var elem = e.toElement || e.relatedT
//如果碰到里面的文本 或者是提示框
if(!elem||contains(this[0].parentNode,elem)||contains(self.tipC[0],elem))
self.hideTooltip();
this.setOpacity(1);
.on('click',function(){
var m = this.attr('move')
if(m.indexOf('+')&0){
? this.attr({
transform: 'translate(0,0)'
: this.css({
left : '0px',
this.attr({move:m.replace('+','')});
var s= m.split(',');
? this.attr({
transform: 'translate('+m+')'
: this.css({
left : s[0]+'px',
: s[1]+'px'
this.attr({move:m+'+'});
.appendTo(pieGroup);
self.mainGroup['chart'+i] = {
chart : pieGroup,
self.baseDraw.span(self,{
fill : '#fff',
'text-anchor':'left'
fontFamily : 'Verdana,Arial,Helvetica,sans-serif',
: 'absolute',
: 'pointer',
.addText(name)
.appendTo(pieGroup);
: function(){
= this.opts,
= opts.area,
= area.centerX,
= area.centerY,
total = 0,
= opts.chartData,
cumulative = -0.25, //
= 2 * Math.PI,
radiu = mathMin(opts.charts.radius,mathMin(area.areaWidth/2,area.areaHeight/2)),
half_cumulative,
each(chartData,function(i,o){
each(o.data,function(j,d){
? data[j] +=mathAbs(d)
: data[j] =mathAbs(d)
//看有多少个数据来生成来生成内半径
var len = data.length,
innerSpace = radiu / 10;
Rpice = (radiu - innerSpace) /
each(data,function(i,d){
var inc = 0;
each(chartData,function(j,o){
if(~~o.data[i]===0)
= radiu - Rpice * i,
innerR = radiu - Rpice * (i + 1),
= ~~o.data[i],
fraction = value /
half_fraction = (value/2)/d ,
start = cumulative * circ,
= inc/d*360,
= (inc + value)/d*360,
= 'chart'+j,
piesGroup = self.mainGroup[id]?self.mainGroup[id].chart:self.group(id).appendTo();
!self.mainGroup[id]
&&(self.mainGroup[id] = {chart:piesGroup,show:true});
inc = inc +
var name = o.name,
size = calTextLen(name),
= angle(radiu,[rx,ry],s+(e-s)/2,2),
showDot = angle(radiu- Rpice * i,[rx,ry],s+(e-s)/2,2),
= dot[0]&rx?1:-1,
= dot[1]&ry?1:-1;
= rx + px*innerSpace + ((dot[0]-rx-px*innerSpace)/len)*(len-i-1)+((dot[0]-rx-px*innerSpace)/len)/2- size.w/2,
= 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 *
self.baseDraw.pie(self,{
.attr({m :
i+'-'+j,data:((e-s)/360*100).toFixed(0)+'%',pos:showDot[0]+'-'+showDot[1]})
.css({zIndex:5,cursor:'pointer'})
.on('mouseover',function(){
this.setOpacity(0.85);
var pos = this.attr('pos').split('-');
self.showTooltip(o,pos[0],pos[1],this.attr('data'))
.on('mouseout',function(e){
var elem = e.toElement || e.relatedT
if(!elem||elem.getAttribute('m')===this[0].getAttribute('m'))
this.setOpacity(1);
.appendTo(piesGroup);
self.baseDraw.span(self,{
fill : '#fff',
'text-anchor':'left'
.attr({m :
fontFamily : 'Verdana,Arial,Helvetica,sans-serif',
: 'absolute',
: 'pointer',
.addText(name)
.appendTo(piesGroup);
drawSegment
: function(){
var self = this,
opts = this.opts,
draw = opts.draw,
= opts.chartData,
= opts.charts.panel==='x',
columnSize = ~~(typeIsX?draw.xPices:draw.yPices) - columnPad * 2;
each(chartData,function(i,c){
if(i in self.hideList)
= 'chart' + i,
segmentGroup = self.mainGroup[id]?self.mainGroup[id].chart:self.group(id).appendTo();
self.mainGroup[id] = {chart : segmentGroup,show : true};
each(c.data,function(j,d){
if(d===null||d===0)
if(typeIsX){
= draw.startX + columnPad,
= ~~(start + j*draw.xPices).toFixed(0),
= ~~(draw.startY-(prev[j]?prev[j]:0)).toFixed(0),
= ~~(d*draw.yPices / draw.feed ).toFixed(0),
x + columnSize,
x + columnSize,
var pos = [x + columnSize/2,y-size];
= draw.startY - columnPad,
= ~~(draw.startX+(prev[j]?prev[j]:0)).toFixed(0) ,
= ~~(start- j*draw.yPices).toFixed(0),
= ~~(d*draw.xPices / draw.feed ).toFixed(0),
y - columnSize,
y - columnSize,
var pos = [x+size/2,y - columnSize];
self.baseDraw.path(self,{
: c.color,
.attr({data:d,pos:pos[0]+'-'+pos[1]})
.on('mouseover',function(){
this.setOpacity(0.85);
var pos = this.attr('pos').split('-');
self.showTooltip(chartData[i],pos[0],pos[1],this.attr('data'))
.on('mouseout',function(){
this.setOpacity(1);
.css({zIndex:5,cursor:'pointer',left:'0px',top:'0px'})
.appendTo(segmentGroup);
? prev[j] = prev[j] + size
: prev[j] =
rect : function(o,config){
return o.createElement('rect')
: config.arc*30 || 5,
: config.arc*30 || 5,
: config.width
: config.height || 50,
: config.fill
|| '#fff',
'fill-opacity' : config.opacity || 0.85,
'stroke-width' : config.border
: config.borderColor
|| '#606060',
: 'translate('+(config.left||0)+','+(config.top||0)+')'
text : function(o,config){
return o.createElement('text')
.attr(config);
span : function(o,config,v){
return o.createElement('text')
.attr(config)
y : config.y+(v||15)
path : function(o,config){
var set = {};
set['stroke-width'] = config.
set.stroke = config.borderColor || '#C0C0C0';
= config.isfill?config.fillColor:'none';
config.opacity
&&(set['fill-opacity'] = config.opacity);
return o.createElement('path')
.attr(set);
circle : function(o,config){
= config.x;
= config.y;
set['stroke-width'] = 0;
set.stroke = config.borderColor || '#C0C0C0';
= config.r;
set.fill = config.fillC
return o.createElement('circle')
.attr(set);
square : function(o,config){
= config.x,
= config.y,
= config.r,
color= config.fillColor,
(x-len).toFixed(0),
(y-len).toFixed(0),
(x+len).toFixed(0),
(y-len).toFixed(0),
(x+len).toFixed(0),
(y+len).toFixed(0),
(x-len).toFixed(0),
(y+len).toFixed(0),
return o.baseDraw.path(o,{
borderColor : color,
triangle : function(o,config){
= config.x,
= config.y,
= config.r+0.1,
color = config.fillColor,
x.toFixed(0),
(y-1.33*r).toFixed(0),
(x+r).toFixed(0),
(y+0.67*r).toFixed(0),
(x-r).toFixed(0),
(y+0.67*r).toFixed(0),
return o.baseDraw.path(o,{
borderColor : color,
diamond : function(o,config){
= config.x,
= config.y,
= 1.35*config.r,
color = config.fillColor,
x.toFixed(0),
(y-r).toFixed(0),
(x+r).toFixed(0),
y.toFixed(0),
x.toFixed(0),
(y+r).toFixed(0),
(x-r).toFixed(0),
y.toFixed(0),
return o.baseDraw.path(o,{
borderColor : color,
: function(o,config){
//config,s,e,r,index
= config.s,
= config.r,
= config.e - 0.000001,
= 'chart'+config.index,
= opts.area,
= area.centerX,
= area.centerY,
cosStart = mathCos(s),
sinStart = mathSin(s),
= mathCos(e),
= mathSin(e),
= config.config.color,
= config.innerR,
= e - s & Math.PI ? 0 : 1,
rx + r * cosStart,
ry + r * sinStart,
rx + r * cosEnd,
ry + r * sinEnd,
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,
return o.baseDraw.path(o,{
//---------------------------------------------------------------------------------------------------
//如果是vml 修改smipleChart.prototype中的一些方法
&&extend(smipleChart.prototype.baseDraw,{
rect : function(o,config){
var attr = {},
attr.arcsize
= config.arc || 0.2 +'';
if(config.fill==='none'){
attr.filled
attr.filled
attr.fillcolor = config.fill || '#fff';
attr.strokeWeight
= config.border
attr.strokeColor
= config.borderColor
|| '#606060';
= config.width || 50 +'px';
css.height
= config.height || 50 +'px';
css.zIndex
= config.left||0+'px';
= config.top ||0+'px';
return o.createElement('roundrect')
.attr(attr)
.css(css);
text : function(o,config){
return o.createElement('TextBox')
.attr({inset : "2px,2px,2px,2px" })
.css({zIndex:200})
span : function(o,config){
return o.createElement('span').
position:'absolute',
left : config.x+'px',
: config.y+'px'
path : function(o,config){
= o.width,
height = o.height,
: width+'px',
: height+'px'
if(config.border===0){
attr.Stroked = 'f';
attr.strokeWeight =0;
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+','+
var elem = o.createElement()
.attr(attr)
.css(css);
if(config.opacity){
var fill =
o.createElement('fill')
: config.fillColor||"#C0C0C0",
: config.opacity
.appendTo(elem);
//那这个对象的一个属性引用设置透明的元素 以后会用到
elem.opacity = fill[0];
circle : function(o,config){
= o.width,
height = o.height,
strokeWeight : 1,
: width+','+height,
: width+'px',
: 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
// start y
x + r, // end x
'e' // close
return o.createElement()
.attr(attr)
: function(o,config){
////config,s,e,r,index
= opts.area,
= config.r,
= area.centerX,
= area.centerY,
innerR= config.innerR||0,
= angle(r,[rx,ry],s,2),
= angle(r,[rx,ry],e,2),
color = config.config.color,
= config.s,
= config.e,
= e - s == 2 * Math.PI ? e - 0.001 : e,
cosStart = mathCos(s),
sinStart = mathSin(s),
cosEnd = mathCos(e),
sinEnd = mathSin(e),
'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 o.baseDraw.path(o,{
//---------------------------------------------------------------------------------------------------
})(document);
window.onload = function(){
var t = new Date().getTime();
var config = {
charts : {
radius : 150,
fontFamily: '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', // default font
fontSize: '12px'
text : '线性图表' ,
color: 'black',
fontSize: '16px'
subTitle : {
text : '线性图表副标题',
color: '#111',
fontSize: '12px'
legend : {
enable : true,
//type : 'lateral', // lateral 横向 或 lengthwise 纵向
type : 'lateral',
: [10,10],
fontFamily : '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', // default font
: '线性图表侧标题',
fontSize : '12px'
chartData : [
: '#4572A7',
dotType : 'square',
: [11,12,13,15,16,18,17,14,10]
//[1,2,3,5,6,8,7,4,10]
data: [44,-12,-78,100,-13,-4,-26,34]
name: 'frfr',
color: '#AA4643',
dotType : 'triangle',
data: [-44,12,78,-100,13,4,-56,-34]
name: 'AAAAA',
color: '#89A54E',
dotType : 'diamond',
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 ='区域图表侧标题'
config.chartData = [
: '#4572A7',
: [0,3,4,5,6,7,8,9,10,11]
: [11,12,13,14,15,16,-17,18,19,0]
name: 'frfr',
color: '#AA4643',
data: [44,12,78,100,13,44,56,34]
name: 'AAAAA',
color: '#89A54E',
data: [null,101,83,null,22,78,88,44,78]
name: 'BBBB',
color: '#80699B',
data: [null, 58, 35, null, 52, 47, 26, 55, 39, 123,15,66]
new smipleChart($$('area'),config);
config.title.text ='柱状图表'
config.subTitle.text='柱状图表副标题'
config.yUnit.text ='柱状图表侧标题'
config.charts.type ='columns';
config.chartData =[
color : '#4572A7',
: [2,3,4,5,6,7,8,9,10,11]
: [-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.te
来源:/wtcsy/archive//1931582.html