如何將此代碼轉換爲可重複的功能？

-1

我有以下代碼和一組函數（更容易在this jsFiddle中讀取）。如何將此代碼轉換爲可重複的功能？

<html> 
<head> 
    <title>Example</title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
    <script> 
     // Returns the max Y value in our data list 
     function getMaxY() { 
     var max = 0; 

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

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

     // Return the x pixel for a graph point 
     function getXPixel(val) { 
     return((graph.width() - xPadding)/data.values.length) * val + (xPadding * 1.5); 
     } 

     // Return the y pixel for a graph point 
     function getYPixel(val) { 
     return graph.height() - (((graph.height() - yPadding)/getMaxY()) * val) - yPadding + 10; 
     } 

     // Image 
     draw_image = function(path, c) { 
     var img; 
     img = new Image(); 
     img.src = path; 
     return img.onload = function() { 
      return c.drawImage(img, getXPixel(data.values.length - 1) - 2, getYPixel(data.values.slice(-1)[0].Y + 20), 28, 28); 
     }; 
     }; 

     var graph; 
     var xPadding = -50; 
     var yPadding = 20; 
     var data = {values:[{X:"1",Y:12},{X:"2",Y:28},{X:"3",Y:58},{X:"4",Y:34},{X:"5",Y:40},{X:"6",Y:45},{X:"7",Y:40},{X:"8",Y:40},{X:"9",Y:40},{X:"13",Y:40},{X:"14",Y:60},{X:"15",Y:32},{X:"16",Y:40},{X:"17",Y:26},{X:"18",Y:40},{X:"19",Y:30},{X:"20",Y:35}]} 

     $(document).ready(function() { 

     graph = $('canvas'); 

     var c = graph[0].getContext('2d'); 

     c.lineWidth = 5; 
     c.strokeStyle = '#fff'; 
     c.shadowColor = "rgba(0,0,0,0.13)"; 
     c.shadowOffsetX = 0; 
     c.shadowOffsetY = 1; 

     // Draw the line graph 
     c.beginPath(); 
     c.moveTo(getXPixel(0), getYPixel(data.values[0].Y)); 
     for(var i = 1; i < data.values.length; i++) { 
      c.lineTo(getXPixel(i), getYPixel(data.values[i].Y)); 
     } 
     c.stroke(); 

     //Draw the ending icon 
     draw_image("/images/icon.png", c); 
     }); 
    </script> 
</head> 
<body> 
    <section class="question_listing"> 
     <article data-question-id="1"> 
     <canvas width="200" height="70"></canvas> 
     </article> 
     <article data-question-id="2"> 
     <canvas width="200" height="70"></canvas> 
     </article> 
    </section> 
</body> 
</html>

正如你可以看到the jsFiddle，該圖表纔剛剛畫就的canvas（這是正確的）第一次出現。

但是我需要幫助的是把它變成可以重複的東西。

理想情況下，我可以執行類似$('article canvas').littleChart();的操作，並將其應用於該選擇器的所有匹配項。

只是在這一點上輸了。

來源

2013-02-07 Shpigford

您的jquery語句將返回頁面上的所有畫布。你只需要遍歷每一個，並應用你已有的東西。

把周圍的代碼的循環，可以在文檔準備功能：

$(document).ready(function() { 

    graph = $('canvas'); 

    for (var ii=0; ii < graph.length; ii++) { 

     var c = graph[ii].getContext('2d'); 

     c.lineWidth = 5; 
     c.strokeStyle = '#fff'; 
     c.shadowColor = "rgba(0,0,0,0.13)"; 
     c.shadowOffsetX = 0; 
     c.shadowOffsetY = 1; 

     // Draw the line graph 
     c.beginPath(); 
     c.moveTo(getXPixel(0),getYPixel(data.values[0].Y)); 
     for(var i = 1; i < data.values.length; i++) { 
      c.lineTo(getXPixel(i), getYPixel(data.values[i].Y)); 
     } 
     c.stroke(); 

     //Draw the ending icon 
     draw_image("http://maps.google.com/mapfiles/kml/pal2/icon4.png", c); 
    } 
});

這應該做的伎倆。你可能想用更像canvasList的描述來重命名'graph'。

來源

2013-02-07 03:20:56 Bovard

如何將此代碼轉換爲可重複的功能？

回答

相關問題