캔버스를 사용하여 도넛 형 차트의 선을 애니메이션으로 지정

Question

기본적으로 나는 도넛 형 차트 (example 참조)의 선을 애니메이션하여 각 개체가 document.ready로 계산되도록합니다. here 및 here

위에서 알 수 있듯이 countUp 솔루션은 이미 잘 작동하지만 차트에 연결해야 페이지로드시에 그려집니다.

캔버스에 관한 나의 지식은 놀랍지 않습니다. 아무도 도울 수 있다면 나는 매우 행복 할 것이다. 여기 코드는 다음과 같습니다 https://jsfiddle.net/9oyoh67x/10/

$(document).ready(function() {   
var canvas = document.getElementById('canvas'); 
      var ctx = canvas.getContext('2d'); 
      console.log(ctx); 
      ctx.lineWidth = 19; 
      ctx.lineCap = 'round'; 
      ctx.shadowBlur = 10; 
      donutChart(); 
      function degtoRad(degree) { 
       var factor = Math.PI/180; // = 1 deg = 0.01745 rad 
       return degree * factor; // for 360 = 6.28 = 360° 
      } 

      /*function move() { 
       var elem = document.getElementById("canvas"); 
       var width = 0; 
       var id = setInterval(countUp, 1000); } 
      */ 

      $(function() { 
       var countUp = setInterval(function() { donutChart }, 40); 
       function count($this) { 
        var current = parseInt($this.html(), 10); 
        $this.html(++current); 
        if (current !== $this.data('count')) { 
         setTimeout(function() { count($this) }, 50); 
        } 
       } 
       $(".testspan1").each(function() { 
        $(this).data('count', parseInt($(this).html(), 10)); 
        $(this).html('0'); 
        count($(this)); 
       }); 
       $(".testspan2").each(function() { 
        $(this).data('count', parseInt($(this).html(), 10)); 
        $(this).html('0'); 
        count($(this)); 
       }); 
       $(".testspan3").each(function() { 
        $(this).data('count', parseInt($(this).html(), 10)); 
        $(this).html('0'); 
        count($(this)); 
       }); 
       $(".testspan4").each(function() { 
        $(this).data('count', parseInt($(this).html(), 10)); 
        $(this).html('0'); 
        count($(this)); 
       }); 
      });    

      function donutChart() { 
       var factor_calc = Math.PI/180; 
       var record = $('.testspan1').text(); // equal to 100% or 360° 
       var average = $('.testspan2').text(); 
       var income = $('.testspan2').text(); 
       var target = $('.testspan3').text(); 


       // Record 
       ctx.strokeStyle = 'rgba(115, 100, 164, 1)'; 
       ctx.beginPath(); 
       ctx.arc(250, 250, 200, degtoRad(270), degtoRad(270 + (record/record) * 360)); 
       ctx.stroke(); 

       // Average 
       ctx.strokeStyle = 'rgba(125, 131, 164, 1)'; 
       ctx.beginPath(); 
       ctx.arc(250, 250, 170, degtoRad(270), degtoRad(270 + (average/record) * 360)); 
       ctx.stroke(); 

       //Income 
       ctx.strokeStyle = 'rgba(75, 181, 164, 1)'; 
       ctx.beginPath(); 
       ctx.arc(250, 250, 140, degtoRad(270), degtoRad(270 + (income/record) * 360)); 
       ctx.stroke(); 

       // Target 
       ctx.strokeStyle = 'rgba(26, 221, 164, 1)'; 
       ctx.beginPath(); 
       ctx.arc(250, 250, 110, degtoRad(270), degtoRad(270 + (target/record) * 360)); 
       ctx.stroke(); 

       // Record 
       ctx.font = "25px Philosopher"; 
       ctx.fillStyle = 'rgba(115, 100, 164, 1)'; 
       ctx.fillText(record, 220, 200); 

       //Average 
       ctx.font = "25px Philosopher"; 
       ctx.fillStyle = 'rgba(125, 131, 164, 1)'; 
       ctx.fillText(average, 220, 230); 

       //Income 
       ctx.font = "30px Philosopher"; 
       ctx.fillStyle = 'rgba(75, 181, 164, 1)'; 
       ctx.fillText(income, 220, 260); 

       // Target 
       ctx.font = "35px Philosopher"; 
       ctx.fillStyle = 'rgba(26, 221, 164, 1)'; 
       ctx.fillText(target, 220, 290); 

       // Euro 
       ctx.font = "60px Philosopher"; 
       ctx.fillStyle = 'rgba(26, 221, 164, 1)'; 
       ctx.fillText('€', 280, 255); 
      } 

      var options = { 
       useEasing: true, 
       useGrouping: true, 
       separator: ',', 
       decimal: '', 
       prefix: '', 
       suffix: '€' 

      }; 
     }); 

