선형 그래프 영역 그래프 히스토그램 파이 차트를 지원합니다
여러 브라우저를 지원합니다
사용 된 SVG VML
코드 사본은 다음과 같습니다.
<! 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 /html; charset = utf-8" />
<title> smiplechart </title>
<스타일 유형 = "텍스트/CSS">
.cc {
높이 : 450px; 너비 : 800px; 국경 : 1px 고체 #999; 위치 : 상대; 마진 : 20px;
}
</스타일>
</head>
<body>
<div id = 't'> </div>
<div id = 't1'> </div>
<div id = 'line'> </div>
<div id = 'Area'> </div>
<div id = 'Zhu'> </div>
<div id = 'zhu1'style = "높이 : 600px;"> </div>
<div id = 'segmentx'> </div>
<div id = 'segmenty'> </div>
<div id = 'Pie'> </div>
<div id = 'pies'> </div>
<div id = 'vv'style = '높이 : 300px; 너비 : 520px; '> </div>
<script type = "text/javaScript">
(함수 (doc, undefined) {
var win = this,
uuuid = -1,
hassvg = win.svgangle || doc.implementation.hasfeature ( "http://www.w3.org/tr/svg11/feature#basicstructure", "1.1"),
isie = /msie/i.test(navigator.useragent) &&! win.opera,
경로 = hassvg? 'd': 'path',
씰 = hassvg? 'z': 'e',
수학 = 수학,
MathRound = Math.Round,
Mathfloor = Math.floor,
Mathceil = Math.ceil,
mathmax = math.max,
mathmin = math.min,
Mathabs = math.abs,
mathcos = math.cos,
Mathsin = Math.sin,
m = 'm',
l = 'l';
승리. $$ = function (id) {
return document.getElementById (id);
};
win.extend = function () {
var target = 인수 [0] || {}, i = 1, length = arguments.length, deep = true, 옵션;
if (typeof target === "boolean") {
딥 = 대상;
대상 = 인수 [1] || {};
i = 2;
}
if (taptions tarting! == "object"&& 객체 .prototype.tostring.call (target)! = "[객체 함수]")
대상 = {};
for (; i <length; i ++) {
if ((옵션 = 인수 [i])! = null)
for (옵션의 var name) {
var src = target [name], copy = 옵션 [이름];
if (target === Copy)
계속하다;
if (deep && copy && typeof copy === "object"&&! copy.nodetype) {
대상 [name] = arguments.callee (deep, src || (copy.length! = null? [] : {}), copy);
}
else if (copy! == 정의되지 않은)
대상 [이름] = 복사;
}
}
반환 대상;
};
win.each = 함수 (객체, 콜백, args) {
var name, i = 0, 길이 = 객체 .length;
if (args) {
args = array.prototype.slice.call (arguments) .slice (2);
if (length === 정의되지 않은) {
for (객체의 이름)
if (callback.apply (Object [name], [name, object [name]]. concat (args)) === 거짓)
부서지다;
} 또 다른
for (; i <길이; i ++)
if (callback.apply (Object [i], [i, 객체 [i]]. concat (args)) === 거짓) //
부서지다;
} 또 다른 {
if (length === 정의되지 않은) {
for (객체의 이름)
if (callback.call (개체 [이름], 이름, 개체 [이름]) === 거짓)
부서지다;
} 또 다른
for (var value = Object [0];
i <longth && callback.call (value, i, value)! == false; value = Object [++ i]) {}
}
리턴 객체;
};
win.contains = function (p, c) {
if (! p ||! c) false를 반환합니다.
if (p === c) true를 반환합니다.
반환 Isie
? p.ctains (c)
: p.comparedocumentPosition (c) == 20
? 진실
: 거짓;
};
// --------------------------------------------------------------------------
함수 프로세스 포인트 (x) {
반환 Isie? ~~ x.tofixed (0) : ~~ x.tofixed (0) + 0.5;
};
함수 caltextlen (txt, cssstr) {
var span = doc.createelement ( 'span');
if (cssstr) {
CSSSTR 유형 === 'String'
? span.style.csstext = cssstr
: Extend (span.style, cssstr);
}또 다른{
확장 (span.style, {
fontsiz : '12px',
Fontfamily : ' "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, Sans-serif'
});
}
span.innerhtml = txt || '';;
span.style.visibility = '숨겨진';
Doc.Body.AppendChild (Span);
var width = span.offsetWidth,
높이 = span.offsetheight;
Doc.Body.RemoveChild (Span);
반환 {w : 너비, h : 높이};
};
기능 각도 (R, Center, O, Jingdu) {
var hudu = math.pi*2*(O/360),
x = 센터 [0]+ r*Math.sin (hudu),
y = 센터 [1]+ -r*math.cos (hudu);
반환 [x.tofixed (jingdu || 0), y.tofixed (jingdu || 0)];
}
함수 XX (a, b, linenum) {
var t = 1000,
stf = ((b*ta*t)/linenum)/t,
ARR = [1,2,2.5,5,10],
C = 1,
다섯;
// 분할 선의 카디널리티는 [1, 2, 2.5, 5, 10]이 단계는 간격이 속한 범위를 찾는 것입니다.
if (stf <arr [0]) {
while (stf <arr [0]) {
C = C*10;
ARR [0] = ARR [0]/C;
}
각각 ([1,2,2.5,5,10], 함수 (i, o) {
ARR [i] = O/C;
});
} else if (stf> arr [4]) {
while (stf> arr [4]) {
C = C*10;
ARR [4] = ARR [4]*C;
}
각각 ([1,2,2.5,5,10], 함수 (i, o) {
arr [i] = o*c;
});
}
// 간격을 따라 간격에서 가장 가까운 것을 찾으십시오.
각각 (arr, function (i, o) {
if (stf <= o) {
v = O;
거짓을 반환합니다.
}
});
var bj = (Mathabs (a)*t)/(v*t),
ba = 0,
isz = bj! == parseint (bj);
ISZ
&& a> 0
? ba = -a%v*t
: ba = (Mathabs (a)%vv)*t;
a = (a*t+ba)/t;
b = (b*t+(b%v === 0? 0 : (vb%v))*t)/t;
// 몇 줄 남은 줄을 봅니다.
var num = math.max (0, Linenum -Math.round ((ba)/v));
if (a> = 0) {
// 좌표 비교 정수
if (a! = 0 && num! = 0 && a%10! == 0) {
while (a! = 0 && num! = 0) {
a = (a*tv*t)/t;
Num-;
if ((A*TV*Num*T)/10000> 0 && a%10 === 0)
부서지다;
}
}
if (num! = 0) {
while (num! == 0) {
b = (b*t+v*t)/t
Num-;
}
}
}또 다른{
// 좌표 비교 정수
if (b <0 && num! = 0) {
while (b! = 0 && num! = 0 && b%10! == 0) {
b = (b*t+v*t)/t;
Num-;
if ((B*t+v*num*t)/t <0 && b%10 === 0)
부서지다;
}
}
if (num! = 0) {
while (num! == 0) {
a = (a*tv*t)/t
Num-;
}
}
}
반환 {min : a, max : b, stf : v};
}
// ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------.
// SVG VML 요소의 일부 창조물 생성 및 속성 스타일 삭제 == 일부 작업
win.vector = function () {};
vector.prototype = {
$ C : 함수 (그래픽, Nodename) {
this.element = this [0] = doc.createElementns ( 'http://www.w3.org/2000/svg', nodename);
this.graphic = 그래픽;
이것을 반환하십시오;
},
attr : 함수 (Hash, val) {
var elem = this.element,
열쇠,
값;
if (typeof hash === 'string') {
if (val === 정의되지 않은) {
return elem.getAttribute (HASH);
}또 다른{
elem.setattribute (Hash, Val);
이것을 반환하십시오;
}
} 또 다른 {
for (해시의 키) {
값 = 해시 [키];
if (key === path) {
value && value.join
&& (value = value.join ( ''));
/(nan | |^$)/. 테스트 (값)
&& (value = 'm 0 0');
}
elem.setattribute (키, 가치)
}
}
이것을 반환하십시오;
},
CSS : 함수 (해시) {
for (해시의 var 키) {
isie && key == "불투명도"
? 이 [0] .Style [ 'Filter'] = "Alpha (incacity ="+ hash [key] * 100+ ")"
: this [0] .Style [key] = hash [key];
}
이것을 반환하십시오;
},
ON : 함수 (EventName, Handler) {
var self = 이것;
/* this.element.addeventListener(EventName, function () {
handler.call (self)
},거짓);*/
this.element [ 'on' + eventName] = function (e) {
e = e || win.event;
handler.call (self, e);
}
이것을 반환하십시오;
},
부록 : 기능 (부모) {
if (부모) {
부모. 요소
? parent.element.appendChild (this.element)
: parent.appendchild (this.element)
} 또 다른 {
this.graphic.container.appendChild (this.element);
}
이것을 반환하십시오;
},
AddText : function (str) {
var elem = this.element;
if (elem.nodename === 'text') {
Elem.appendChild (Doc.CreateTextNode (str+''));
}
이것을 반환하십시오;
},
setOpacity : function (v) {
this.attr ( 'fill-opacity', v);
이것을 반환하십시오;
},
setsize : function (v) {
이 [0] .nodename === 'circle'
? this.attr ( 'r', 4+(v === 0? 0 : 2))
: this.attr ({ 'stroke-width': v});
이것을 반환하십시오;
},
tofront : function () {
이 [0] .parentNode.appendChild (this [0]);
이것을 반환하십시오;
},
쇼 : function () {
이 [0] .style.display = 'block';
이것을 반환하십시오;
},
숨기기 : function () {
이 [0] .style.display = 'none';
이것을 반환하십시오;
},
파괴 : function () {
// 노드 파괴 ............
var node = this [0] || 이것;
node.onmouseOver = node.onMouseOut = node.onClick = null;
node.parentNode
&& node.parentNode.removeChild (노드);
이것을 반환하십시오;
}
};
// ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------.
// ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------.
//이 메소드 중 일부를 수정하는 것이 VML 인 경우
if (! hassvg) {
//-----------------------------------------------------------------------------------------------------------------------------
Doc.CreatestyLesheet (). addRule ( ". vml", "동작 : URL (#default#vml); 디스플레이 : 인라인-블록; 위치 : 절대; 왼쪽 : 0px; 상단 : 0px");
! doc.namespaces.vml &&!+"/v1";
doc.namespaces.add ( "vml", "urn : schemas-microsoft-com : vml");
//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
extend (vector.prototype, {
$ C : 함수 (그래픽, Nodename) {
var name = nodename || '모양';
this.element = this [0] = (이름 === 'div'|| name === 'span')
? Doc.CreateElement (이름)
: doc.createElement ( '<vml :'+name+'>');
this.graphic = 그래픽;
이것을 반환하십시오;
},
/*on : function (eventName, handler) {
var self = 이것;
this.element.attachevent ( "on" + eventName, function () {
handler.call (self);
});
이것을 반환하십시오;
},*/
AddText : function (txt) {
이 [0] .innerhtml = txt || '';;
이것을 반환하십시오;
},
setsize : function (v) {
이 [0] .Strokeweight = V;
이것을 반환하십시오;
},
setOpacity : function (v) {
this.opacity.opacity = v;
이것을 반환하십시오;
}
});
}
// ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------.
// 범주 그리기
// -----------------------------------------------------------------
win.smiplechart = function () {
this.init.apply (this, harments);
};
smilechart.list = [];
smilechart.timer = null;
smilechart.lazyload = function (id) {
id = id || '0'
smilechart.list [id]
&& smiplechart.list [id] .loadme ();
};
smilechart.prototype = {
옵션 : {
차트 : {
Paddingright : 20,
반경 : 200,
스타일: {
Fontfamily : ' "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, Sans-Serif',
Fontsize : '12px',
배경 : '#ffffff'
}
},
제목: {
텍스트 : '',
Y : 10,
스타일: {
Fontfamily : 'Verdana, Arial, Helvetica, Sans-serif',
Fontsize : '16px',
Fontweight : 'Bold'
}
},
자막 : {
텍스트: '',
Y : 30,
스타일: {
Fontfamily : 'Verdana, Arial, Helvetica, Sans-serif',
Fontsize : '12px',
색상 : '#111'
}
},
yunit : {
텍스트 : '',
스타일: {
Fontfamily : 'Verdana, Arial, Helvetica, Sans-serif',
Fontsize : '12px',
색상 : '#111'
},
Linenum : 10
}
},
init : 함수 (컨테이너, 옵션) {
클리어 타임 아웃 (smiplechart.timer)
var self = 이것;
this.width = container.offsetWidth;
this.height = container.offsetheight;
this.currlist = {};
this.uuuid = ++ uuuid;
this.timer = null;
// 드로잉 그룹의 주요 컬렉션 형식
// {id : {dom : xx, show : true}}
this.maingroup = {};
// 세그먼트를 할 때 사용해야하는 것은 다시 그리기를 포함하기 때문에 어떤 것이 숨겨져 있는지 아는 것입니다.
this.hidelist = {};
// SVG의 도면에는 SVG 태그 VML이 있어야하며 DIV를 사용해야합니다.
이 .container = hassvg
? 새 벡터 (). $ c (1, 'svg')
.attr ({
xmlns : 'http://www.w3.org/2000/svg',
버전 : '1.1',
너비 : this.width,
높이 :이
})
.CSS ({fontsize : '12px'})
.Appendto (컨테이너)
: new vector (). $ 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, 옵션),
style = extend (opts.charts.style, {
너비 : this.width,
높이 :이
});
smilechart.list [this.uuuid] = this;
smilechart.timer = settimeout (function () {
smilechart.lazyload ();
}, 200);
},
loadme : function () {
var opts = this.opts,
self = this,
type = opts.charts.type;
이 .container = this.container
.on ( '마우스 아웃', 함수 (e) {
var elem = e.relatedTarget || e.tolement;
if (! 포함 (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 () // 제목을 그립니다
// 플레이트를 그립니다
'선, 영역, pie.indexof (type)> = 0
&& (opts.charts.panel = 'x');
'파이, pies'. indexof (type) <0
&& this.drawpanel ();
this.drawlegend (opts.legend.type); // 컬러 블록 막대를 그리십시오
var 유형 = {
라인 : '드로우 라인',
지역 : 'DrawArea',
열 : 'DrawColumns',
파이 : '드로피',
파이 : '드로피',
세그먼트 : 'DrawSegment'
} [opts.charts.type];
// 그리기 시작 .........
이 [유형] ();
// 노드를 삭제합니다
this.loading.parentNode.removeChild (this.loading);
// 참조를 분리합니다
this.loading = null;
this.container.style.display = '';
settimeout (function () {
smilechart.lazyload ((++ self.uuuid)+'');
}, 10)
},
CreateElement : function (nodename) {
새로운 벡터 (). $ c (this, nodename)를 반환합니다.
},
그룹 : 함수 (이름) {
replart this.createElement (hassvg? 'g': 'div'). attr ( 'mark', name);
},
getDrawArea : function () {
var opts = this.opts,
너비 = this.width,
높이 = this.
제목 = opts.title,
자막 = opts.subtitle,
지역 = {
// 좌표 축의 왼쪽에서 스케일 텍스트 너비를 제거합니다 (추정) 80은 고정 값이며 80 만 고정 값의 왼쪽에 왼쪽으로 남습니다.
면적 : 너비 -80,
// 축 아래 텍스트 높이와 표시를 제거합니다.
AreaHeight : 높이 -40,
// 원점의 X 위치는 아래에서 계산됩니다.
startx : 0,
// 원점의 y 위치는 아래에서 계산됩니다.
스타디 : 0,
// 중앙의 X 좌표로 파이 차트를 그리면 원의 중심 위치를 알아야합니다.
centerx : 0,
// 중앙에 Y 좌표가있는 파이 차트를 그리면 원의 중심 위치를 알아야합니다.
센터 : 0
};
// 기본 제목이 존재하면 기본 제목의 높이를 빼십시오. 그렇지 않으면 10의 높이를 빼십시오.
area.areaheight- = (title.text! == '')
? Title.y
: 10;
// 자막 높이를 제거합니다
area.areaheight- = (subtitle.text! == '')
? 자막 .y
: 10
area.startx = 80;
area.starty = 높이 -40;
// 원의 중심 위치
Area.Centerx = 너비 / 2;
Area.Centery = 높이 / 2;
// 공간을 오른쪽에 두십시오
area.areawidth- = 20;
// 일부 간격을 맨 위에 두십시오
Area.AreaHeight- = 15;
opts.area = 영역;
이것을 반환하십시오;
},
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 ();
각각 (arr, function (i, title) {
var text = title.text;
if (text) {
var elem = self.baseRaw.span (self, {
'Text-Anchor': '왼쪽',
X : mathmax (config [i] .x -caltextlen (text, title.style) .w/2,10),
Y : 구성 [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) {
varopts = this.opts,
self = this,
area = opts.area,
ChartStype = opts.charts.type,
issegment = ChartStype === 'segment',
// 플레이트 수평 또는 수직 플레이트 유형입니다
type = opts.charts.panel || '엑스';
// 하단 플레이트
var drawAreaWidth = area.AreaWidth,
drawAreAheight = Area.AreaHeight,
// 원산지의 좌표
startx = area.startx,
Starty = Area.starty;
var alldata = [],
minValue = 0,
maxValue = 10,
// 줄 수는 1에서 10 사이 일 수 있습니다.
linenum = mathmin (10, mathmax (opts.yunit.linenum, 1)),
직원;
// 모든 데이터 결합
각각 (opts.chartdata, function (i, o) {
// 막대 차트 인 경우 모든 데이터에 대해 요약됩니다.
issegment
? 각각 (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 ab});
// 최대 값과 최소값을 완료합니다
maxValue = allData [AllData.Length -1];
각각 (AllData, function (i, o) {
if (o! == null) {
minValue = O;
거짓을 반환합니다.
}
});
// 메인 플레이트 컨테이너
var panel = this.group ( 'panel'). 부록 ();
var result = xx (minValue, maxValue, linenum),
min = result.min,
max = result.max,
f = result.stf;
issegment
&& (min = 0);
// 수평 좌표 또는 이중 좌표가 그려 졌음을 의미합니다.
if (type.tolowercase () === 'x') {
// 지하 단위 간격
varxpices = drawAreaWidth / opts.xunit.units.length,
// 단위 간격의 중심 지점
오프셋 = xpices / 2,
ypices = drawAreaHeight / Linenum;
//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
var y = hassvg? 5 : 10,
t = 1000,
기간;
각각 (opts.xunit.units, function (i, d) {
self.basedraw.path (self, {
국경 : 1,
BorderColor : '#C0C0C0',
isfill : 거짓,
길 : [
중,
ProcessPoint (startx + (i * xpices)),
프로세스 포인트 (스타일),
엘,
ProcessPoint (startx + (i*xpices)),
프로세스 포인트 (Starty + 5)
]]
}).
부록 (패널);
span = self.basedraw.span (self, {
x : startx + 오프셋 + (i * xpices),
Y : Starty+Y,
'텍스트 캔더': '중간'
})
.CSS ({
Fontfamily : 'Verdana, Arial, Helvetica, Sans-serif',
fontsize : '12px'
})
.addtext (opts.xunit.units [i])
.appendto (패널) [0];
! hassvg
&& (span.style.left = parseint (span.style.left) - span.offsetwidth/2+'px');
});
//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
for (i = 0; i <= linenum; i ++) {
self.basedraw.path (self, {
국경 : 1,
BorderColor : '#C0C0C0',
isfill : 거짓,
경로 : [m, startx, processpoint (starty- (i * ypices)), l, processpoint (startx + drawareawidth), processpoint (starty- (i * ypices))]]
})
.CSS ({Zindex : -10})
.appendto (패널);
var span = self.baseRaw.span (self, {
x : startx -15,
Y : Starty -I * ypices -caltextlen (min+i * f+''). H/2,
'텍스트 캔더': '중간'
})
.CSS ({
'Font-Family': 'Verdana, Arial, Helvetica, Sans-serif',
'글꼴 크기': '12px',
너비 : '40px',
디스플레이 : '블록',
Textalign : 'Right'
})
.addText ((min*t+(i*t*f/t)*t)/t+'')
.appendto (패널) [0];
if (! hassvg) {
span.style.top = parseint (span.style.top) + span.offsetheight/2 -5 + 'px';
span.style.left = parseint (span.style.left) -35+'px'
}
}
}또 다른{
// 지하 단위 간격
VaryPices = DrawAreAheight / (opts.xunit.units.length),
// 단위 간격의 중심 지점
오프셋 = math.round (ypices / 2),
x = hassvg? 25 : 70,
y = hassvg? 0 : 5,
기간
각각 (opts.xunit.units, function (i, d) {
self.basedraw.path (self, {
국경 : 1,
BorderColor : '#C0C0C0',
isfill : 거짓,
길 : [
중,
프로세스 포인트 (startx-5),
ProcessPoint (Starty-i * ypices),
엘,
ProcessPoint (startx),
ProcessPoint (Starty-i * ypices),
]]
})
.appendto (패널);
span = self.basedraw.span (self, {
x : startx -x,
Y : Starty -I * ypices-Offset-CaltextLen (d) .h/2 + y,
'텍스트 캔더': '중간'
})
.CSS ({
Fontfamily : 'Verdana, Arial, Helvetica, Sans-serif',
Fontsize : '12px',
너비 : '60px',
Textalign : 'Right'
})
.addtext (d)
.Appendto (패널)
});
var xpices = drawAreaWidth / Linenum;
for (var i = 0; i <= linenum; i ++) {
self.basedraw.path (self, {
국경 : 1,
BorderColor : '#C0C0C0',
isfill : 거짓,
길 : [
중,
ProcessPoint (startx + (i * xpices)),
프로세스 포인트 (스타일),
엘,
ProcessPoint (startx + (i*xpices)),
ProcessPoint (Starty -DrawAreaHeight)
]]
}).
부록 (패널);
self.basedraw.span (self, {
x : startx -caltextlen (min+i * f+''). w/2+i * xpices,
Y : 스타디,
'텍스트 캔더': '왼쪽'
})
.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 <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 축의 각 부분의 너비
오프셋 : 오프셋, // X 단일 분기 센터 포인트 위치 오프셋
Jianjuy : jianju*ypices/f,
Jianjux : jianju*xpices/f,
피드 : f // y 축 당 얼마나 많은지
}
이것을 반환하십시오;
},
CreateToolTip : function () {
// 그룹
this.tipc = this.group ( 'tip')
.CSS ({zindex : 200, 높이 : '20px', 너비 : '20px', 위치 : '절대'})
.Appendto ()
.숨다()
// 프레임 기반을 그립니다
this.tipbox = this.basedRaw.rect (this, {arc : 0.22, fill : '#ffff', 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, Sans-serif',
Fontsize : '12px',
배경 : '#fff'
})
.appendto (p);
this.tiptext = doc.creatextNode ( '');
this.tiptxtContainer [0] .AppendChild (this.tipText);
이것을 반환하십시오;
},
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 ()
.보여주다();
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 ({왼쪽 : pos.x, top : pos.y});
this.tipbox
.CSS ({너비 : size.w + 5 * 2, 높이 : size.h + 5 * 2})
this.tipbox [0] .strokecolor = obj.color || '#000';
}
this.tiptext.nodevalue = txt || '';*/
클리어 타임 아웃 (this.Timer);
var txt = obj.name + ':' + data,
self = this,
size = caltextlen (txt, this.tiptxtContainer [0] .style.csstext),
pos = {x : x- (size.w + 5 * 2)/2, y : y -32};
if (hassvg) {
self.tipbox
.attr ({너비 : size.w + 5 * 2, 높이 : size.h + 5 * 2, 스트로크 : obj.color || '#606060'});
}또 다른{
self.tipbox
.CSS ({너비 : size.w + 5 * 2, 높이 : size.h + 5 * 2})
self.tipbox [0] .strokecolor = obj.color || '#000';
}
this.tiptext.nodevalue = txt || '';;
if (this.tipc [0] .style.display === 'none') {
Hassvg
? self.tipc.attr ({transform : 'translate ('+pos.x+','+pos.y+'), pos : pos.x+'-'+pos.y})
: self.tipc.attr ({pos : pos.x+'-'+pos.y}). css ({왼쪽 : pos.x, top : pos.y});
this.tipc
.TOFRONT ()
.보여주다();
}또 다른{
var move = function (t, b, c, d) {
반환 c*(t/= d)*t + b;
},
t = 0,
b = self.tipc.attr ( 'pos'). split ( '-'),
c = [pos.x, pos.y],
d = 5;
this.timer = setInterval (function () {
if (t <d) {
t ++;
var x = 이동 (t, ~~ b [0], (~~ c [0])-(~~ b [0]), d),
y = 이동 (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 ({왼쪽 : x, top : y});
}또 다른{
클리어 타임 아웃 (self.timer);
}
}, 1);
};
},
hidetooltip : function () {
this.tipc.hide ();
},
Drawlegend : 함수 (type, redraw) {
var self = this,
opts = this.opts,
isline = opts.charts.type === 'line',
// 색상 블록의 크기
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],
// 숨겨진 그룹 기능 표시
핸들 = 함수 (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의 var name) {
var parent = maingroup [name] .chart,
노드 = 부모 [0] .ChildNodes,
len = 노드. 길이;
// 그림에 그린 물건을 파괴합니다
for (var i = len-1; i> = 0; i-) {
Vector.prototype.destroy.call (노드 [i])
}
}
// 리 페인트
self.drawsegment ();
}
}또 다른{
g.chart.show ();
g.show = true;
Hassvg
? this.attr ({fill : '#000'})
: this [0] .style.color = '#000'
if (issegment) {
self.hidelist [i]를 삭제합니다.
var maingroup = self.maingroup;
for (maingroup의 var name) {
var parent = maingroup [name] .chart,
노드 = 부모 [0] .ChildNodes,
len = 노드. 길이;
for (var i = len-1; i> = 0; i-) {
Vector.prototype.destroy.call (노드 [i])
}
}
self.drawsegment ();
}
}
},
arr = [];
타입 = 유형 || '측면';
var Legendpanel = self.group ( 'Legend')
.AppEndto ();
if (type === '측면') {
// 수평 인 경우
var top = orig_pos [1] + 5,
th = hassvg? 0 : 3,
왼쪽 = orig_pos [0] + 5;
각 (데이터, 기능 (i, d) {
왼쪽 = i === 0? 왼쪽 : t_space+왼쪽;
// 왼쪽의 모든 위치를 계산합니다
// 선형 다이어그램 인 경우 도면을 선형 다이어그램 형태로 그립니다.
if (isline) {
self.basedraw.path (self, {
국경 : 1.5,
Bordercolor : D.Color,
isfill : 거짓,
길 : [
중,
왼쪽 .tofixed (0),
(상단+10) .tofixed (0),
엘,
(왼쪽+25) .tofixed (0),
(상단+10) .tofixed (0)
]]
})
.appendto (LegendPanel);
self.baseRaw [d.dottype || '서클'] (자기, {
X : 왼쪽+12,
Y : 상위+10,
R : 4,
FillColor : D.Color
})
.appendto (LegendPanel);
}또 다른{
self.basedraw.rect (self, {
아크 : 0.1,
채우기 : D.Color,
국경 : 1,
Bordercolor : D.Color,
왼쪽 : 왼쪽,
상단 : 상단,
너비 : t_width+'px',
높이 : t_height+'px'
})
.Appendto (LegendPanel)
}
왼쪽 = 왼쪽 + t_width + 2 + t_space;
var w = caltextlen (d.name, css) .W
self.basedraw.span (self, {
'Text-Anchor': '왼쪽',
X : 왼쪽,
Y : Top+Th
})
.CSS (Extend (CSS, {커서 : '포인터'}))))
.on ( 'click', function () {
핸들 .call (this, i);
})
.addtext (d.name)
.appendto (LegendPanel);
왼쪽 = 왼쪽 + W;
});
this.basedRaw.rect (this, {
아크 : 0.1,
채우기 : 'None',
국경 : 1.5,
BorderColor : '#666666',
너비 : 왼쪽+ t_space- orig_pos [0],
높이 : MaxHeight,
왼쪽 : orig_pos [0],
상단 : orig_pos [1]
})
.appendto (LegendPanel);
}또 다른{
var top = orig_pos [1] + 5,
th = hassvg? 0 : 3,
왼쪽 = orig_pos [0] + 5;
각 (데이터, 기능 (i, d) {
top = i === 0? 상단 : t_space + 상단;
self.basedraw.rect (self, {
아크 : 0.1,
채우기 : D.Color,
국경 : 1,
Bordercolor : D.Color,
왼쪽 : 왼쪽,
상단 : 상단,
너비 : t_width+'px',
높이 : t_height+'px'
})
.appendto (LegendPanel);
var h = caltextlen (d.name, css) .h;
self.basedraw.span (self, {
'Text-Anchor': '왼쪽',
X : 왼쪽+t_width+2+t_space,
Y : Top+Th
})
.CSS (Extend (CSS, {커서 : '포인터'}))))
.addtext (d.name)
.on ( 'click', function () {
// 다층 파이 차트 인 경우 숨길 수 없습니다.
if (opts.charts.type === 'pies') 반환;
핸들 .call (this, i);
})
.appendto (LegendPanel);
top = top + h + t_space;
maxwidth = math.max (maxwidth, caltextlen (d.name, css) .w);
});
this.basedRaw.rect (this, {
아크 : 0.1,
채우기 : 'None',
국경 : 1.5,
BorderColor : '#666666',
너비 : MaxWidth+22+15,
높이 : 상단+t_space-orig_pos [1],
왼쪽 : orig_pos [0],
상단 : orig_pos [1]
})
.appendto (LegendPanel);
}
이것을 반환하십시오;
},
Drawline : function () {
var self = this,
opts = this.opts,
draw = opts.Draw;
각각 (opts.chartdata, function (i, o) {
var id = '차트'+i,
linegroup = self.group (id)
.AppEndto ();
self.maingroup [id] = {
차트 : 라인 그룹,
쇼 : 사실
};
var path = [m],
데이터 = O.Data,
선;
for (var i = 0, l = data.length; i <l; i ++) {
if (data [i] == null) {
//이 데이터가 존재하지 않고 첫 번째 데이터 경로가 아닌 경우 M을 추가하십시오.
if (path [path.length -1]! == m)
PATH.PUSH (M);
}또 다른{
// 첫 번째 데이터 경로가 아닌 경우 l을 추가하십시오.
i! == 0 && path.push ( "l");
// 첫 번째 것이 널이고 L을 제거하는 첫 번째가 아닌 경우
if (i> 0 && data [i -1] == null)
path.pop ();
// 지점의 X와 Y 위치를 계산합니다.
var x = draw.startx + draw.offset + (i * draw.xpices),
y = draw.starty- 데이터 [i] * (draw.ypices / draw.feed);
if (isie) {
x = parseint (x);
y = parseint (y);
}
Path.push (x);
PATH.PUSH (Y);
// 포인트를 그리십시오
var dottype = O.dottype || 'circle';
self.baseRaw [dottype] (self, {
X : X,
Y : Y,
R : 4,
FillColor : O.Color
})
.attr ({data : data [i], pos : x+'-'+(y-5)})
.CSS ({Zindex : 10, 커서 : '포인터'})
.on ( '마우스 오버', (함수 (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 = this;
self.currlist.line = line;
}
}) (o, x, y)))
/*. on ( '마우스 아웃', function () {
this.setsize (0);
line.setsize (1.5);
})*/
.on ( 'click', function () {linegroup.tofront ();})
.appendto (linegroup);
}
};
// 접힌 선을 그립니다
line = self.basedraw.path (self, {
국경 : 1.5,
BorderColor : O.Color,
isfill : 거짓,
경로 : 경로
})
.CSS ({Zindex : 5})
/*. on ( 'mouseover', function () {
this.setsize (2.5);
})
.on ( '마우스 아웃', function () {
this.setsize (1.5);
})*/
.on ( 'click', function () {linegroup.tofront ();})
.appendto (linegroup);
});
이것을 반환하십시오;
},
DrawArea : function () {
var self = this,
opts = this.opts,
draw = opts.Draw;
각각 (opts.chartdata, function (i, o) {
var id = '차트' + i,
AreaGroup = self.group (id) .appendto ();
self.maingroup [id] = {차트 : AreaGroup, show : true};
// 2 개의 경로가 있습니다. 하나는 지역의 경로이고 다른 하나는 라인의 경로입니다.
var ateapath = [m, (draw.startx + draw.offset) .tofixed (0), (draw.starty-draw.jianjuy) .tofixed (0)],
경로 = [m],
데이터 = O.Data,
선;
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);
// 첫 번째 또는 앞면이 NULL 인 경우 시작점 좌표를 수정하십시오.
Len === 3
&& (AreaPath [1] = (Draw.StartX +(n +1)*draw.xpices +draw.offset) .tofixed (0));
// 이전의 것이 종말 식별자 영역 그래프가 아닌 경우 첫 번째 데이터가 null이면 다음 작업이 수행되지 않습니다.
if (AreaPath [len -1]! == 씰 && 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 && areatPath.pop ();
}
var x = draw.startx + draw.offset + (n * draw.xpices),
y = draw.starty- 데이터 [n] * (draw.ypices / draw.feed);
if (isie) {
x = parseint (x);
y = parseint (y);
}
Path.push (x);
PATH.PUSH (Y);
if (AreaPath [len -1] === 씰) {
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.baseRaw [O.DotType || '서클'] (자기, {
X : X,
Y : Y,
R : 4,
FillColor : O.Color
})
.attr ({data : data [n], pos : x+'-'+(y-5)})
.on ( '마우스 오버', (함수 (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 = this;
self.currlist.line = line;
}
}) (o, x, y)))
/*. on ( '마우스 아웃', function () {
this.setsize (0);
line.setsize (1.5);
//self.hidetooltip ()
})*/
.on ( 'click', function () {atreatgroup.tofront ();})
.CSS ({Zindex : 10, 커서 : '포인터'})
.appendto (AreaGroup);
}
}
AreaPath.push (SEAL)
self.basedraw.path (self, {
국경 : 0,
ISFILL : 사실,
FillColor : O.Color,
불투명도 : 0.5,
경로 : 지역 경로
})
.CSS ({Zindex : 5})
.appendto (AreaGroup);
line = self.basedraw.path (self, {
국경 : 1.5,
BorderColor : O.Color,
isfill : 거짓,
경로 : 경로
})
/*. on ( 'mouseover', function () {
Hassvg
? this.attr ({ 'stroke-width': 2.5})
: (이 [0] .Strokeweight = 2.5);
})
.on ( '마우스 아웃', function () {
Hassvg
? this.attr ({ 'stroke-width': 1.5})
: (이 [0] .Strokeweight = 1.5);
})*/
.on ( 'click', function () {atreatgroup.tofront ();})
.CSS ({Zindex : -1})
.appendto (AreaGroup);
});
이것을 반환하십시오;
},
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'
? 숫자 (((Draw.xpices -ColumnPadding) / Datalen) .tofixed (0))
: 숫자 (((((() kolumnPadding)) / datalen) .tofixed (0));
각각 (ChartData, function (i, o) {
var data = O.Data,
id = '차트' + 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] = {차트 : ColGroup, show : true};
for (var j = 0, l = data.length; j <l; j ++) {
if (data [j] === null) 계속;
// 옆으로 판인 경우
if (isx) {
var x = number ((start + j *draw.xpices) .tofixed (0)),
y = 숫자 ((draw.starty-draw.jianjuy) .tofixed (0)),
height = number ((데이터 [j] * (draw.ypices / draw.feed) -draw.jianjuy) .tofixed (0)),
경로 = [
중,
엑스,
와이,
엘,
엑스,
y -Height,
엘,
x + columnsize,
Y- 높이,
엘,
x + columnsize,
와이,
밀봉하다
];
var pos = [x+columnsize/2, data [j]> 0? y-height : draw.starty-draw.jianjuy];
}또 다른{
var x = number ((draw.startx+draw.jianjux) .tofixed (0)),
너비 = 숫자 ((데이터 [j]*((draw.xpices / draw.feed))-draw.jianjux) .tofixed (0)),
y = 숫자 ((start- (j+1) *draw.ypices) .tofixed (0)),
경로 = [
중,
엑스,
와이,
엘,
x+너비,
Y,
엘,
x + 너비,
y + columnsize,
엘,
엑스,
y+ columnsize,
밀봉하다
];
var pos = [draw.startX+draw.jianjuX+width/2,y];
}
self.baseDraw.path(self,{
border : 0,
isfill : true,
fillColor : o.color,
opacity : 1,
path : path
})
.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);
}
});
이것을 반환하십시오;
},
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)),
분수,
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+(es)/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(self,{
config : opts.chartData[i],
s : start,
e : end,
r : radiu,
innerR : 0
})
.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],((es)/360*100).toFixed(0)+'%')
})
.on('mouseout',function(e){
var elem = e.toElement || e.relatedTarget;
//如果碰到里面的文本或者是提示框不消失
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){
hasSVG
? this.attr({
transform: 'translate(0,0)'
})
: this.css({
left : '0px',
top : '0px'
})
this.attr({move:m.replace('+','')});
}또 다른{
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(self,{
x : x,
y : y,
fill : '#fff',
'text-anchor':'left'
})
.css({
fontFamily : 'Verdana,Arial,Helvetica,sans-serif',
fontSize : '12px',
position : 'absolute',
color : '#fff',
cursor : 'pointer',
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;
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,
id = '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 + value;
varname = o.name,
size = calTextLen(name),
dot = angle(radiu,[rx,ry],s+(es)/2,2),
showDot = angle(radiu- Rpice * i,[rx,ry],s+(es)/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(self,{
config : o,
s : start,
e : end,
r : outR,
innerR : innerR
})
.attr({m : i+'-'+j,data:((es)/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.relatedTarget;
if(!elem||elem.getAttribute('m')===this[0].getAttribute('m'))
반품;
this.setOpacity(1);
})
.appendTo(piesGroup);
self.baseDraw.span(self,{
x : x,
y : y,
fill : '#fff',
'text-anchor':'left'
})
.attr({m : i+'-'+j})
.css({
fontFamily : 'Verdana,Arial,Helvetica,sans-serif',
fontSize : '12px',
position : 'absolute',
color : '#fff',
cursor : 'pointer',
zIndex : 10
})
.addText(name)
.appendTo(piesGroup);
});
});
},
drawSegment : function(){
var self = this,
opts = this.opts,
draw = opts.draw,
chartData = opts.chartData,
typeIsX = opts.charts.panel==='x',
columnPad = 5,
prev = [],
columnSize = ~~(typeIsX?draw.xPices:draw.yPices) - columnPad * 2;
each(chartData,function(i,c){
if(i in self.hideList)
반품;
var id = '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){
var start = draw.startX + columnPad,
x = ~~(start + j*draw.xPices).toFixed(0),
y = ~~(draw.startY-(prev[j]?prev[j]:0)).toFixed(0),
size = ~~(d*draw.yPices / draw.feed ).toFixed(0),
path = [
M,
x,
y,
L,
x,
y - size,
L,
x + columnSize,
y - size,
L,
x + columnSize,
y,
seal
];
var pos = [x + columnSize/2,y-size];
}또 다른{
var start = draw.startY - columnPad,
x = ~~(draw.startX+(prev[j]?prev[j]:0)).toFixed(0) ,
y = ~~(start- j*draw.yPices).toFixed(0),
size = ~~(d*draw.xPices / draw.feed ).toFixed(0),
path = [
M,
x,
y,
L,
x + size,
y ,
L,
x + size,
y - columnSize,
L,
x ,
y - columnSize,
seal
];
var pos = [x+size/2,y - columnSize];
}
self.baseDraw.path(self,{
border : 0,
isfill : true,
fillColor : c.color,
opacity : 1,
path : path
})
.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] = prev[j] + size
: prev[j] = size;
});
});
},
baseDraw : {
rect : function(o,config){
return o.createElement('rect')
.attr({
rx : config.arc*30 || 5,
ry : config.arc*30 || 5,
width : config.width || 50,
height : config.height || 50,
fill : config.fill || '#fff',
'fill-opacity' : config.opacity || 0.85,
'stroke-width' : config.border || 2,
stroke : config.borderColor || '#606060',
transform : '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)
.attr({
y : config.y+(v||15)
});
},
path : function(o,config){
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 o.createElement('path')
.attr(set);
},
circle : function(o,config){
var set = {};
set.cx = config.x;
set.cy = config.y;
set['stroke-width'] = 0;
set.stroke = config.borderColor || '#C0C0C0';
set.r = config.r;
set.fill = config.fillColor;
return o.createElement('circle')
.attr(set);
},
square : function(o,config){
var x = config.x,
y = config.y,
r = config.r,
color= config.fillColor,
len = r,
path = [
M,
(x-len).toFixed(0),
(y-len).toFixed(0),
L,
(x+len).toFixed(0),
(y-len).toFixed(0),
(x+len).toFixed(0),
(y+len).toFixed(0),
(x-len).toFixed(0),
(y+len).toFixed(0),
seal
];
return o.baseDraw.path(o,{
border : 1,
borderColor : color,
isfill : true,
fillColor : color,
path : path
});
},
triangle : function(o,config){
var x = config.x,
y = config.y,
r = config.r+0.1,
color = config.fillColor,
path = [
M,
x.toFixed(0),
(y-1.33*r).toFixed(0),
L,
(x+r).toFixed(0),
(y+0.67*r).toFixed(0),
(xr).toFixed(0),
(y+0.67*r).toFixed(0),
seal
];
return o.baseDraw.path(o,{
border : 1,
borderColor : color,
isfill : true,
fillColor : color,
path : path
});
},
diamond : function(o,config){
var x = config.x,
y = config.y,
r = 1.35*config.r,
color = config.fillColor,
path = [
M,
x.toFixed(0),
(yr).toFixed(0),
L,
(x+r).toFixed(0),
y.toFixed(0),
x.toFixed(0),
(y+r).toFixed(0),
(xr).toFixed(0),
y.toFixed(0),
seal
];
return o.baseDraw.path(o,{
border : 1,
borderColor : color,
isfill : true,
fillColor : color,
path : path
});
},
pie : function(o,config){
//config,s,e,r,index
var opts = o.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 o.baseDraw.path(o,{
border : 1,
border : '#fff',
isfill : true,
fillColor : color,
opacity : 1,
path : path
})
}
}
};
//---------------------------------------------------------------------------------------------------
//如果是vml 修改smipleChart.prototype中的一些方法
!hasSVG
&&extend(smipleChart.prototype.baseDraw,{
rect : function(o,config){
var attr = {},
css = {};
attr.arcsize = config.arc || 0.2 +'';
if(config.fill==='none'){
attr.filled = 'f'
}또 다른{
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 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').
css({
position:'absolute',
left : config.x+'px',
top : config.y+'px'
})
},
path : function(o,config){
var attr = {},
width = o.width,
height = o.height,
css = {
width : width+'px',
height : 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+','+height;
attr.path = config.path;
var elem = o.createElement()
.attr(attr)
.css(css);
if(config.opacity){
var fill = o.createElement('fill')
.attr({
type : 'fill',
color : config.fillColor||"#C0C0C0",
opacity : config.opacity
})
.appendTo(elem);
//那这个对象的一个属性引用设置透明的元素以后会用到
elem.opacity = fill[0];
}
return elem;
},
circle : function(o,config){
var width = o.width,
height = o.height,
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 o.createElement()
.attr(attr)
.css(css)
},
pie : function(o,config){
////config,s,e,r,index
var opts = o.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 o.baseDraw.path(o,{
border : 1,
border : '#fff',
isfill : true,
fillColor : color,
opacity : 1,
path : path
})
}
});
//---------------------------------------------------------------------------------------------------
})(문서);
window.onload = function(){
var t = new Date().getTime();
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: [
'1월',
'2월',
'3월',
'4월',
'5월',
'6월',
'칠월',
'팔월',
'구월',
'십월',
'십일월',
'12월'
]]
},
chartData : [
{
name : 'xcv',
color : '#4572A7',
dotType : 'square',
//data : [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 = [
{
name : 'xcv',
color : '#4572A7',
//data : [0,3,4,5,6,7,8,9,10,11]
data : [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 =[
{
name : 'xcv',
color : '#4572A7',
//data : [2,3,4,5,6,7,8,9,10,11]
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,411]
}, {
name: 'ccc',
color: '#89A54E',
data: [55,null,75,233]
}, {
name: 'ddd',
color: '#80699B',
data: [63,null,100,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= [290,400]
new smipleChart($$('pies'),config);
config.chartData =[
{
name : 'xcv',
color : '#4572A7',
data : [111,222,333,null,444,555,56,57,84]
}, {
name: 'frfr',
color: '#AA4643',
data: [845,666,100,null,666,677,56,88,633,55,555]
}, {
name: 'AAAAA',
color: '#89A54E',
data: [555,162,75,null,364,0,637,112,163,615]
}
]]
config.charts.type ='line';
config.legend.pos= [10,10]
//
config.yUnit.lineNum = 10;
config.charts.panel = 'x';
config.title.text ='分段图表'
config.subTitle.text='分段图表副标题'
config.yUnit.text ='分段图表侧标题'
config.charts.type ='segment';
new smipleChart($$('segmentx'),config);
config.charts.panel = 'y';
new smipleChart($$('segmenty'),config);
config.yUnit.lineNum = 2;
config.title.text ='比较小的'
config.subTitle.text='只设置了2条线'
config.yUnit.text ='小测标题';
new smipleChart($$('vv'),config);
//alert(new Date().getTime()-t)
}
</스크립트>
</body>
</html>
다른
js浮点精度问题不好解决求助。 . . . . . . . .
水平有限难免问题多多望赐教。 . . . . . .