Wie aktualisiert man die JS-Variable im Wertefeld von charts.js?

Question

Beim Laden der Seite wird ein charts.js Chart gezeichnet (mehr dazu unten). Ich habe auch einige Kontrollkästchen wie ...

  <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> 

Ich habe diese JS für Variablen zu schaffen und dann zu sehen, ob ein Kontrollkästchen aktiviert ist oder nicht markiert und dann entweder den Wert gleich zu halten oder ihm einen neuen Wert von 0 ergeben. Ich habe auch eine updateBreakdown() -Funktion, die das Diagramm zerstört und es erneut zeichnet.

Darunter ist mein Code für eine Charts.js Chart. Beachten Sie, dass die Daten meine Variablen für die "Werte" verwenden. Beim Laden der Seite erstellt das Diagramm eine gute Einstellung. Wenn ich ein Kästchen, z. B. das Kästchen "etwas", abnehme, sollte der Wert der Variablen something auf 0 geändert werden und sollte daher bei der Neuzeichnung KEINEN Platz im Diagramm einnehmen. Aber es erscheint immer mit 25.

Also könnte ich falsch liegen, aber ich habe das Gefühl, dass etwas nicht stimmt mit wie ich die Variablen deklariere und/oder wie ich ihren Umfang halte?

Oder vielleicht muss ich nur etwas anderes machen, um die charts.js Daten "aktualisieren" die Variablen, die als Werte verwendet werden?

Wer sieht, wo ich falsch liege?

<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

Versuchen Sie, donutnutData seine neuen Konfigurationsdaten zu geben, bevor Sie das neue Diagramm erstellen.

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 
      }); 

} 

Und machen dies ändert:

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; 
     }