vml+javascript直接在浏览器中绘制动态曲线图实例(源码-+Think+in+vml++vml+极道教程)

共130个文件

htm：71个

html：24个

gif：19个

vml+js

5星 · 超过95%的资源需积分: 12 95 浏览量 2013-06-11 19:18:56 上传评论收藏 2.17MB RAR 举报

VML（Vector Markup Language）是微软推出的一种矢量图形标记语言，它允许网页开发者在HTML文档中嵌入矢量图形。JavaScript与VML结合，可以实现动态、交互式的图形绘制，比如在本实例中，我们将探讨如何利用这两种技术在浏览器中绘制动态曲线图。在浏览器的早期版本，特别是那些不支持SVG（Scalable Vector Graphics）或者Flash的浏览器，VML成为了创建复杂图形和图表的一个选择。VML是基于XML的语言，因此可以被XSLT处理，也可以通过JavaScript进行动态操作。这个"vml+javascript直接在浏览器中绘制动态曲线图实例"提供了源码，可以帮助我们理解如何使用VML和JavaScript实现这一功能。我们需要在HTML页面中定义VML的命名空间，并设置CSS样式以便在IE浏览器中正确显示VML元素： ```html <!DOCTYPE html> <html> <head> <style type="text/css"> v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VML);} .shape {behavior:url(#default#VML);} </style> </head> <body>  </body> </html> ``` 接下来，我们可以用JavaScript动态创建VML元素，例如创建一个曲线图，我们需要定义线条、曲线、填充等图形元素。以下是一个简单的示例： ```javascript var doc = document.createElement('v:group'); doc.style.position = 'absolute'; doc.style.left = '0px'; doc.style.top = '0px'; var line = document.createElement('v:shape'); line.type = 'polyline'; line.fillcolor = 'none'; line.strokecolor = 'blue'; line.strokeweight = '2px'; // 添加点坐标 var points = '0,50 50,100 100,50 150,100 200,50'; line.path = points; doc.appendChild(line); document.body.appendChild(doc); ``` 在这个实例中，`v:shape`代表一个图形元素，`type='polyline'`定义了这是一个多边形线条，`path`属性则包含了曲线图的点坐标。通过动态修改这些点的坐标，我们可以实现动态曲线的绘制。此外，为了使曲线图更具交互性，我们还可以添加事件监听器，如鼠标悬停时改变线条颜色，或者点击时显示数据详情。这可以通过JavaScript的`addEventListener`函数实现。这个实例为我们展示了在不支持SVG或Canvas的旧版浏览器中，如何使用VML和JavaScript实现动态曲线图的绘制。虽然现在大多数现代浏览器都支持SVG和Canvas，但在兼容性要求较高的场景下，VML仍然是一个值得考虑的选项。通过深入学习和实践这个实例，我们可以更好地理解和掌握这种技术，为老旧浏览器提供高质量的图形渲染体验。

资源推荐

资源详情

资源评论

收起资源包目录

vml+javascript直接在浏览器中绘制动态曲线图实例(源码-+Think+in+vml++vml+极道教程) （130个子文件）

pub_Document.css 2KB

style.css 1KB

css.css 642B

itwork4_3.gif 111KB

itwork1.gif 106KB

itwork4_4.gif 98KB

itwork2.gif 60KB

itwork4_2.gif 57KB

old_work4.gif 54KB

fsba.gif 48KB

itwork4_1.gif 43KB

flashvml3.gif 39KB

itwork3.gif 38KB

old_work3.gif 32KB

haha.gif 26KB

old_work5.gif 25KB

big.gif 13KB

old_work2.gif 12KB

old_work1.gif 9KB

expand.gif 1KB

collapse.gif 1KB

photo.GIF 0B

FlashVml3e.htm 133KB

FlashVml3.htm 129KB

sjtb.htm 59KB

happy2005.htm 27KB

helpflash.htm 26KB

old_helpflash.htm 26KB

vmlgirl2_luxiang.htm 25KB

vmlgirl2.htm 24KB

cg.htm 18KB

