CSDN博客

img FlySpace

VML折线图(一)

发表于2003/6/20 13:51:00  2478人阅读

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

0 0

相关博文

我的热门文章

img
取 消
img