如何更新charts.JS值字段中的JS变量

How to update JS variable in value field of charts.js?

本文关键字:JS 字段 变量 charts 何更新 更新      更新时间:2024-06-07

在页面加载时,会绘制一个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图表代码。请注意,数据使用我的变量作为"值"。页面加载时,图表创建良好。当我取消选中一个框,例如"something"框时,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>

在创建新图表之前,请尝试将其新配置数据提供给甜甜圈数据。

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