有沒有在我的HTML代碼中的任何錯誤。它不產生預期的條形圖

h所有，這裏都是我的html代碼，當我聲明它作爲單個數據它工作正常。但是當我聲明它是一個二維數組。它不工作。有什麼問題。誰能幫我。這裏是錯誤代碼有沒有在我的HTML代碼中的任何錯誤。它不產生預期的條形圖

<!doctype html> 
<html> 
    <head> 
     <script type="text/javascript"> 
      window.onload=function() 
      { 
       var canvas=document.getElementById('mycanvas'); 
       var ctx=canvas.getContext('2d'); 
       var value=[[10,30,40,60,80],[10,20,30,40,50,90]]; 
       var width=50; 
       var currx=30; 

       var i = 0, j; 
       for(j=0;j<=1;j++) 
       { 
       var interval = setInterval(function(){ 

        if (i == value[j].length) 
        { 
         clearInterval(interval); 
         return; 
        } 
        var h=value[j][i]; 
        ctx.fillStyle="grey"; 
        ctx.fillRect(currx+2,canvas.height-h+1,width+2,h+2); 
        ctx.fillStyle="red"; 
        ctx.fillRect(currx,canvas.height-h,width,h);      
        currx+=60; 
        i++; 
       }, 2000); 
       } 

      }; 
     </script> 
    </head> 
    <body> 
     <canvas id="mycanvas" height="400" width="400" style="border:1px solid #c3c3c3;"> 
    </body> 
</html>

來源

2012-07-20 Praveen Singh

看j'的'的價值，它不是你認爲它是（這將是2） – 2012-07-20 10:55:50

你沒有這個問題明確讓你的意圖.. 。你是否想要做一些像http://jsfiddle.net/46Tvj/1/ – Prusse 2012-07-20 11:02:54

在你的代碼錯誤value[j] is undefined的發生是因爲j變量評估看重3後for循環結束。但是value數組的長度是2.以下面的代碼爲例來避免這個麻煩。

<!doctype html> 
<html> 
    <head> 
     <script type="text/javascript"> 
     window.onload=function() { 
      var canvas=document.getElementById('mycanvas'); 
      var ctx=canvas.getContext('2d'); 
      var graphInfo=[{data:[10,30,40,60,80,10],color:'red'},{data:[10,20,30,40,50,90],color:'grey'}]; 
      var width=45; 

      function getFunctionForTimeout(j){ 
       var i=0,currx=30,info=graphInfo[j],x5=j*5; 
       var fTimeout=function(){ 
        var h=Math.max(info.data[i]-x5,0); 
        ctx.fillStyle=info.color; 
        ctx.fillRect(currx+x5,canvas.height-h,width,h);      
        currx+=60; 
        i++; 
        if(i<info.data.length)setTimeout(fTimeout,2000); 
       }; 
       return fTimeout; 
      } 

      for(var j=graphInfo.length-1;j>=0;j--) { 
       setTimeout(getFunctionForTimeout(j),2000); 
      } 
     }; 
     </script> 
    </head> 
    <body> 
     <canvas id="mycanvas" height="400" width="400" style="border:1px solid #c3c3c3;"> 
    </body> 
</html>

來源

2012-07-20 11:06:16

http://jsfiddle.net/2ph2U/ – 2012-07-20 12:07:46

我不知道你在做什麼，你在代碼中。但這裏是問題，for循環變量j和我不會像你想象的那樣表現。

請嘗試下面的代碼。它會正確執行，但它可能不是你想要的結果。希望它能給出一個想法。

<!doctype html> 
<html> 
    <head> 
     <script type="text/javascript"> 
      window.onload=function() 
      { 
       var canvas=document.getElementById('mycanvas'); 
       var ctx=canvas.getContext('2d'); 
       var value=[[10,30,40,60,80],[10,20,30,40,50,90]]; 
       var width=50; 
       var currx=30; 

       var i = 0, j =0; 
       //for(j=0;j<=1;j++) 
       //{ 
       var interval = setInterval(function(){ 
if(j>1) 
{ 
clearInterval(interval); 
return; 
} 

        var h=value[j][i]; 
        ctx.fillStyle="grey"; 
        ctx.fillRect(currx+2,canvas.height-h+1,width+2,h+2); 
        ctx.fillStyle="red"; 
        ctx.fillRect(currx,canvas.height-h,width,h);      
        currx+=60; 
        i++; 
       }, 10); 
       //} 

      }; 
     </script> 
    </head> 
    <body> 
     <canvas id="mycanvas" height="400" width="400" style="border:1px solid #c3c3c3;"> 
    </body> 
</html>

來源

2012-07-20 10:57:59 Matt

這樣的事情，你的代碼工作併產生圖形。但這是我申請單個數組時得到的同一個圖。但現在的問題是我想實現多維數組 – 2012-07-20 11:06:56

更改值[j] [i]值[i] [j] – Matt 2012-07-20 11:15:00

這裏改變了代碼。測試它..在你的間隔功能

<script type="text/javascript"> 
    window.onload=function() 
    { 
     var canvas=document.getElementById('mycanvas'); 
     var ctx=canvas.getContext('2d'); 
     var value=[[10,30,40,60,80],[10,20,30,40,50,90]]; 
     var width=50; 
     var currx=30; 
     var i = 0, j; 
     for(j=0;j<=1;j++) 
     { 
     var interval = setInterval(function(){ 

      if (j == value[i].length) 
      { 
       clearInterval(interval); 
       return; 
      } 

      var h = value[i][j]; 
      ctx.fillStyle="grey"; 
      ctx.fillRect(currx+2,canvas.height-h+1,width+2,h+2); 
      ctx.fillStyle="red"; 
      ctx.fillRect(currx,canvas.height-h,width,h);      
      currx+=60; 
      i++; 
     }, 2000); 
     } 

    }; 
</script>

來源

2012-07-20 11:06:55

有沒有在我的HTML代碼中的任何錯誤。它不產生預期的條形圖

回答

相關問題