VML折线图(一)

王朝other·作者佚名  2006-01-08
窄屏简体版  字體: |||超大  

本例针对某工厂某两种产品的月产量,应用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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航