数据可视化图表生成-优快云博客

本文链接：https://blog.youkuaiyun.com/qincidong/article/details/6822413
<!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>
效果图：
VML之Line
