本例针对某工厂某两种产品的月产量，应用VML技术在浏览器客户区内绘制简单的产量走势图。
本例主要用到的VML元素主要有：
<v:group/> 组合图形，确立图形坐标系。
<v:shapetype/> 自定义元素类型。
<v:shape> 确立绘图区间。
<v:path/> 绘制路径。
<v:f/> 计算表达式。
<v:textbox/> 显示文字。
下面是本例用到的数据：
月份
1
2
3
4
5
6
7
8
9
10
11
12
A
345
156
156
156
154
148
155
156
159
159
159
161
B
365
303
283
353
347
316
333
344
362
362
362
374
经客户区绘制后，在浏览器内效果如下图：
图16.8 简单产品走势图
代码：
<!—开始定义VML 行为 à
<HTML xmlns:v="urn:schemas-microsoft-com:vml">
<HEAD>
<TITLE>产量走势</TITLE>
<STYLE> v\:* { behavior: url(#default#VML);}
<!--- 坐标轴样式 -à
.axisline { LEFT: 0px; WIDTH: 400px; POSITION: absolute; TOP: 0px; HEIGHT: 400px}
<!--图形组样式-->
.grp {MARGIN-TOP: 50pt; Z-INDEX: 200; MARGIN-LEFT: 50pt; WIDTH: 400px; POSITION: absolute; HEIGHT: 200px}
<!—坐标轴y样式-->
.oyTextLeft{LEFT: -10px; WIDTH: 425px; POSITION: absolute; TOP: -10px; HEIGHT: 415px}
<!--定义y轴刻度样式-->
.oText { MARGIN-TOP: 0pt; FONT-SIZE: 10pt; LEFT: auto; MARGIN-LEFT: 0pt; WIDTH: 137.218pt; TOP: auto; HEIGHT: 18.906pt; TEXT-ALIGN: right }
<!--定义数据折线样式-->
.yLine { LEFT: 0px; WIDTH: 400px; POSITION: absolute; TOP: 0px; HEIGHT: 400px}
.oTextRight {LEFT: -10px; WIDTH: 425px; POSITION: absolute; TOP: -10px; HEIGHT: 415px}
.oText2 {FONT-SIZE: 10pt; LEFT: auto; MARGIN-LEFT: 372.281pt; WIDTH: 102.062pt; TOP: auto; HEIGHT: 14pt; TEXT-ALIGN: left}
.oText3 {MARGIN-TOP: 158.812pt; FONT-SIZE: 10pt; LEFT: auto; MARGIN-LEFT: 7.312pt; WIDTH: 14.343pt; TOP: auto; HEIGHT: 22.125pt; TEXT-ALIGN: center}
<!--定义图例样式-->
.Legend {LEFT: -10px; WIDTH: 425px; POSITION: absolute; TOP: -55px; HEIGHT: 415px}
.LegendText {MARGIN-TOP: 4.093pt; FONT-SIZE: 10pt; LEFT: auto; MARGIN-LEFT: 287.062pt; WIDTH: 98.25pt; TOP: auto; HEIGHT: 11.062pt; TEXT-ALIGN: left}
<!--定义表头样式-->
.head { MARGIN-TOP: 0pt; FONT-SIZE: 14pt; LEFT: auto; MARGIN-LEFT: 0pt; WIDTH: 100%; TOP: auto; HEIGHT: 30pt; TEXT-ALIGN: center }
</STYLE>
</HEAD>
<BODY>
<!--定义图形边界-->
<v:group class="grp" coordsize="400,400">
<v:textbox class="head" >简单产量走势图</v:text>
<!-- 定义坐标轴类型 -->
<v:shapetype id=axisline strokeweight="1pt" path=" m@0@1 l@2@3 e" adj="0,0,400,400">
<v:path arrowok="f"></v:path>
<v:stroke endarrow="classic" endarrowwidth="narrow" endarrowlength="long"></v:stroke>
<v:formulas>
<v:f eqn="sum #0 0 0 "></v:f>
<v:f eqn="sum #1 0 0 "></v:f>
<v:f eqn="sum #2 0 0 "></v:f>
<v:f eqn="sum #3 0 0 "></v:f>
</v:formulas>
<!—注：这里的#0,1,2,3 分别为父元素（v:shapetype）的adj 属性的第1,2,3,4 个数值-->
</v:shapetype>
<!-- 坐标区域 -->
<!-- y -->
<v:shape class="axisline" type="#axisline" coordsize="400,400" adj="0,400,0,0"></v:shape>
<!-- x -->
<v:shape class="axisline" type="#axisline" coordsize="400,400" adj="0,400,400,400"></v:shape>
<!-- 绘水平线-->
<v:shapetype id=yLine coordsize="400,400" strokecolor="#ccc" path=" m0@3 l@0@3 e">
<v:formulas>
<v:f eqn="sum 400 0 0 "></v:f>
<v:f eqn="sum 0 #0 1 "></v:f>
<v:f eqn="prod 1 height #1 "></v:f>
<v:f eqn="prod @1 @2 1 "></v:f>
<v:f eqn="sum 0 0 0 "></v:f>
<v:f eqn="sum 0 @3 0 "></v:f>
<v:f eqn="sum 0 0 0 "></v:f>
<v:f eqn="sum @3 0 0 "></v:f>
</v:formulas>
后半部分 http://www.csdn.net/Develop/read_article.asp?id=19135
本文地址：http://com.8s8s.com/it/it29198.htm