酒吧没有出现在图表上

时间:2014-12-11 03:59:39

标签: javascript html arrays graph

此HTML和Javascript组合应该形成条形,这些条形是在提示中输入的数字相对于彼此的高度。输入数字时,条形图不显示。为了使条形显示,我需要在代码中修复什么?



"use strict";

window.onload=function()
{
	var userValue;
	var i;
	var j;
	var k;
	var error;
	var correct;

	j = 0;
	k = 0;

	error = new Array(j);
	correct = new Array(k);
	userValue = window.prompt("Insert values separated by comma, whitespace, or both.");
	userValue = packArray(trimElements(toArray(userValue, " ,")));



	for(i = 0; i < userValue.length; i++)
	{
		if(isNumeric(userValue[i]) === false)
		{
			error[j] = userValue[i];
			j = j + 1;
		}

		else
		{
			correct[k] = userValue[i];
			k = k + 1;
		}
	}

	if(error.length > 0)
	{
		window.alert("Error: " + error);
	}

	else
	{
		createGraph(userValue, document.getElementById("positiveQuadrant"));
	}
};

function toArray(data, delimiters)

{
	var locArray;
	var result;
	var i;
	var dataArray;
	var start;

	locArray = findPositions(data, delimiters);
	result = "";
	i = 0;

	if(data === null)
	{
		data = "";
	}

	else
	{
		result = result + data;
	}

	if(delimiters === null)
	{
		delimiters = "";
	}

	else
	{
		result = result + delimiters;
	}

	if(delimiters.length === 0)
	{
		delimiters = delimiters + " \t\r\n\f";
	}

	dataArray = new Array(locArray.length + 1);
	start = 0;

	while(i < dataArray.length)
	{
		dataArray[i] = data.substring(start, locArray[i]);
		start = locArray[i] + 1;
		i = i + 1;
	}
return dataArray;
}

function findPositions(someString, lookForThis)
{
	var i;
	var result;
	var count;

	result = new Array(count);
	i = 0;
	count = 0;

	while(i < someString.length)
	{
		if(lookForThis.indexOf(someString.charAt(i)) >= 0)
		{
			result[count] = someString.indexOf(lookForThis.charAt(i), (i + 1) - 1);
			count = count + 1;
		}
		i = i + 1;
	}
	return result;
}

function trimElements(array)
{
	var i;
	var trimArray;

	trimArray = new Array(array.length);
	i = 0;

	while(i < array.length)
	{
		trimArray[i] = trim(array[i]);
		i = i + 1;
	}
	return trimArray;
}

function packArray(array)
{
	var i;
	var count;
	var packedArray;

	i = 0;
	count = 0;
	packedArray = new Array(count);

	while(i < array.length)
	{
		if(array[i] !== null && array[i] !== "")
		{
			packedArray[count] = array[i];
			count = count + 1;
		}
		i = i + 1;
	}
return packedArray;
}

function convertToNumber(array)
{
	var i;
	var result;

	i = 0;
	result = "";

	while(i < array.length)
	{
		if(isNumeric(array[i]) === true)
		{
			array[i] = Number(array[i]);
		}

		else
		{
			result = result + " " + array[i];
		}
		i = i + 1;
	}
return trim(result);
}

function trim(data)
{
	var start;
	var whitespace;
	var end;
	var result;

	if(typeof data==="string")
		{
			whitespace=" \n\r\t\f";
			start=0;
	}

	else
	{
		result=data;
	}

	while((start<data.length)&&(whitespace.indexOf(data.charAt(start))))
	{
		start=start+1;
	};
	end=data.length-1;

	while((end>=0)&&(whitespace.indexOf(data.charAt(end))))
	{
		end=end-1;
	};

	if(end<start)
	{
		result="";
	}
	else
	{
		result=data.substring(1+start,end);
	}
		return result;
};

function createHTMLElement(elementType, id, classInfo, content)
{
	if(elementType===null)
	{
		elementType="";
	};

	trim(elementType);

	if(id===null)
	{
		id="";
	}

	trim(id);

	if(id.length>0)
	{
		id=" "+"id="+'"'+id+'"'+" ";
	};

	if(classInfo===null)
	{
		classInfo="";
	}

	trim(classInfo);

	if(classInfo.length>0)
	{
		classInfo=" "+ "class="+'"'+classInfo+'"';
	}

	if(content===null)
	{
		content="";
	};

	trim(content);

	return '<' +elementType +
	id + classInfo +
	'>' + content +
	'</' + elementType + '>';
};

function isNumeric(data)
{
	return isNaN(data);
};

function getRandomInteger(upperLimit)
{
	return Math.floor(Math.random()*(upperLimit+1));
};

function getRandomRGB()
{
	var blue;
	var green;
	var red;
	red=getRandomInteger(255);
	blue=getRandomInteger(255);
	green=getRandomInteger(255);
	return"rgb("+red+","+green+","+blue+")";
};

function createScaledArray(array, scaleFactor)
{
	var i;
	var scaledArray;

	scaledArray = new Array(array.length);

	for(i = 0; i < array.length; i++)
	{
		scaledArray[i] = (array[i] / scaleFactor);
	}
	return scaledArray;
}


function createGraph(array, quadReference)
{

	var i;
	var loc;
	var scaleFactor;
	var scaleArray;
	var html;
	var element;
	var elementTop;

	if(array.length > 0)
	{
		loc = 0;

		for(i = 0; i < array.length; i++)
		{
			if(Number(array[i]) > Number(array[loc]))
			{
				loc = i;
			}
		}

		scaleFactor = Math.abs(array[loc]);
		scaleArray = createScaledArray(array, scaleFactor);
		html = "";

		for(i = 0; i < scaleArray.length; i++)
		{

			html = html + createHTMLElement("div", "columnContainer", "columnContainer", createHTMLElement("div", "coloredArea" + i, "coloredArea", createHTMLElement("div", "dataValue", "dataValue", array[i])));
		}

		quadReference.innerHTML = html;

		for(i = 0; i < scaleArray.length; i++)
		{
			element = document.getElementById("coloredArea" + i);
			elementTop = (100 - (scaleArray[i] * 100));

			if(elementTop > 100)
			{
				elementTop = elementTop + (scaleArray[i] * 100);
			}

			element.style.top = elementTop + "%";
			element.style.height = Math.abs(scaleArray[i] * 100) + "%";
			element.style.backgroundColor = getRandomRGB();
		}
	}
}
&#13;
<!DOCTYPE html>

<html lang="en">
<head>
<title> Graphing </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<script src="Graphing.js" type="text/javascript"></script>
<style type="text/css">

{
border	:	0;
margin	:	0;
padding	:	0;
}

body
{
font-family	:	"Times New Roman", serif;
font-size	:	12pt;
}

.positiveQuadrant
{
height:12em;
width:2em;
border-right:solid black 3px;
}

.negativeQuadrant
{
position:relative;
height:2em;
width:22em;
border-top:solid black 3px;
bottom:2em;
}

.columnContainer
{
position: relative;
float: left;
height: 10em;
width: 1.5em;
margin: 1px;
}

.coloredArea
{
position: relative;
background-color: red;
}

.dataValue
{
font-size: 12pt;
text-align: center;
position: relative;
top: -16px;
}

</style>
</head>
<body>
<div class ="positiveQuadrant" id="positiveQuadrant"></div>
<div class = "negativeQuadrant" id ="negativeQuadrant"></div>
</body>
</html>
&#13;
&#13;
&#13;

0 个答案:

没有答案