Question

我有以下代码和功能集（更容易在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();之类的操作，并将其应用于该选择器的所有匹配项。

此时有点迷失。

Answer 1

您的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”。

如何将此代码转换为可重复的函数？

1 个答案: