VML折线图(二)

原创 2003年06月20日 09:26:00

<!—注: 这里的 @0, 1,2,3,4 分别为<v:formulas> 的第1,2,3,4,5个元素的计算结果-->

                     </v:shapetype>

                     <!-- 定义坐标刻度 y轴-->

                     <v:shapetype id=oyTextLeft coordsize="400,400" adj="1,6">

                            <v:path textboxrect="@4,@5,@6,@7"></v:path>

                            <v:formulas>

                                   <v:f eqn="sum width 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 100 "></v:f>

                                   <v:f eqn="sum 0 @3 8 "></v:f>

                                   <v:f eqn="sum 0 0 10 "></v:f>

                                   <v:f eqn="sum @3 30 0 "></v:f>

                            </v:formulas>

                     </v:shapetype>

                     <!--定义坐标刻度 y轴-->

                     <v:shapetype id=oyTextRight coordsize="400,400" adj="1,6">

                            <v:path textboxrect="@4,@5,@6,@7"></v:path>

                            <v:formulas>

                                   <v:f eqn="sum width 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 10 0 "></v:f>

                                   <v:f eqn="sum 0 @3 8 "></v:f>

                                   <v:f eqn="sum @0 100 0 "></v:f>

                                   <v:f eqn="sum @3 30 0 "></v:f>

                            </v:formulas>

                     </v:shapetype>

                     <v:shapetype id=graphLine coordsize="400,400" strokecolor="#aaa" strokeweight=".8pt" path=" m@8@9 l@7@1 e" adj="0,0,400,400">

                            <v:stroke endarrow="oval" endarrowwidth="narrow" endarrowlength="short"></v:stroke>

                            <v:formulas>

                                   <v:f eqn="sum 0 height #2 "></v:f>

                                   <v:f eqn="sum 0 height #3 "></v:f>

                                   <v:f eqn="sum 0 #0 1 "></v:f>

                                   <v:f eqn="prod 1 width #1 "></v:f>

                                   <v:f eqn="prod @3 @2 1 "></v:f>

                                   <v:f eqn="prod 1 @3 2 "></v:f>

                                   <v:f eqn="sum 0 @4 @5 "></v:f>

                                   <v:f eqn="sum @4 @5 0 "></v:f>

                                   <v:f eqn="if @2 @6 @7 "></v:f>

                                   <v:f eqn="if @2 @0 @1 "></v:f>

                                   <v:f eqn="prod @2 @3 1 "></v:f>

                                   <v:f eqn="prod #0 @3 1 "></v:f>

                                   <v:f eqn="sum height 20 0 "></v:f>

                                   <v:f eqn="sum height 80 0 "></v:f>

                            </v:formulas>

                     </v:shapetype>

                     <!-- 绘制x轴坐标 -->

                     <v:shapetype id=oxText coordsize="400,400" adj="0,0">

                            <v:path textboxrect="@10,@12,@11,@13"></v:path>

                            <v:formulas>

                                   <v:f eqn="sum 1 0 0 "></v:f>

                                   <v:f eqn="sum 1 0 0 "></v:f>

                                   <v:f eqn="sum 0 #0 1 "></v:f>

                                   <v:f eqn="prod 1 width #1 "></v:f>

                                   <v:f eqn="prod @3 @2 1 "></v:f>

                                   <v:f eqn="prod 1 @3 2 "></v:f>

                                   <v:f eqn="sum 0 @4 @5 "></v:f>

                                   <v:f eqn="sum @4 @5 0 "></v:f>

                                   <v:f eqn="if @2 @6 @7 "></v:f>

                                   <v:f eqn="if @2 @0 @1 "></v:f>

                                   <v:f eqn="prod @2 @3 1 "></v:f>

                                   <v:f eqn="prod #0 @3 1 "></v:f>

                                   <v:f eqn="sum height 20 0 "></v:f>

                                   <v:f eqn="sum height 80 0 "></v:f>

                            </v:formulas>

                     </v:shapetype>

                     <!-- 绘制y轴刻度-->

                     <v:shape class="oyTextLeft" type="#oyTextLeft" coordsize="400,400" adj="1,5">

                                   <v:textbox class="oText">400</v:textbox>

                     </v:shape>

                     <v:shape class="oyTextLeft" type="#oyTextLeft" adj="2,5">

                                   <v:textbox class="oText">320</v:textbox>

                     </v:shape>

                     <v:shape class="oTextRight" type="#oyTextLeft" adj="3,5">

                                   <v:textbox class="oText">240</v:textbox>

                     </v:shape>

                     <v:shape class="oTextRight" type="#oyTextLeft" adj="4,5">

                                   <v:textbox class="oText">160</v:textbox></v:shape>

                     <v:shape class="oTextRight" type="#oyTextLeft" adj="5,5">

                                   <v:textbox class="oText">80</v:textbox></v:shape>          

                     <v:shape class="yLine" type="#yLine" adj="1,5"></v:shape>

                     <v:shape class="yLine" type="#yLine" adj="2,5"></v:shape>

                     <v:shape class="yLine" type="#yLine" adj="3,5"></v:shape>

                     <v:shape class="yLine" type="#yLine" adj="4,5"></v:shape>

                     <v:shape class="yLine" type="#yLine" adj="5,5"></v:shape>

                     <!-- X轴坐标刻度绘制 -->

                     <v:shape class="oTextRight" type="#oxText" adj="1,12"><v:textbox class="oText3">1</v:textbox></v:shape>

                     <v:shape class="oTextRight" type="#oxText" adj="2,13"><v:textbox class="oText3">2</v:textbox></v:shape>

                     <v:shape class="oTextRight" type="#oxText" adj="3,12"><v:textbox class="oText3">3</v:textbox></v:shape>

                     <v:shape class="oTextRight" type="#oxText" adj="4,12"><v:textbox class="oText3">4</v:textbox></v:shape>

                     <v:shape class="oTextRight" type="#oxText" adj="5,12"><v:textbox class="oText3">5</v:textbox></v:shape>

                     <v:shape class="oTextRight" type="#oxText" adj="6,12"><v:textbox class="oText3">6</v:textbox></v:shape>

                     <v:shape class="oTextRight" type="#oxText" adj="7,12"><v:textbox class="oText3">7</v:textbox></v:shape>

                     <v:shape class="oTextRight" type="#oxText" adj="8,12"><v:textbox class="oText3">8</v:textbox></v:shape>

                     <v:shape class="oTextRight" type="#oxText" adj="9,12"><v:textbox class="oText3">9</v:textbox></v:shape>

                     <v:shape class="oTextRight" type="#oxText" adj="10,12"><v:textbox class="oText3">10</v:textbox></v:shape>

                     <v:shape class="oTextRight" type="#oxText" adj="11,12"><v:textbox class="oText3">11</v:textbox></v:shape>

                     <v:shape class="oTextRight" type="#oxText" adj="12,12"><v:textbox class="oText3">12</v:textbox></v:shape>                  

                     <!-- 数据曲线绘制 -->

                     <v:shape class="yLine" type="#graphLine" strokecolor="#f11" adj="1,12,345,345"></v:shape>                    

                     <v:shape class="yLine" type="#graphLine" strokecolor="#6cf" adj="1,12,365,365"></v:shape>

                     <v:shape class="yLine" type="#graphLine" strokecolor="#f11" adj="2,12,345,156"></v:shape>

                     <v:shape class="yLine" type="#graphLine" strokecolor="#6cf" adj="2,12,365,303"></v:shape>

                     <v:shape class="yLine" type="#graphLine" strokecolor="#f11" adj="3,12,156,156"></v:shape>

                     <v:shape class="yLine" type="#graphLine" strokecolor="#6cf" adj="3,12,303,283"></v:shape>

                     <v:shape class="yLine" type="#graphLine" strokecolor="#f11" adj="4,12,156,156"></v:shape>

                     <v:shape class="yLine" type="#graphLine" strokecolor="#6cf" adj="4,12,283,353"></v:shape>

                     <v:shape class="yLine" type="#graphLine" strokecolor="#f11" adj="5,12,156,154"></v:shape>

                     <v:shape class="yLine" type="#graphLine" strokecolor="#6cf" adj="5,12,353,347"></v:shape>

                     <v:shape class="yLine" type="#graphLine" strokecolor="#f11" adj="6,12,154,148"></v:shape>

                     <v:shape class="yLine" type="#graphLine" strokecolor="#6cf" adj="6,12,347,316"></v:shape>

                     <v:shape class="yLine" type="#graphLine" strokecolor="#f11" adj="7,12,148,155"></v:shape>

                     <v:shape class="yLine" type="#graphLine" strokecolor="#6cf" adj="7,12,316,333"></v:shape>

                     <v:shape class="yLine" type="#graphLine" strokecolor="#f11" adj="8,12,155,156"></v:shape>

                     <v:shape class="yLine" type="#graphLine" strokecolor="#6cf" adj="8,12,333,344"></v:shape>

                     <v:shape class="yLine" type="#graphLine" strokecolor="#f11" adj="9,12,156,159"></v:shape>

                     <v:shape class="yLine" type="#graphLine" strokecolor="#6cf" adj="9,12,344,362"></v:shape>

                     <v:shape class="yLine" type="#graphLine" strokecolor="#f11" adj="10,12,159,159"></v:shape>

                     <v:shape class="yLine" type="#graphLine" strokecolor="#6cf" adj="10,12,362,362"></v:shape>

                     <v:shape class="yLine" type="#graphLine" strokecolor="#f11" adj="11,12,159,159"></v:shape>

                     <v:shape class="yLine" type="#graphLine" strokecolor="#6cf" adj="11,12,362,362"></v:shape>

                     <v:shape class="yLine" type="#graphLine" strokecolor="#f11" adj="12,12,159,161"></v:shape>

                     <v:shape class="yLine" type="#graphLine" strokecolor="#6cf" adj="12,12,362,374"></v:shape>

                     <!-- 图例-->

                     <v:shape class="yLine" strokecolor="#f11" strokeweight=".8pt" path=" m160,-35 l190,-35 e">

                            <v:stroke startarrow="oval" startarrowwidth="narrow" startarrowlength="short" endarrow="oval" endarrowwidth="narrow" endarrowlength="short"></v:stroke>

                            <v:path arrowok="t"></v:path></v:shape>                         

                     <v:shape class="Legend">

                            <v:path textboxrect="200,0,300,30"></v:path>

                            <v:textbox class="LegendText">产品A</v:textbox></v:shape> 

                     <v:shape class="yLine" strokecolor="#6cf" strokeweight=".8pt" path=" m330,-35 l360,-35 e">

                            <v:stroke startarrow="oval" startarrowwidth="narrow" startarrowlength="short" endarrow="oval" endarrowwidth="narrow" endarrowlength="short"></v:stroke>

                            <v:path arrowok="t"></v:path></v:shape>

                     <v:shape class="Legend">

                            <v:path textboxrect="370,0,500,30"></v:path>

                            <v:textbox class="LegendText">产品B</v:textbox></v:shape> 

              </v:group>

       </BODY>

