ChartJS 使用laravel中选择选项未更新图表

xe55xuns  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(246)

在chartjs数据集中使用select选项时,我代码出现问题
下面是html代码

<div class="form-group">
       <select name="tahun" id="tahun" class="form-control">
            @for ($i = 2021; $i <= date('Y'); $i++)
              <option @if ($i == date('Y')) <?php echo 'selected'; ?> @endif value="{{ $i }}">{{ $i }}</option>
            @endfor
       </select>
   </div>
   <div id="parent-canvas">
       <canvas id="chartpendapatan" width="400" height="200"></canvas>
   </div>

jquery代码如下所示:

const ctxpendapatan = document.getElementById('chartpendapatan').getContext('2d');
    const myChartpendapatan = new Chart(ctxpendapatan, {
        type: 'bar',
        data: {
            labels: [],
            datasets: [{
                label: 'Pendapatan Desa',
                data: [],
                borderWidth: 1
            }]
        },
        options: {
            legend: {
                display: false
            },
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
    var getData = function() {
        var tahun = $("#tahun").val();
        $.ajax({
            url: "{{ url('/grafik_pendapatan') }}" + '/' + tahun,
            type: "GET",
            dataType: "JSON",
            success: function(data) {
                $.each(data.result, function(id, value) {
                    myChartpendapatan.data.labels.push(value.nama_bidang);
                    myChartpendapatan.data.datasets[0].data.push(value.total_anggaran);
                });
                myChartpendapatan.update();
            },
            error: function() {
                alert("Tidak Ada Data");
            }
        });
    };

    const brgy = document.getElementById('tahun');
    brgy.addEventListener('change', getData);

我代码的输出是:是我选2021年后的数据

但在我再次选择2022年后,输出如下:

当我第一次点击2021年时,图表中显示了4个数据,因为数据库中有4个数据。但是当我点击2022年后,2021年的数据仍然存在,2022年的数据也显示出来。所以我的问题是,在我选择另一年后,如何不显示以前的数据?

6qftjkof

6qftjkof1#

你推到标签和数据数组,如果你不想显示以前的数据,你需要先删除这个数据或只是完全覆盖数组:

success: function(data) {
  myChartpendapatan.data.labels = [];
  myChartpendapatan.data.datasets[0].data = [];

  $.each(data.result, function(id, value) {
    myChartpendapatan.data.labels.push(value.nama_bidang);
    myChartpendapatan.data.datasets[0].data.push(value.total_anggaran);
  });
  myChartpendapatan.update();
},

相关问题