javascript - 如何更新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>

我有这个 JS 用于创建变量，然后查看复选框是否被选中或未选中，然后保持值相同或给它一个新值 0。我还有一个 updateBreakdown() 函数，它会破坏图表并重新绘制它。

下面是我的 Charts.js 图表代码。请注意，数据使用我的变量作为“值”。页面加载时，图表创建得很好。当我取消选中某个框(例如“某事”框)时，某事变量的值应更改为 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

在创建新图表之前尝试为 donutData 提供新的配置数据。

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