이번엔 이 VML을 사용하게 될 실제 목적에 가장 근접한 내용인, 막대 그래프를 그리는 예제이다.
<html>
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<head>
<style>
v\:* { behavior: url(#default#VML); }
</style>
</head>
<body>
<v:barChart id="barChart1" style="position:absolute;top:30px;left:30px;width:330px;height:330px">
<v:line id="vText" from="16,100" to="17,0">
<v:fill on="true" color="black"/>
<v:path textpathok="true"/>
<v:textpath on="true" string="Logon/Sec" style="font-size:12pt;font-family:'Arial';font-weight:normal"/>
</v:line>
<v:line id="vLine" from="29,0" to="29,300" strokecolor="black" strokeweight="2pt"/>
<v:line id="hText" from="280,310" to="330,311">
<v:fill on="true" color="black"/>
<v:path textpathok="true"/>
<v:textpath on="true" fitpath="false" string="time" style="font-size:12pt;font-family:'Arial';font-weight:normal"/>
</v:line>
<v:line id="hLine" from="29,301" to="330,301" strokecolor="black" strokeweight="2pt"/>
<v:rect id="rect01" style="position:absolute;top:100;left:30;width:30;height:200">
<v:fill type="gradient" color="#AAFFAA" color2="red" colors="10% #CCFFCC, 70% yellow"/>
</v:rect>
<v:rect id="rect02" style="position:absolute;top:0;left:60;width:30;height:300">
<v:fill type="gradient" color="#AAFFAA" color2="red" colors="10% #CCFFCC, 70% yellow"/>
</v:rect>
<v:rect id="rect03" style="position:absolute;top:30;left:90;width:30;height:270">
<v:fill type="gradient" color="#AAFFAA" color2="red" colors="10% #CCFFCC, 70% yellow"/>
</v:rect>
<v:rect id="rect04" style="position:absolute;top:60;left:120;width:30;height:240">
<v:fill type="gradient" color="#AAFFAA" color2="red" colors="10% #CCFFCC, 70% yellow"/>
</v:rect>
<v:rect id="rect05" style="position:absolute;top:90;left:150;width:30;height:210">
<v:fill type="gradient" color="#AAFFAA" color2="red" colors="10% #CCFFCC, 70% yellow"/>
</v:rect>
<v:rect id="rect06" style="position:absolute;top:120;left:180;width:30;height:180">
<v:fill type="gradient" color="#AAFFAA" color2="red" colors="10% #CCFFCC, 70% yellow"/>
</v:rect>
<v:rect id="rect07" style="position:absolute;top:150;left:210;width:30;height:150">
<v:fill type="gradient" color="#AAFFAA" color2="red" colors="10% #CCFFCC, 70% yellow"/>
</v:rect>
<v:rect id="rect08" style="position:absolute;top:180;left:240;width:30;height:120">
<v:fill type="gradient" color="#AAFFAA" color2="red" colors="10% #CCFFCC, 70% yellow"/>
</v:rect>
<v:rect id="rect09" style="position:absolute;top:210;left:270;width:30;height:90">
<v:fill type="gradient" color="#AAFFAA" color2="red" colors="10% #CCFFCC, 70% yellow"/>
</v:rect>
<v:rect id="rect10" style="position:absolute;top:240;left:300;width:30;height:60">
<v:fill type="gradient" color="#AAFFAA" color2="red" colors="10% #CCFFCC, 70% yellow"/>
</v:rect>
</v:barChart>
</body>
</html>
이 소스를 웹 브라우저로 보면 다음과 같다.
'Tech: > VML·SVG' 카테고리의 다른 글
| VML 응용: 별 그리기 (0) | 2008.10.01 |
|---|---|
| VML 응용: 파이 그래프 (0) | 2008.10.01 |
| VML 응용: 무지개 (0) | 2008.10.01 |
| SVG: 패턴(Pattern) (0) | 2008.09.29 |
| SVG: 색상 단계 표현(Gradient) (0) | 2008.09.29 |
