VML之Line

来源：互联网发布：ipadair2清理垃圾软件编辑：程序博客网时间：2024/06/06 05:16
<!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>
效果图：