그래프 하면 빼놓을 수 없는 파이 차트.
이번 예제는 정적 VML이 아닌, 자바스크립트로 동적으로 그리는 VML되겠다.
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v\:* { behavior: url(#default#VML); }
</style>
<script language=javascript>
<!--//
function DrawPie()
{
var data=new Array(100,300,50,120,200);
var data_city=new Array("seoul","taegu","daejun","hwachun","busan");
var sum=0;
for(i=0;i<data.length;i++){
sum=sum + data[i];
}
var data_pcnt=new Array();
for(i=0;i<data.length;i++){
data_pcnt[i]=parseInt(data[i]*100/sum);
}
var data_angle=new Array();
for(i=0;i<data.length;i++){
data_angle[i]=parseInt(24500000*data_pcnt[i]/100);
}
var fColor=new Array(5);
fColor[0]='#ffcc00';
fColor[1]='#ffffcc';
fColor[2]='#ccffee';
fColor[3]='#ddeecc';
fColor[4]='#aaccff';
var pie = document.all["divPie"];
var sum_angle=0;
for(i=0;i<data.length;i++){
pie.insertAdjacentHTML("BeforeEnd", "<v:shape style='z-index:" + i + ";position:absolute; width:400; height:400' strokecolor='gray' fillcolor='" + fColor[i] + "' path='M 200 200 AE 200 200 200 200 " + sum_angle + " " + data_angle[i] + " X E'/>");
sum_angle=sum_angle + data_angle[i];
}
for(i=0;i<data.length;i++){
pie.insertAdjacentHTML("BeforeEnd", "<div style='padding-left:2px;position:absolute;left:200;top:" + 20*(i+2) + ";font-family:Lucida Console;font-size:10px;width:50;height:10;border:none;background:" + fColor[i] + "'>" + data_pcnt[i] + "%</div>");
pie.insertAdjacentHTML("BeforeEnd", "<div style='position:absolute;left:270;top:" + 20*(i+2) + ";font-family:Lucida Console;font-size:11px;width:50;height:10;border:none;'>" + data_city[i] + "</div>");
}
}
//-->
</script>
</head>
<body onload="DrawPie();">
<div id="divPie"></div>
</body>
</html>
이 소스를 웹 브라우저로 보면 다음과 같다.
'Tech: > VML·SVG' 카테고리의 다른 글
| VML 응용: 데이터베이스 모형 (0) | 2008.10.01 |
|---|---|
| VML 응용: 별 그리기 (0) | 2008.10.01 |
| VML 응용: 막대 그래프 (0) | 2008.10.01 |
| VML 응용: 무지개 (0) | 2008.10.01 |
| SVG: 패턴(Pattern) (0) | 2008.09.29 |
