<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns:v>
<head>
<title> VML-Line </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
v\:*{behavior:url(#default#VML);}
</style>
</head>
<body>
<script language="JavaScript">
<!--
var data = "联想|1000;HTC|200;诺基亚|600;摩托罗拉|400;微软|300;三星|550;LG|300;Google|700";
var dataArr = data.split(';');
var oMinX = 100; // 最小的X坐标和Y坐标
var oMinY = 0;
var oMaxX = dataArr.length*85 + oMinX; // 坐标轴的最大延伸
var oMaxY = 0;
//坐标的结束点
var startX = 100;
var startY = 0;
// 坐标起始点
var beginPx = oMinX;
var beginPy = oMaxY;
var s = "";
// 线的颜色
var color = "";
// 计算最小的Y坐标
var a = parseInt(dataArr[0].split('|')[1]);
// 最大的Y坐标
var b = parseInt(dataArr[0].split('|')[1]);
for (var i=0;i<dataArr.length ;i++ )
{
if (a > parseInt(dataArr[i].split('|')[1]))
{
a = parseInt(dataArr[i].split('|')[1]);
}
if (b < parseInt(dataArr[i].split('|')[1]))
{
b = parseInt(dataArr[i].split('|')[1]);
}
}
// 最小的Y坐标
oMinY = (a/10)*3 - 20; // 多出一个箭头的长度，所以又减去了20
// 最大的Y坐标
oMaxY = (b/10)*3 + 100; // 只要保证最大的Y坐标大于 (b / 10)*3即可，最大Y坐标越大，效果越明细。
beginPy = oMaxY; // 起始位置(y)
// 画x坐标
document.writeln('<v:line from="'+oMinX+'px,'+oMaxY+'px" to="'+oMaxX+'px,'+oMaxY+'"px" strokecolor="green"><v:Stroke dashstyle="Solid" endarrow="classic"/></v:line><span style="top:'+oMaxY+'px;left:'+oMaxX+'px;position:absolute;">分类</span>');
// 画y坐标
document.writeln('<v:line from="'+oMinX+'px,'+oMaxY+'px" to="'+oMinX+'px,'+oMinY+'px" strokecolor="green"><v:Stroke dashstyle="Solid" endarrow="classic"/></v:line><span style="top:'+oMinY+'px;left:'+oMinX+'px;position:absolute;">数量</span>');
for (var i=0;i<dataArr.length ;i++ )
{
// 得到某一个分类数据
var product = dataArr[i].split('|')[0];
var number = dataArr[i].split('|')[1];
// 计算坐标
startX = startX + 80;
startY = oMaxY-(parseInt(number) / 10) * 3;
color = "rgb(" + parseInt(Math.random()*255)+ "," + parseInt(Math.random()*255) + "," + parseInt(Math.random()*255) + ")";
document.writeln("<v:line from='" + beginPx + "px," + beginPy + "px' to='" + startX + "px," + startY + "px' strokeColor='"+color+"' strokeWeight=2></v:line>");
// 画一条平行于X轴的线(标识数量)
document.writeln("<v:line from='" + startX + "px," + startY + "px' to='" + oMinX + "px," + startY + "px' strokeColor='"+color+"' strokeWeight=1></v:line><span style='position:absolute;top:" + startY + "px;left:" + oMinX + "px;'>"+number+"</span>");
// 画一条平行于Y轴的线(标识种类)
document.writeln("<v:line from='" + startX + "px," + startY + "px' to='" + startX + "px," + oMaxY + "px' strokeColor='"+color+"' strokeWeight=1></v:line><span style='position:absolute;top:" + oMaxY + "px;left:" + startX + "px;'>"+product+"</span>");
beginPx = startX;
beginPy = startY;
}
//-->
</script>
</body>
</html>
效果图：
相关推荐
1. **元素**：VML中的图形由不同的元素组成，如`<v:rect>`（矩形）、`<v:line>`（直线）、`<v:polyline>`（多边形）和`<v:arc>`（弧线）等。每个元素都具有特定的属性来定义形状、大小、位置和样式。 2. **属性**：...
### VML技术简明教程 #### 一、VML简介 VML（Vector Markup Language）是一种用于在Web页面上绘制矢量图形的技术。它是由微软在1999年之前推出的一种浏览器图形渲染技术，并且被集成到了IE5及以后的版本中。通过...
VML使用一系列的形状标签，如`<rect>`（矩形）、`<circle>`（圆形）和`<line>`（线条）等，来绘制图形。 2. **图形绘制**：教程会详细解释如何使用VML指令来绘制不同类型的图形，包括直线、曲线、多边形、圆形、...
2. **<v:line>**: 用于绘制直线，有开始点和结束点。 3. ****: 创建矩形，可以通过设置`width`和`height`属性定义大小，`fill`和`stroke`属性控制填充色和边框。 4. ****: 画圆或椭圆，通过`width`和`height`决定其...
除了矩形，`<v:line>`可用于绘制线条，`<v:polyline>`和`<v:path>`则提供了更复杂的线条和路径绘制功能。这些元素的属性类似，都是通过XML属性来控制图形的不同视觉效果。 ### 三、VML与SVG的对比 SVG是另一种用于...
VML（Vector Markup Language）是一种用于在网页上呈现矢量图形的标记语言，尤其在早期的Internet Explorer浏览器中被广泛使用。它通过XML扩展来创建和控制图形，从而实现复杂和高质量的图形显示。以下是对VML技术...
1. **VML的基本结构**：VML的文档结构类似于XML，由一系列的形状元素（如`<rect>`, `<circle>`, `<line>`等）组成，每个元素都有自己的属性来定义形状的外观和行为。例如，`<rect>`元素用于绘制矩形，可以通过`width...
在VML中，可以使用`<v:oval>`、`<v:rect>` 和 `<v:line>` 结合数据来构造表、字段和关联。通过动态调整图形大小和位置，可以适应各种复杂的数据模型。 曲线图和柱状图则常用于数据可视化。曲线图（折线图）可以用 `...
JavaScript与VML结合，可以实现动态、交互式的图形绘制，比如在本实例中，我们将探讨如何利用这两种技术在浏览器中绘制动态曲线图。 在浏览器的早期版本，特别是那些不支持SVG（Scalable Vector Graphics）或者...
- **线条（Line）**：VML支持直线的绘制，可以通过起点和终点坐标来定义。 - **曲线（Path）**：使用贝塞尔曲线实现平滑的曲线路径，可以绘制出复杂的图形。 - **形状（Shape）**：包括矩形（Rect）、椭圆（Oval...
1. **VML结构**：VML基于XML，通过定义一系列的形状元素（如`<shape>`, `<rect>`, `<line>`, `<polyline>`, `<arc>`等）来绘制图形。每个元素都有特定的属性，如位置、尺寸、颜色、填充和描边样式等。 2. **VML API...
3. `Line` - 直线 4. `Polyline` - 多边形线 5. `Curve` - 曲线 6. `Rect` - 矩形 7. `Roundrect` - 圆角矩形 8. `Oval` - 椭圆 9. `Arc` - 弧形 10. `Group` - 组合图形 除了图形绘制，VML还支持文本集成、超链接...
1. **形状（Shapes）**：包括矩形（`<vml:rect>`）、圆形（`<vml:oval>`）、线条（`<vml:line>`）、曲线（`<vml:arc>`）等基本形状。 2. **路径（Paths）**：使用`<vml:path>`元素，通过路径数据（如`m`移动、`l`...
这包括理解VML的基本结构，比如`<v:shape>`用于定义形状，`<v:line>`用于绘制直线，`<v:textbox>`用于添加文本等。此外，还要掌握如何通过CSS来控制这些图形的样式，以及如何利用JavaScript进行动态交互，比如响应...
例如，你可以使用`<v:line>`创建直线，`<v:oval>`创建圆形，`<v:rect>`创建矩形。每个形状都可以通过`style`属性来设置填充颜色、边框宽度和颜色等样式。另外，`<v:path>`元素可以用来绘制更复杂的路径，包括贝塞尔...
VML（Vector Markup Language）是一种基于XML的矢量图形语言，主要在Internet Explorer浏览器中使用，用于在网页上创建和展示复杂的图形。以下是对标题、描述和标签中提及的VML绘画知识点的详细解释： 1. **饼图...
VML还提供了多种形状对象，如`Rect`(矩形)，`RoundRect`(圆角矩形)，`Oval`(圆形)，`Line`(直线)，`PolyLine`(多边形折线)和`Image`(图像)等，可以创建出丰富的图形效果。 在后续的教程中，将会进一步探讨如何利用`...
VML是XML的子集，因此它使用XML的结构化语法，允许开发者创建可缩放的矢量图形。在本实例中，我们将深入探讨如何使用VML来实现画流程图。 流程图是一种可视化表示流程或工作流的工具，它通过各种形状和连接线来展示...
VML中的基本形状包括线（line）、矩形（rect）、椭圆（oval）、圆（circle）等。路径（path）元素则允许创建更复杂的形状，通过指令序列如“M”（move到）、“L”（直线到）、“C”（三次贝塞尔曲线到）等来定义路径...
`<v:line>`用于绘制直线；`<v:textbox>`则用于添加文本内容。每个Vml元素都有自己的样式属性，比如颜色、填充、描边等，可以使用CSS来控制。 在Vml中，`<v:group>`标签用于组合多个图形元素，方便进行整体操作，如...