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

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

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

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

jquery代码如下所示:

  1. const ctxpendapatan = document.getElementById('chartpendapatan').getContext('2d');
  2. const myChartpendapatan = new Chart(ctxpendapatan, {
  3. type: 'bar',
  4. data: {
  5. labels: [],
  6. datasets: [{
  7. label: 'Pendapatan Desa',
  8. data: [],
  9. borderWidth: 1
  10. }]
  11. },
  12. options: {
  13. legend: {
  14. display: false
  15. },
  16. scales: {
  17. y: {
  18. beginAtZero: true
  19. }
  20. }
  21. }
  22. });
  23. var getData = function() {
  24. var tahun = $("#tahun").val();
  25. $.ajax({
  26. url: "{{ url('/grafik_pendapatan') }}" + '/' + tahun,
  27. type: "GET",
  28. dataType: "JSON",
  29. success: function(data) {
  30. $.each(data.result, function(id, value) {
  31. myChartpendapatan.data.labels.push(value.nama_bidang);
  32. myChartpendapatan.data.datasets[0].data.push(value.total_anggaran);
  33. });
  34. myChartpendapatan.update();
  35. },
  36. error: function() {
  37. alert("Tidak Ada Data");
  38. }
  39. });
  40. };
  41. const brgy = document.getElementById('tahun');
  42. brgy.addEventListener('change', getData);

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

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

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

6qftjkof

6qftjkof1#

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

  1. success: function(data) {
  2. myChartpendapatan.data.labels = [];
  3. myChartpendapatan.data.datasets[0].data = [];
  4. $.each(data.result, function(id, value) {
  5. myChartpendapatan.data.labels.push(value.nama_bidang);
  6. myChartpendapatan.data.datasets[0].data.push(value.total_anggaran);
  7. });
  8. myChartpendapatan.update();
  9. },

相关问题