VML折线图(一)

原创 2003年06月20日 13:51:00

       本例针对某工厂某两种产品的月产量,应用VML技术在浏览器客户区内绘制简单的产量走势图。

       本例主要用到的VML元素主要有:

<v:group/> 组合图形,确立图形坐标系。

<v:shapetype/> 自定义元素类型。

<v:shape> 确立绘图区间。

<v:path/>  绘制路径。

<v:f/> 计算表达式。

<v:textbox/> 显示文字。

<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

 

       下面是本例用到的数据:

月份

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

    经客户区绘制后,在浏览器内效果如下图:

 

<?xml:namespace prefix = v ns = "urn:schemas-microsoft-com:vml" />CSDN_Dev_Image_2003-6-20855130.png

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

用VML做的图表分析(包括柱图,饼图和折线图)

v/:*{behavior:url(#default#vml)}/*声明v为vml变量*/ //模拟数据var RecordSetArray=new Array();//模拟记录条数var iRe...
  • gjd111686
  • gjd111686
  • 2004年07月07日 16:14
  • 2295

纯ASP结合VML生成完美图-折线图

%不要修改以下数据,除非你知道你在做什么#####################################Height=200  //图表高度Width=600   //图表宽度posX=39...
  • chinmo
  • chinmo
  • 2008年03月03日 22:48
  • 637

asp+VML统计图

function show(pie){ pie.strokecolor=pie.fillcolor; pie.strokeweight=2;}function hide(pie){ pie.strok...
  • gengwei80
  • gengwei80
  • 2004年10月09日 10:28
  • 1668

基于vml/svg画线条的跨浏览器的函数(已封装)

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> Untit...
  • mtfsoft
  • mtfsoft
  • 2012年04月26日 23:57
  • 956

VML折线图(二)

的第1,2,3,4,5个元素的计算结果-->                                                                             ...
  • FlySpace
  • FlySpace
  • 2003年06月20日 09:26
  • 1721

VML多店销售折线图

v/:*         { behavior: url(#default#VML) }o/:*         { behavior: url(#default#VML) }.shape      ...
  • 21aspnet
  • 21aspnet
  • 2007年03月22日 23:03
  • 4231

基于VML与HTML5 Canva实现的跨浏览器饼图与折线图

一个简单的JS图表库演示源代码,因为太懒,没毅力,源码给有缘者得之或者有用吧! 1. 支持IE6+以上版本,支持Chrome, 支持FireFox 2. 动画加载机制 3. tooltip支持 4. ...
  • jia20003
  • jia20003
  • 2013年09月16日 21:14
  • 10362

IE8下的VML显示问题解决方案

最近在维护一个使用VML画曲线的网站,在不同的IE下浏览效果不一样,特别是在IE8下,出现莫名其妙的样式显示问题: 1.曲线不可见!在IE9或IE7下,曲线正常绘制,但是在IE8下,不见坐标轴和曲线...
  • dyllove98
  • dyllove98
  • 2013年05月20日 19:38
  • 1600

VML 学习笔记

观看者:有xml,javascript基础的同学 目标:熟练掌握vml 实现方式:代码及相关文字解释。希望能一步步写完代码当你看完也就掌握了。 VML的全称是Vector Marku...
  • jumtre
  • jumtre
  • 2014年08月06日 10:15
  • 2465

asp版VML折线图

昨天发了个JAVASCRIPT版的VML折线图,今天再发个ASP版的.感觉网上的文章大都是照抄别人的,而且还不去自己验证,这样误导了很多读者.这里我发些自己测试过而且是自己写的文章,希望对大家能有所帮...
  • duku123
  • duku123
  • 2008年05月30日 15:05
  • 549
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:VML折线图(一)
举报原因:
原因补充:

(最多只允许输入30个字)