VML之Rect

最新推荐文章于 2019-04-27 23:49:00 发布

luckystar2008

最新推荐文章于 2019-04-27 23:49:00 发布

阅读量1.1k

点赞数 1

文章标签： generator javascript behavior html htc google

本文链接：https://blog.csdn.net/qincidong/article/details/6822896

版权

Front End 专栏收录该内容

119 篇文章 0 订阅

订阅专栏

<!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>

效果图：