我终于设法创建了一个符合条件的用户输入数组，现在我想将该数组制作成一个数组，该数组将用户的所有输入都转换成一个新的数组（稍后将作图器）在所有用户输入出现的频率方面，仅找出如何获取用户输入数组就麻烦了！
这是我想更改的当前算法：
function getGraph() {
var i = 0;
var results;
var dicePoss = [1,2,3,4,5,6]
var finished = false;
var newArr ="";
results = document.getElementById('texts').value;
// gets input e.g 623653246325435432156545352516
var resultsArr = results.split("");
//supposed to split input into an array e.g 6,2,3,6,5,3,2,4,6,3,2,5 note commas are invisible and just to show they are an array
document.getElementById('x-axis').innerHTML = dicePoss;
//irrelevant to current algorithm but to be used with x-axis on graph later
while (!finished && i < resultsArr.length) { //while the function is not finished AND the iteration is done 30 times
if (resultsArr[i] <= 6 && resultsArr[i] > 0) { //resultsArr[i] defines the character e.g input 2 currently being iterated in the array
newArr += resultsArr[i] + ","; //adds an element to the new array which is checked to meet the IF statement
i++; //iterates continuously
document.getElementById('y-axis').innerHTML = newArr;
}
else {
finished = true;
}
if (finished == true){
resultsArr = [];
dicePoss = [];
document.getElementById('reject').innerHTML = "Please enter a valid input between 1-6!";
}
}
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Six Revisions is a blog that shares useful information about web development and design, dedicated to people who build websites." />
<title>6 Sided Die Simulator</title>
<script type="text/JavaScript">
function drawOne(a, n) {
// draws the rectangle for one of the values
// a is a counter for the column
// n is the value being graphed
con.fillStyle = 'red';
con.fillRect(500 + 60 * a, 400, 40, -n);
// write the value below the column
con.strokeText(n, 500 + 40 * a, 440);
}
</script>
</head>
<h1>Six Sided Die Simulator</h1>
<canvas id="myCanvas" width="1200" height="500"style="border:1px solid #FF0000;">Canvas is not supported
</canvas>
<body>
<p id="y-axis">Frequency of die rolls(results)</p>
<p id="x-axis">Dice Possible Rolls between 1-6</p>
<p id="reject"></p>
<input type="text" value="Enter diceroll" id="texts" style="width: 150px;" />
<br />
<input type="button" value="Display Column Graph" onclick="getGraph();">
</body>
</html>
答案 0 :(得分：0)
我也不理解这个问题，但是我想这个问题可以为您提供帮助。 counting-the-occurrences-frequency-of-array-elements
答案 1 :(得分：0)
我终于设法解决了这个问题，想知道是否有人可以帮助使用输出在画布上绘制柱形图？这是我到目前为止可以做的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Six Revisions is a blog that shares useful information about web development and design, dedicated to people who build websites." />
<title>6 Sided Die Simulator</title>
<script type="text/JavaScript">
function drawOne(a, n) {
// draws the rectangle for one of the values
// a is a counter for the column
// n is the value being graphed
con.fillStyle = 'blue';
con.fillRect(500 + 60 * a, 400, 40, -n);
// write the value below the column
con.strokeText(n, 500 + 40 * a, 440);
}
</script>
</head>
<h1>Six Sided Die Simulator</h1>
<canvas id="myCanvas" width="1200" height="500"style="border:1px solid #FF0000;">Canvas is not supported
</canvas>
<body>
<p id="y-axis">Frequency of die rolls(results)</p>
<p id="x-axis">Dice Possible Rolls between 1-6</p>
<input type="text" value="Enter diceroll" id="texts" style="width: 150px;" />
<br />
<input type="button" value="Display Column Graph" onclick="getGraph();">
<script>
function getGraph() {
var i = 0;
var results;
var dicePoss = [0,1,2,3,4,5,6]
var finished = false;
results = document.getElementById('texts').value;
// gets input e.g 623653246325435432156545352516
var resultsArr = results.split("");
resultsArr.sort();
//supposed to split input into an array e.g 6,2,3,6,5,3,2,4,6,3,2,5 note commas are invisible and just to show they are an array
document.getElementById('x-axis').innerHTML = dicePoss;
//irrelevant to current algorithm but to be used with x-axis on graph later
freq =[0,0,0,0,0,0,0];
var canvas = document.getElementById("myCanvas");
while (!finished && i < resultsArr.length) { //while the function is not finished AND the iteration is done 30 times
if (resultsArr[i] > 0 && resultsArr[i] < 7 ) {//resultsArr[i] defines the character e.g input 2 currently being iterated in the array
freq[resultsArr[i]]++; //adds an element to the new array which is checked to meet the IF statement
i++; //iterates continuously
//commence drawing graph on IF in the while loop
var con = c.getContext("2d");
con.strokeStyle = 'black';
drawOne(dicePoss[i], freq[i])
con.stroke();
document.getElementById('y-axis').innerHTML = freq; //prints on ID the value of function results
}
else {
finished = true;
}
if (finished == true){
//reject message to display in the middle of the graph
var ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Please enter a valid input between 1 - 6!", canvas.width/2, canvas.height/2);;
}
}
}
//Begin Drawing Graph
var c = document.getElementById("myCanvas");
var con = c.getContext("2d");
con.strokeStyle = 'black';
// move to the bottom left
for(var d=0; d < freq.length; d++)
{
drawOne( dicePoss[d], freq[d])
}
con.stroke();
</script>
</body>
</html>