畫布中的HTML5圖表

Question

我是新來的html5並嘗試在圖表中顯示一組代碼。它適用於線圖，但出於某種原因我不知道指數。這是我的代碼。

我的問題是，代碼中是否存在會破壞圖形的錯誤？（我確信代碼中存在一大堆錯誤）。我也有很多my code here。

提前感謝我收到的任何幫助。

<canvas id="graph5" width="400" height="300"></canvas> 

function generateTestData5() // generates the array 
{ 
    var data = []; 
    for(var i=0; i<300; i++){ 
     var sensfi = ((document.getElementById("f5").value)*(document.getElementById("xPos5").value)*(document.getElementById("f5").value))/((i*i*document.getElementById("sDI5").value)/(document.getElementById("rI5").value)); 
     data[i] = sensfi; 
    } 
    return data; 
} 

var graph; 
var xPadding = 40; 
var yPadding = 40; 

function getMaxY5() { 
    var data = generateTestData5(); 
    var max = 0; 

    for(var i = 0; i < data.length; i ++) { 
     if(data[i] > max) { 
      max = data[i]; 
     } 
    } 

    max += 10 - max % 10; 
    return max; 
} 

function getXPixel5(val) { 
    var data = generateTestData5(); 
    return ((graph.width() - 20)/data.length) * val + (20 * 1.5); 
} 

function getYPixel5(val) { 
    var data = generateTestData5(); 
    return graph.height() - (((graph.height() - 20)/getMaxY5()) * val) - 20; 
} 

function draw5(){ 
    var data = generateTestData5(); 
    graph = $('#graph5'); 
    var c = graph[0].getContext('2d'); 

    c.lineWidth = 2; 
    c.strokeStyle = '#333'; 
    c.font = 'italic 8pt sans-serif'; 
    c.textAlign = "center"; 

    c.beginPath(); 
    c.moveTo(xPadding, 0); 
    c.lineTo(xPadding, graph.height() - yPadding); 
    c.lineTo(graph.width(), graph.height() - yPadding); 
    c.stroke(); 

    var x = 0; 
    for(var i = 0; i < data.length + 1; i ++) { 

     if(x==30) { 
      c.fillText(i, getXPixel5(i), graph.height() - yPadding + 20); 
      x=0;} 
     else { 
      x++; 
     } 
    } 


    c.textAlign = "right"; 
    c.textBaseline = "middle"; 

    for(var i = 0; i < getMaxY5(); i += getMaxY5()/10) { 
     c.fillText(i, xPadding-10, getYPixel5(i)); 
    } 
    c.strokeStyle = '#f00'; 
    c.beginPath(); 
    c.moveTo(getXPixel5(0)+10, getYPixel5(data[0])-20); 

    for(var i = 1; i < data.length + 1; i ++) { 
     c.lineTo(getXPixel5(i)+10, getYPixel5(data[i])-20); 
    } 
    c.stroke(); 
    //c.clearRect(0,0,graph.width(),graph.height());  
} 

Answer 1

我不得不改變寬度（）和高度（），以寬度和高度的幾十倍（它們是簡單的屬性），從1開始的測試數據，因爲否則所述第一值總是正無窮」，並存儲數據，最大的，而不是生成它們多次，但現在它似乎工作。

var data; \t /* KEEP DATA AS A GLOBAL VARIABLE INSTEAD OF GENERATING IT AGAIN EACH TIME */ 
 
var graph; 
 
var xPadding = 40; 
 
var yPadding = 40; 
 

 
function generateTestData5() // generates the array 
 
{ 
 
    var data = []; 
 
    for(var i=1; i<=300; i++){ 
 
     var sensfi = ((document.getElementById("f5").value)*(document.getElementById("xPos5").value)*(document.getElementById("f5").value))/((i*i*document.getElementById("sDI5").value)/(document.getElementById("rI5").value)); 
 
     data[i-1] = sensfi; 
 
    } 
 
    return data; 
 
} 
 

 
function getMaxY5() { 
 
    var max = 0; 
 

 
    for(var i = 0; i < data.length; i ++) { 
 
     if(data[i] > max) { 
 
      max = data[i]; 
 
     } 
 
    } 
 

 
    max += 10 - max % 10; 
 
    return max; 
 
} 
 

 
function getXPixel5(val) { 
 
    return ((graph.width - 20)/data.length) * val + (20 * 1.5); 
 
} 
 

 
function getYPixel5(val) { 
 
    return graph.height - (((graph.height - 20)/getMaxY5()) * val) - 20; 
 
} 
 

 
function draw5(){ 
 
    data = generateTestData5(); \t /* USE THE GLOBAL VARIABLE */ 
 
    var max = getMaxY5(); \t /* STORE MAX INSTEAD OF CHECKING IT MULTIPLE TIMES */ 
 
    graph = document.getElementById("graph5"); 
 
    var c = graph.getContext('2d'); 
 

 
    c.lineWidth = 2; 
 
    c.strokeStyle = '#333'; 
 
    c.font = 'italic 8pt sans-serif'; 
 
    c.textAlign = "center"; 
 

 
    c.beginPath(); 
 
    c.moveTo(xPadding, 0); 
 
    c.lineTo(xPadding, graph.height - yPadding); 
 
    c.lineTo(graph.width, graph.height - yPadding); 
 
    c.stroke(); 
 

 
    var x = 0; 
 
    for(var i = 0; i < data.length + 1; i ++) { 
 

 
     if(x==30) { 
 
      c.fillText(i, getXPixel5(i), graph.height - yPadding + 20); 
 
      x=0;} 
 
     else { 
 
      x++; 
 
     } 
 
    } 
 

 
    c.textAlign = "right"; 
 
    c.textBaseline = "middle"; 
 

 
    for(var i = 0; i < max; i += max/10) { 
 
     c.fillText(i, xPadding-10, getYPixel5(i)); 
 
    } 
 
    c.strokeStyle = '#f00'; 
 
    c.beginPath(); 
 

 
    c.moveTo(getXPixel5(0)+10, getYPixel5(data[0])-20); 
 

 
    for(var i = 1; i < data.length + 1; i ++) { 
 
     c.lineTo(getXPixel5(i)+10, getYPixel5(data[i])-20); 
 
    } 
 
    c.stroke(); 
 
    //c.clearRect(0,0,graph.width,graph.height);  
 
} 
 

 
draw5();

<form> 
 
<input name="f5" id="f5" value=8> 
 
<input name="xpos5" id="xPos5" value=100> 
 
<input name="sDI5" id="sDI5" value=6.4> 
 
<input name="rI5" id="rI5" value=1280> 
 
</form> 
 
<canvas id="graph5" width="400" height="300"></canvas>