このjavascriptはどのようにdoghnutを再描画しますか？

Question

この単純なdoghnutの図は、毎秒サークル上の小さな灰色の部分を再現します.60回。
https://jsfiddle.net/1xe7dhao/
私は更新プロセスが60のステップの後に停止し、JavaScriptでライン24にそれを見ることができます

（彼らはstackoverflowの投稿によると、永遠に保存されます）が、ライン26と27にファジーLITTELビットイム：

theChart.segments[0].value = theChart.segments[0].value+1 
theChart.segments[1].value = theChart.segments[1].value-1 

それは、セグメント[0]のように見える私の意見では、円上のセグメントの最初の部分であると+1の値と次のセグメントに設定されている[1]の値に設定されています-1。

しかし、セグメント[0]からセグメント[60]に移動し、それらの色を変更する必要はありません。このコードはどのようにしてグレーを緑色に変更しますか？

Answer 1

グラフには、の2つのセグメントがあります。緑色と灰色です。

両方のセグメントに値があります。緑色は0から始まります - 最初は緑色の部分が見えません。 60で開始し、灰色 - 完全な円

---

theChart.segments[0].value = theChart.segments[0].value + 1 

この行は一つによって第一セグメント（緑色）の値が増加しています。

theChart.segments[1].value = theChart.segments[1].value - 1 

第二行は下図の

---

により、第2のセグメント（灰色）の値が減少しているが、各第2グリーン、グレー値の表示とスニペットある

$(document).ready(function() { 
 

 
    var max_value = 60 
 

 
    chartOptions = { 
 
    segmentShowStroke: false, 
 
    percentageInnerCutout: 75, 
 
    animation: false 
 
    }; 
 

 
    chartData = [{ 
 
    value: 0, 
 
    color: '#4FD134' //ugly green 
 
    }, { 
 
    value: max_value, 
 
    color: '#DDDDDD' //grey 
 
    }]; 
 

 
    var ctx = $('#chart').get(0).getContext("2d"); 
 
    var theChart = new Chart(ctx).Doughnut(chartData, chartOptions); 
 

 
    theInterval = setInterval(function() { 
 
    if (theChart.segments[0].value === max_value) { 
 
     clearInterval(theInterval); 
 
    } else { 
 
     console.log("GREEN = " + theChart.segments[0].value); 
 
     console.log("GRAY = " + theChart.segments[1].value); 
 
     console.log("***"); 
 
     theChart.segments[0].value = theChart.segments[0].value + 1 
 
     theChart.segments[1].value = theChart.segments[1].value - 1 
 
     theChart.update() 
 
    } 
 
    }, 1000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script> 
 
<canvas id="chart" width="300" height="300"></canvas>

更新

自分で設定することができます。すべてのセグメントの値の和が60

$(document).ready(function() { 
 

 
    var max_value = 60 
 

 
    chartOptions = { 
 
    segmentShowStroke: false, 
 
    percentageInnerCutout: 75, 
 
    animation: false 
 
    }; 
 

 
    chartData = [{ 
 
    value: 0, 
 
    color: '#4FD134' //ugly green 
 
    }, { 
 
    value: max_value, 
 
    color: '#DDDDDD' //grey 
 
    }]; 
 

 
    var ctx = $('#chart').get(0).getContext("2d"); 
 
    var theChart = new Chart(ctx).Doughnut(chartData, chartOptions); 
 

 
    theChart.segments[0].value = 30; 
 
    theChart.segments[1].value = 30; 
 
    theChart.update() 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script> 
 
<canvas id="chart" width="300" height="300"></canvas>

Answer 2

ので、二番目は、単にその効果を与える減少する最初のものを増加灰色と緑の2つだけのセグメント、

chartData = [{ 
       value: 0, 
       color: '#4FD134' //ugly green 
      },{ 
       value: max_value, 
       color: '#DDDDDD' //grey 
      }]; 

があります。

Answer 3

に等しくなるように必要chartDataアレイは灰色と緑の色を有する2つのセグメントにドーナツを分割します。緑はインデックス[0]を持ち、グレーはインデックス[1]を持っています。 スクリプト開始時に、charData [0]の値は0、charDate [1]は60で、ドーナツ全体の値は60です。 ここでは2つのラインが緑のサイズを1ずつ増やし、呼び出されるたびにグレーのサイズを1減らしてください。