</HTML>

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

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

VML折线图(二)

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

asp.net+VML+XMLHTTP实现无刷新动态曲线图(附源码)

       在网上看见了不少同胞求在.net环境下做动态曲线图的方法,网上也有很多同胞做出了回应,但都写得比较含糊,也没给出具体的做法,虾米在此对网上一个较为有名的vml曲线图进行了改进,添加进as...
  • superlw
  • superlw
  • 2006年03月28日 11:49
  • 5256

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

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

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网页文件格式的自由性

我说过,VML语言跟HTML很类似,不仅指的他们都是标记语言。更重要的是VML语句同样不区分大小写、属性可以是 value=参数值 或 value=参数值 或 value="参数值"。编写起来感觉相当...
  • jcwz
  • jcwz
  • 2006年02月22日 15:35
  • 727

漂亮的折线图

script language=javascript>function table2(total,table_x,table_y,all_width,all_height,line_no){//参数含...
  • srym
  • srym
  • 2007年06月04日 09:41
  • 1776

基于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
  • 958

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

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

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

最近在维护一个使用VML画曲线的网站,在不同的IE下浏览效果不一样,特别是在IE8下,出现莫名其妙的样式显示问题: 1.曲线不可见!在IE9或IE7下,曲线正常绘制,但是在IE8下,不见坐标轴和曲线...
  • dyllove98
  • dyllove98
  • 2013年05月20日 19:38
  • 1605
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:VML折线图(二)
举报原因:
原因补充:

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