# VML之Line

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns:v>
<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>

<body>

<script language="JavaScript">
<!--
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>


©️2019 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客