因为循环过早结束
For Loop ended prematurely in
[编辑] 包括该方法的完整代码供您阅读。
function drawHPicto(form) {
var rowNum = form.Row.value;
var colNum = form.Column.value;
//The data that is to be represented on the chart
var data = [];
var label = [];
var chartTitle = form.subtitle.value;
if (colNum == 2) {
if (rowNum == 2) {
data.push([parseFloat(form.r1c1.value),parseFloat(form.r1c2.value)]);
data.push([parseFloat(form.r2c1.value),parseFloat(form.r2d2.value)]);
label.push(form.title1.value);
label.push(form.title2.value);
}
else if (rowNum == 3) {
data.push([parseFloat(form.r1c1.value),parseFloat(form.r1c2.value)]);
data.push([parseFloat(form.r2c1.value),parseFloat(form.r2d2.value)]);
data.push([parseFloat(form.r3c1.value),parseFloat(form.r3c2.value)]);
label.push(form.title1.value);
label.push(form.title2.value);
label.push(form.title3.value);
}
else if (rowNum == 4) {
data.push([parseFloat(form.r1c1.value),parseFloat(form.r1c2.value)]);
data.push([parseFloat(form.r2c1.value),parseFloat(form.r2d2.value)]);
data.push([parseFloat(form.r3c1.value),parseFloat(form.r3c2.value)]);
data.push([parseFloat(form.r4c1.value),parseFloat(form.r4c2.value)]);
label.push(form.title1.value);
label.push(form.title2.value);
label.push(form.title3.value);
label.push(form.title4.value);
}
else if (rowNum == 5) {
data.push([parseFloat(form.r1c1.value),parseFloat(form.r1c2.value)]);
data.push([parseFloat(form.r2c1.value),parseFloat(form.r2d2.value)]);
data.push([parseFloat(form.r3c1.value),parseFloat(form.r3c2.value)]);
data.push([parseFloat(form.r4c1.value),parseFloat(form.r4c2.value)]);
data.push([parseFloat(form.r5c1.value),parseFloat(form.r5c2.value)]);
label.push(form.title1.value);
label.push(form.title2.value);
label.push(form.title3.value);
label.push(form.title4.value);
label.push(form.title5.value);
}
else if (rowNum == 6) {
data.push([parseFloat(form.r1c1.value),parseFloat(form.r1c2.value)]);
data.push([parseFloat(form.r2c1.value),parseFloat(form.r2d2.value)]);
data.push([parseFloat(form.r3c1.value),parseFloat(form.r3c2.value)]);
data.push([parseFloat(form.r4c1.value),parseFloat(form.r4c2.value)]);
data.push([parseFloat(form.r5c1.value),parseFloat(form.r5c2.value)]);
data.push([parseFloat(form.r6c1.value),parseFloat(form.r6c2.value)]);
label.push(form.title1.value);
label.push(form.title2.value);
label.push(form.title3.value);
label.push(form.title4.value);
label.push(form.title5.value);
label.push(form.title6.value);
}
}
else {
if (rowNum == 2) {
data.push(parseFloat(form.r1c1.value));
data.push(parseFloat(form.r2c1.value));
label.push(form.title1.value);
label.push(form.title2.value);
}
else if (rowNum == 3) {
data.push(parseFloat(form.r1c1.value));
data.push(parseFloat(form.r2c1.value));
data.push(parseFloat(form.r3c1.value));
label.push(form.title1.value);
label.push(form.title2.value);
label.push(form.title3.value);
}
else if (rowNum == 4) {
data.push(parseFloat(form.r1c1.value));
data.push(parseFloat(form.r2c1.value));
data.push(parseFloat(form.r3c1.value));
data.push(parseFloat(form.r4c1.value));
label.push(form.title1.value);
label.push(form.title2.value);
label.push(form.title3.value);
label.push(form.title4.value);
}
else if (rowNum == 5) {
data.push(parseFloat(form.r1c1.value));
data.push(parseFloat(form.r2c1.value));
data.push(parseFloat(form.r3c1.value));
data.push(parseFloat(form.r4c1.value));
data.push(parseFloat(form.r5c1.value));
label.push(form.title1.value);
label.push(form.title2.value);
label.push(form.title3.value);
label.push(form.title4.value);
label.push(form.title5.value);
}
else if (rowNum == 6) {
data.push(parseFloat(form.r1c1.value));
data.push(parseFloat(form.r2c1.value));
data.push(parseFloat(form.r3c1.value));
data.push(parseFloat(form.r4c1.value));
data.push(parseFloat(form.r5c1.value));
data.push(parseFloat(form.r6c1.value));
label.push(form.title1.value);
label.push(form.title2.value);
label.push(form.title3.value);
label.push(form.title4.value);
label.push(form.title5.value);
label.push(form.title6.value);
}
}
var checkNum = $('input[name=showNumberPicto]:checked').val();
var checkLabel = $('input[name=showLabelPicto]:checked').val();
// clear graph
RGraph.Clear(document.getElementById('cvs'));
RGraph.ObjectRegistry.Clear(document.getElementById('cvs'));
var maxValue = Math.max.apply(Math, data);
var minValue = Math.min.apply(Math, data);
var maxLimit = Math.floor(maxValue/4);
var minLimit = Math.floor(minValue/4);
// set var for javascript to validate
setCurrentMin = minLimit;
setCurrentMax = maxLimit;
form.intDiv.min = minLimit;
form.intDiv.max = maxLimit;
if(form.intDiv.value == 1){
form.intDiv.value = Math.floor((maxLimit+minLimit)/2);
if (form.intDiv.value == 0){form.intDiv.value=1;};
var divider = form.intDiv.value;
}else{
// check input for validation within limit
if (form.intDiv.value>setCurrentMax) {
form.intDiv.value = setCurrentMax;
}else if (form.intDiv.value < setCurrentMin) {
form.intDiv.value = setCurrentMin;
}
if ((maxValue/form.intDiv.value) > 7){
form.intDiv.value = setCurrentMax;
}
var divider = form.intDiv.value;
//alert(divider);
}
//alert (maxValue);
//var drawCanvas = document.getElementById('cvs');
//var context = drawCanvas.getContext('2d');
var c=document.getElementById("cvs");
var ctx=c.getContext("2d");
var img = new Image();
img.src="assets/orange.png";
img.onload = function(){
for (var i=0;i<data.length;i++)
{
var drawRepeat = Math.floor((data[i]/divider));
alert(data.length);
var reminder = Math.round(((data[i]%divider)/divider)*10);
var getDecimal = (10-reminder)/10;
var posY = ((i*30)+10);
var posX = ((drawRepeat*30)+30);
//ctx.save();
ctx.drawImage(img,posX,posY);
ctx.fillStyle= "#FFF";
ctx.fillRect(posX,posY,30,getDecimal*30);
for (var j=0;j<drawRepeat;j++){
var yPos = ((i*30)+10);
var xPos = ((j*30)+30);
ctx.drawImage(img,xPos,yPos);
}
if (checkLabel == "1") {
ctx.fillStyle= "#000";
ctx.fillText(label[i],15,((i*30)+15))
}else{
ctx.fillText("")
}
if (checkNum == "1") {
ctx.fillStyle= "#000";
ctx.fillText(data[i],260,((i*30)+15))
}else{
ctx.fillText("")
}
}
}
}
所以问题出在 img.onload 发生时的 for 循环中。
img.onload = function(){
for (var i=0;i<data.length;i++)
{
var drawRepeat = Math.floor((data[i]/divider));
alert(data.length);
var reminder = Math.round(((data[i]%divider)/divider)*10);
var getDecimal = (10-reminder)/10;
var posY = ((i*30)+10);
var posX = ((drawRepeat*30)+30);
//ctx.save();
ctx.drawImage(img,posX,posY);
ctx.fillStyle= "#FFF";
ctx.fillRect(posX,posY,30,getDecimal*30);
for (var j=0;j<drawRepeat;j++){
var yPos = ((i*30)+10);
var xPos = ((j*30)+30);
ctx.drawImage(img,xPos,yPos);
}
if (checkLabel == "1") {
ctx.fillStyle= "#000";
ctx.fillText(label[i],15,((i*30)+15))
}else{
ctx.fillText("")
}
if (checkNum == "1") {
ctx.fillStyle= "#000";
ctx.fillText(data[i],260,((i*30)+15))
}else{
ctx.fillText("")
}
}
}
我使用相同的循环以垂直图形方式绘制图像，并且效果很好。当我使用它 for 循环绘制水平图时，for 循环在 i=0 处结束。我追踪返回值 3 的 data.length，因此 for 循环应该运行 3 个循环，但它在第一个循环处停止。有人对此有解决方案吗？我快疯了。
在你的代码中，你有：
> if (colNum == 2) {
> if (rowNum == 2) {
> data.push([parseFloat(form.r1c1.value),parseFloatform.r1c2.value)]);
> data.push([parseFloat(form.r2c1.value),parseFloat(form.r2d2.value)]);
> ---------------------------------------------------------^
名称为 r2d2 的窗体控件可能不存在并导致不正确的结果。
if (checkLabel == "1") {
ctx.fillStyle= "#000";
ctx.fillText(label[i],15,((i*30)+15))
}else{
ctx.fillText("",15,((i*30)+15))
}
设法找到问题所在，以前在 else 语句中我设置 ctx.fillText（"）;没有 x 和 y 坐标，显然停止了循环。
相关文章：
- 为什么“;未定义的“;在JavaScript中结束循环
- 循环结束/推送到数组之前在页面上呈现EJS
- 希望日期开始结束于while循环中的一个房间id的一个数组
- 使用while循环+break是一种可接受的方式;goto;手术的结束
- 用于循环的 Javascript 过早结束
- 如何在javascript中循环结束后执行语句
- 在for循环中另一个音频结束后播放一段时间的音频
- addclass循环结束时调用函数
- Sequelize等待，直到循环通过回调结束
- Node/Express - 如何等到 For 循环结束再使用 JSON 进行响应
- 如何使用事件处理程序连续循环遍历数组列表(从结束恢复到开始）
- 同时循环承诺，直到另一个承诺结束
- 破;不结束循环
- 因为循环过早结束
- jQuery函数使用包含setTimeout的每个循环调用自身，立即发生，而不是在结束时发生
- 在javascript中使用什么循环，在结束之前运行某个代码
- Javascript-在while循环结束后仅显示数组中的最后一个值
- 返回HTML结束循环过早
- 过期或超时在X秒后永不结束循环
- JS动画结束循环，希望在不使用的情况下连续循环;setInterval/setTimout