old_zjlx.htm 14KB

4_4.htm 12KB

1_18.htm 12KB

1_14.htm 12KB

lurecoder_1.htm 11KB

2_2.htm 11KB

lurecoder_3.htm 11KB

lurecoder_2.htm 11KB

2_3.htm 10KB

vmlgirl.htm 10KB

1_12.htm 9KB

helptool.htm 9KB

vmlxxjy.htm 9KB

1_21.htm 9KB

index.htm 8KB

1_20.htm 8KB

old_qianming.htm 8KB

1_24.htm 8KB

1_10.htm 7KB

1_4.htm 7KB

1_25.htm 7KB

vml3d_1.htm 7KB

vml2d_1.htm 7KB

1_5.htm 6KB

1_23.htm 6KB

3_1.htm 6KB

4_3.htm 5KB

1_16.htm 5KB

1_19.htm 5KB

1_17.htm 5KB

1_6.htm 5KB

3_2.htm 5KB

1_22.htm 4KB

2_6.htm 4KB

2_5.htm 4KB

old_tkc.htm 4KB

vml3d_2.htm 4KB

1_11.htm 4KB

4_5.htm 4KB

1_1.htm 4KB

4_8.htm 3KB

4_9.htm 3KB

4_7.htm 3KB

2_4.htm 3KB

1_2.htm 3KB

1_7.htm 3KB

1_15.htm 3KB

4_1.htm 3KB

1_9.htm 3KB

1_3.htm 2KB

4_2.htm 2KB

vml3d_3.htm 2KB

1_8.htm 2KB

vml2d_2.htm 2KB

old_wjbf.htm 2KB

2_1.htm 2KB

4_6.htm 2KB

3_3.htm 2KB

old_button.htm 2KB

1_13.htm 2KB

old_ajmd.htm 1KB

old_jdt.htm 1KB

最新曲线.html 24KB

map.html 23KB

LineCurve.html 16KB

tools.html 13KB

step22.html 13KB

step7.html 12KB

Test.html 12KB

共 130 条

评论收藏

内容反馈

xingyuewang

2014-05-05

很好用谢谢

春的气息

粉丝: 15

vml+javascript直接在浏览器中绘制动态曲线图实例(源码-+Think+in+vml++vml+极道教程)

vml+javascript直接在浏览器中绘制动态曲线图实例(源码-+Think in vml +vml+极道教程)

JS和VML操作教程

Thinking in VML

ThinkInVML

vml+js实现的框图编辑器

Thinking in VML.chm

ajax+vml+js开发实时监控和矩形报表(原稿)

js+vml手绘多边形

vml+javascript直接在web页面绘制动态曲线

vml+javascript高效曲线画图

用vml+JAVASCRIPT写的 广东省各县分布图 颜色可根据值而变

用VML+JavaScript写的一个通用统计图表

vml+javascript实现的3d柱状图(仅适用于ie)

VML极道教程 VML极道教程

VML极道教程

vml 极道教程 详细的vml教程

Think in VML教程

vml技术大全（中文手册，极道教程，入门教程及大量实例等）

vml+flashVML

带tooltip的js+vml曲线图示例

vml 教程实例教程实例

VML极道教程 vml学习

vml极道教程经典教程

VML绘制的曲线图 实例源代码

VML极道教程(IE打开)

VML极道教程+VML开发工具

Javascript + VML + SVG 工作流设计器

VML极道教程.VML极道教程.

think in vml

VML.rar_VML_javascript_javascript 教程

【数值分析干货】第四章 非线性方程组求根

说明一下由TPL0501（SPI通信），STM32F103C8T6，AHT10（I2C通信），ESP8266模块（串口通信），MQTT协议，OLED显示屏（I2C通信），两按键构成的高精度可调数字电阻模块中TPL0501的功能如何实现的

最新资源

用vml+JAVASCRIPT写的广东省各县分布图颜色可根据值而变

vml 极道教程详细的vml教程

VML绘制的曲线图实例源代码

【数值分析干货】第四章非线性方程组求根