charts.jsの値フィールドでJS変数を更新するにはどうすればよいですか？

Question

ページが読み込まれると、charts.jsのグラフが描画されます（詳細は以下を参照）。私はまた、のようないくつかのチェックボックスを...持って

  <input type="checkbox" id="something" name="something" value="25" data-val="25" checked="checked" class="option"> 
      <label for="something">Something</label> 

      <input type="checkbox" id="other" name="other" value="5" data-val="5" checked="checked" class="option"> 
      <label for="other">Other</label> 

私は、これは、変数を作成し、チェックボックスがオンまたはオフされた場合に見て、その後、同じかを値を維持するか、それを0の新しい値を与えるためにJS持っています。私はまた、グラフを破壊し、それを再描画するupdateBreakdown（）関数を持っています。

以下は、charts.js Chartのコードです。データが "値"に自分の変数を使用していることに注意してください。ページが読み込まれると、チャートは正常に作成されます。たとえば、「何か」ボックスなどのチェックボックスをオフにすると、something変数の値が0に変更され、再描画されたときにグラフ上の任意のスペースを占めるべきではありません。しかし、それは常に25と表示されます。

私は間違っている可能性がありますが、変数の宣言やスコープの保持方法が間違っているような気がします。

多分、charts.jsデータを値として使用されている変数を「リフレッシュ」させるために何か別の処理をしなければなりませんか？

誰かが間違っていますか？

<script> 
    var something=25; 
    var other=5; 


    $(document).ready(function() { 
     $('.option').on('change', function() { 

      if ($('#something').is(':checked')) { 
       var something = 25; 
      } else { 
       var something = 0; 
      } 

      if ($('#other').is(':checked')) { 
       var other= 5; 
      } else { 
       var other= 0; 
      } 

     updateBreakdown(); 

     }); 

    }); 

    function updateBreakdown() { 

       // create the graph from scratch 
       doughnutChart.destroy() 
       doughnutChart = new Chart(ctx).Doughnut(doughnutData, { 
        percentageInnerCutout: 55 
       }); 

      } 

</script> 
<canvas id="breakdown" width="500" height="500"></canvas> 
       <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
       <script> 

       var ctx = document.getElementById("breakdown").getContext("2d"); 
       var doughnutData = [ 
        { 
         value: something, 
         label: 'My something Label', 
         color: '#811BD6' 
        }, 
        { 
         value: other, 
         label: 'My other label', 
         color: '#D18177' 
        } 
       ]; 

       var doughnutChart = new Chart(ctx).Doughnut(doughnutData, { 
        percentageInnerCutout: 55 
       }); 
</script> 

Answer 1

新しいグラフを作成する前に、doughnutDataに新しい設定データを渡してみてください。

function updateBreakdown() { 

      // create the graph from scratch 
      doughnutChart.destroy(); 
      var doughnutData = [ 
       { 
        value: something, 
        label: 'My something Label', 
        color: '#811BD6' 
       }, 
       { 
        value: other, 
        label: 'My other label', 
        color: '#D18177' 
       } 
      ]; 
      doughnutChart = new Chart(ctx).Doughnut(doughnutData, { 
       percentageInnerCutout: 55 
      }); 

} 

そして、これが変化します

if ($('#something').is(':checked')) { 
      //var something = 25;//replace these 
      something = 25;//with these 
     } else { 
      //var something = 0; 
      something = 0; 
     } 

     if ($('#other').is(':checked')) { 
      //var other= 5; 
      other= 5; 
     } else { 
      //var other= 0; 
      other= 0; 
     }