HTML : 비슷한 문제를 가진 사람들을 위해

 <div class="canvasdiv"> 
     <canvas id="canvas" width="500" height="500"></canvas> 
     <img id="myImage" /> 
     <span class='testspan1'>1250</span> 
     <span class='testspan2'>250</span> 
     <span class='testspan3'>450</span> 
     <span class='testspan4'>130</span> 
    </div> 

, 여기에 (더 캔버스를 사용하지 않고) 몇 가지 더 관련 링크입니다 :

• https://bl.ocks.org/mattkohl/9f3a283813cf0226311f41595582c9eb
• https://codepen.io/hi-im-si/pen/uhxFn
• 좋아

Answer 1

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_setinterval_progressbar은, 마침내 나는 그것을 만든 - 여기 내 솔루션 (https://jsfiddle.net/9oyoh67x/12/)입니다 : 당신이 그것을 좋아하는 경우에

// requestAnimationFrame Shim 
     (function start() { 
      var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || 
       window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; 
      window.requestAnimationFrame = requestAnimationFrame; 
     })(); 

     var canvas = document.getElementById('canvas'); 
     var ctx = canvas.getContext('2d'); 
     console.log(ctx); 
     ctx.lineWidth = 19; 
     ctx.lineCap = 'round'; 
     ctx.shadowBlur = 10; 
     var record = 820; // equal to 100% or 360° 
     var record_count = (record/record * 100) 
     var average = (229/record * 100); 
     var income = (490/record * 100); 
     var target = (750/record * 100); 
     var counterClockwise = true; 
     var circ = Math.PI * 2; 
     var quart = Math.PI/2; 
     var startTime1 = null; 
     var startTime2 = null; 
     var startTime3 = null; 
     var startTime4 = null; 
     var duration = null; 
     var duration1 = null; 
     var duration2 = null; 
     var duration3 = null; 
     var duration4 = null; 
     var options = { 
      useEasing: true, 
      useGrouping: true, 
      separator: ',', 
      decimal: '0', 
      prefix: '', 
      suffix: '' 
     }; 


     function animate_rec(time) { 

      if (!startTime1) { 
       startTime1 = time; 
      } 

      var delta1 = Math.min(1, (time - startTime1)/duration1); 
      var curPerc = ((2 * Math.PI)/100) * (record_count * delta1); 
      console.log(curPerc) 
      var innerNumRec = (record * delta1); 
      //console.log(innerNumRec); 

      ctx.strokeStyle = 'rgba(115, 100, 164, 1)'; 
      ctx.beginPath(); 
      ctx.arc(250, 250, 200, -quart, curPerc - quart); 
      ctx.stroke(); 

      if (delta1 < 1) { 
       requestAnimationFrame(animate_rec); 
       ctx.clearRect(215, 180, 50, 30); 
      } else { 
       startTime1 = null; 
       ctx.clearRect(215, 180, 50, 30); 
      } 



      // Record 
      ctx.font = "25px Philosopher"; 
      ctx.fillStyle = 'rgba(115, 100, 164, 1)'; 
      ctx.fillText(Math.round(innerNumRec), 220, 200); 
     } 

     var startAnim_rec = function() { 
      duration1 = 3000; 
      requestAnimationFrame(animate_rec); 
     }; 

     function animate_avg(time) { 

      if (!startTime2) { 
       startTime2 = time; 
      } 

      var delta2 = Math.min(1, (time - startTime2)/duration2); 
      var curPerc = ((2 * Math.PI)/100) * (average * delta2); 
      var innerNumAvg = ((average * record/100) * delta2); 
      console.log(innerNumAvg); 

      ctx.strokeStyle = 'rgba(125, 131, 164, 1)'; 
      ctx.beginPath(); 
      ctx.arc(250, 250, 170, -quart, curPerc - quart); 
      ctx.stroke(); 

      if (delta2 < 1) { 
       requestAnimationFrame(animate_avg); 
       ctx.clearRect(215, 210, 70, 50); 
      } else { 
       startTime2 = null; 
       ctx.clearRect(215, 210, 70, 50); 
      } 

      // Average 
      ctx.font = "30px Philosopher"; 
      ctx.fillStyle = 'rgba(125, 131, 164, 1)'; 
      ctx.fillText(Math.round(innerNumAvg), 220, 230); 

     } 

     var startAnim_avg = function() { 
      duration2 = 3200; 
      requestAnimationFrame(animate_avg); 
     }; 

     function animate_inc(time) { 

      if (!startTime3) { 
       startTime3 = time; 
      } 

      var delta3 = Math.min(1, (time - startTime3)/duration3); 
      var curPerc = ((2 * Math.PI)/100) * (income * delta3); 
      var innerNumInc = ((income * record/100) * delta3); 
      console.log(innerNumInc); 

      ctx.strokeStyle = 'rgba(75, 181, 164, 1)'; 
      ctx.beginPath(); 
      ctx.arc(250, 250, 140, -quart, curPerc - quart); 
      ctx.stroke(); 

      if (delta3 < 1) { 
       requestAnimationFrame(animate_inc); 
       ctx.clearRect(215, 230, 70, 50); 
      } else { 
       startTime3 = null; 
       ctx.clearRect(215, 230, 70, 50); 
      } 

      // Income 
      ctx.font = "35px Philosopher"; 
      ctx.fillStyle = 'rgba(75, 181, 164, 1)'; 
      ctx.fillText(Math.round(innerNumInc), 220, 260); 
     } 

     var startAnim_inc = function() { 
      duration3 = 3400; 
      requestAnimationFrame(animate_inc); 
     }; 

     function animate_tar(time) { 
      if (!startTime4) { 
       startTime4 = time; 
      } 

      var delta4 = Math.min(1, (time - startTime4)/duration4); 
      var curPerc = ((2 * Math.PI)/100) * (target * delta4); 
      var innerNumTar = ((target * record/100) * delta4); 
      console.log(innerNumTar); 

      ctx.strokeStyle = 'rgba(26, 221, 164, 1)'; 
      ctx.beginPath(); 
      ctx.arc(250, 250, 110, -quart, curPerc - quart); 
      ctx.stroke(); 

      if (delta4 < 1) { 
       requestAnimationFrame(animate_tar); 
       ctx.clearRect(220, 260, 70, 50); 
      } else { 
       startTime4 = null; 
       ctx.clearRect(220, 260, 70, 50); 
      } 

      // Target 
      ctx.font = "40px Philosopher"; 
      ctx.fillStyle = 'rgba(26, 221, 164, 1)'; 
      ctx.fillText(Math.round(innerNumTar), 220, 290); 
     } 

     var startAnim_tar = function() { 
      duration4 = 3600; 
      requestAnimationFrame(animate_tar); 
     }; 

     startAnim_rec(); 
     startAnim_avg(); 
     startAnim_inc(); 
     startAnim_tar(); 

     // Euro 
     ctx.font = "60px Philosopher"; 
     ctx.fillStyle = 'rgba(26, 221, 164, 1)'; 
     ctx.fillText('€', 280, 255);}); 

이 날 투표는). 고마워.