2. 技术人生
    3. VML折线图(一)

    VML折线图(一)

    技术2022-05-11  103

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

    专利

    最新回复(0)