-1

我有以下代码和一组函数（在这个 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>

正如您在jsFiddle中看到的那样，图表仅在第一次出现时绘制canvas（正确如此）。

但我需要帮助的是把它变成可以重复的东西。

理想情况下，我可以做类似的事情$('article canvas').littleChart();并将其应用于该选择器的所有出现。

只是在这一点上迷路了。

4

1 回答 1

0

您的 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 这样更具描述性的东西重命名“图形”。

于 2013-02-07T03:20:56.957 回答