<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns:v>
<head>
<title> VML-Rect </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 width = 30;
//最小的坐标原点x
var oMinX = 100;
// 最大的坐标原点x
var oMaxX = 100;
// 最小的坐标原点y
var oMinY = 0;
// 最大的坐标原点y
var oMaxY = 0;
// 保存上一个坐标点
var lastX;
var lastY;
// 柱行图颜色
var sColor;
// 计算最大的坐标原点y
// 临时变量a
var a = parseInt(dataArr[0].split('|')[1]);
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]);
}
}
oMaxY = (a/10)*3 + 50;
// 最小的y
oMinY = (b/10)*3 - 50; // 多出一个箭头的长度
// 计算最大的X
oMaxX = oMinX + (dataArr.length+1)*2*width + 20; // 多出一个箭头的长度
lastX = oMinX;
lastY = oMaxY;
// 画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 j=0;j<dataArr.length ;j++ )
{
//产生随机颜色
sColor = "rgb(" + parseInt(Math.random()*255)+ "," + parseInt(Math.random()*255) + "," + parseInt(Math.random()*255) + ")";
// 种类
var kind = dataArr[j].split('|')[0];
// 数量
var number = parseInt(dataArr[j].split('|')[1]);
var y = (number / 10) * 3;
var x = j==0?lastX+width:lastX + width*2;
// 画矩形
document.writeln("<v:rect style='position:absolute;left:"+x+";top:"+ (oMaxY-y + oMinY) +";width:"+width+";height:"+y+"' fillColor='"+sColor+"' strokeWeight=1></v:rect><span style='position:absolute;left:"+ x+";top:"+(oMaxY+20)+";'>"+kind+"</span>");
//画一条平行于X轴的线(标识数量)
document.writeln('<v:line from=' + x + ',' + (oMaxY-y) + ' to=' + oMinX + ',' + (oMaxY-y) + ' strokeColor="'+sColor+'"></v:line><span style="position:absolute;top:' + (oMaxY-y) + ';left:' + oMinX + '">'+number+'</span>');
lastX = x;
}
//-->
</script>
</body>
</html>
效果图：
相关推荐
VML文档由一系列的形状元素组成，如矩形（rect）、线条（line）、曲线（polyline）和路径（path）。每个元素都有自己的属性来定义形状、颜色、填充等。例如，`<rect>`元素用来绘制矩形，通过设置`width`、`height`、...
1. **形状（Shapes）**：包括矩形（`<vml:rect>`）、圆形（`<vml:oval>`）、线条（`<vml:line>`）、曲线（`<vml:arc>`）等基本形状。 2. **路径（Paths）**：使用`<vml:path>`元素，通过路径数据（如`m`移动、`l`...
VML使用一系列的形状标签，如`<rect>`（矩形）、`<circle>`（圆形）和`<line>`（线条）等，来绘制图形。 2. **图形绘制**：教程会详细解释如何使用VML指令来绘制不同类型的图形，包括直线、曲线、多边形、圆形、...
1. **VML的基本结构**：VML的文档结构类似于XML，由一系列的形状元素（如`<rect>`, `<circle>`, `<line>`等）组成，每个元素都有自己的属性来定义形状的外观和行为。例如，`<rect>`元素用于绘制矩形，可以通过`width...
1. **VML形状**：VML中的基本形状包括`<shape>`、`<rect>`、`<oval>`、`<line>`等。例如，`<rect>`用于绘制矩形，`<oval>`用于绘制椭圆或圆形，`<line>`则用于绘制直线。 ```xml <vml:rect id="myRect" ...
1. **VML结构**：VML基于XML，通过定义一系列的形状元素（如`<shape>`, `<rect>`, `<line>`, `<polyline>`, `<arc>`等）来绘制图形。每个元素都有特定的属性，如位置、尺寸、颜色、填充和描边样式等。 2. **VML API...
3. **<v:rect>**: 创建矩形，可以通过设置`width`和`height`属性定义大小，`fill`和`stroke`属性控制填充色和边框。 4. ****: 画圆或椭圆，通过`width`和`height`决定其尺寸，`filled`属性控制是否填充颜色。 5. ***...
标题"vml.zip_VML_vml ie"表明这个压缩包包含的是与VML相关的资源，特别是针对Internet Explorer的实现。这个压缩包可能是一个工具或者库，用于在IE浏览器上创建和展示矢量图形，比如流程图。 描述中的“vml画图...
例如，绘制一个矩形，我们可能使用`<v:rect>`标签，并通过`fillcolor`、`strokecolor`等属性定义颜色，通过`stroked`和`filled`属性控制是否描边和填充。 对于圆角表格，我们首先创建一个普通的HTML表格，然后为每...
1. **形状声明**：每个VML形状都包含在`<v:shape>`标签内，通过`type`属性定义形状类型，如`type="rect"`表示矩形。 2. **尺寸与位置**：`width`和`height`属性定义形状的大小，`left`和`top`定义位置。 3. **样式...
在VML中，可以使用`<v:oval>`、`<v:rect>` 和 `<v:line>` 结合数据来构造表、字段和关联。通过动态调整图形大小和位置，可以适应各种复杂的数据模型。 曲线图和柱状图则常用于数据可视化。曲线图（折线图）可以用 `...
在这个场景下，"ASP结合VML生成柱状图"是指使用ASP来创建和展示基于VML（Vector Markup Language）的柱状图表。 VML是一种基于XML的矢量图形标记语言，允许在网页上绘制和显示复杂的图形，包括柱状图。在HTML文档中...
VML，全称Vector Markup Language，是一种用于在网页上呈现矢量图形的标记语言。它是在HTML或XML文档中嵌入的，允许开发者创建和控制复杂的矢量图形，这些图形可以无限放大而不会失真，非常适合制作图表、流程图、...
例如，`Rect`（矩形）、`RoundRect`（圆角矩形）、`Oval`（椭圆）、`Line`（直线）、`PolyLine`（多边形线）和`Image`（图像）等。 - `Shape`对象的属性可以内联定义或以子元素的形式分开定义，如`StrokeColor`和`...
- **形状（Shape）**：包括矩形（Rect）、椭圆（Oval）和圆形（Circle）等基本形状。 - **文本（Text）**：支持在图形中嵌入文本，并能调整字体、大小、颜色等属性。 3. **样式和属性** VML中的图形可以通过CSS...
6. `Rect` - 矩形 7. `Roundrect` - 圆角矩形 8. `Oval` - 椭圆 9. `Arc` - 弧形 10. `Group` - 组合图形 除了图形绘制，VML还支持文本集成、超链接以及通过JavaScript等脚本语言实现的交互和动画效果。例如，可以...
VML，全称为Vector Markup Language，是一种用于在网页上绘制矢量图形的标记语言。它允许开发者使用XML语法创建和操作图形，这些图形可以无限缩放而不会失真，非常适合制作图表、流程图和其他需要精确控制图形的场景...
例如，你可以使用`<v:line>`创建直线，`<v:oval>`创建圆形，`<v:rect>`创建矩形。每个形状都可以通过`style`属性来设置填充颜色、边框宽度和颜色等样式。另外，`<v:path>`元素可以用来绘制更复杂的路径，包括贝塞尔...
例如，创建一个矩形可以使用`<vml:rect>`标签。 2. **柱状图（Bar Chart）** 柱状图是数据可视化中常用的一种方式，用于比较不同类别的数量或频率。在VML中，我们可以创建一系列的矩形条形来表示每个类别的值。每...
VML中的基本形状包括线（line）、矩形（rect）、椭圆（oval）、圆（circle）等。路径（path）元素则允许创建更复杂的形状，通过指令序列如“M”（move到）、“L”（直线到）、“C”（三次贝塞尔曲线到）等来定义路径...