如何使用日期范围选择器设置我的图表？我使用 Laravel 框架

Question

我会将数据的值设置到图表中。但我不知道怎么办。我想根据指定的日期将从/load-pendapatan获取的值输入到图表中。页面加载时的默认值为当前日期

我的脚本：

$(function () {
  let searchParams = new URLSearchParams(window.location.search)
  let dateInterval = searchParams.get('from-to');
  let start = moment().subtract(29, 'days');
  let end = moment();

  if (dateInterval) {
    dateInterval = dateInterval.split(' - ');
    start = dateInterval[0];
    end = dateInterval[1];
  }

  $('#reservation').daterangepicker({
    "showWeekNumbers": true,
    "alwaysShowCalendars": true,
    startDate: start,
    endDate: end,
    locale: {
      format: 'YYYY-MM-DD',
      firstDay: 1,
    },
    ranges: {
      'Today': [moment(), moment()],
      'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
      'Last 7 Days': [moment().subtract(6, 'days'), moment()],
      'Last 30 Days': [moment().subtract(29, 'days'), moment()],
      'This Month': [moment().startOf('month'), moment().endOf('month')],
      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
      'This Year': [moment().startOf('year'), moment().endOf('year')],
      'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
      'All time': [moment().subtract(30, 'year').startOf('month'), moment().endOf('month')],
    }
  });

});

  'use strict'
  var ticksStyle = {
    fontColor: '#495057',
    fontStyle: 'bold'
  }
  var mode = 'index'
  var intersect = true
  
  var $salesChart = $('#sales-chart')
  var salesChart = new Chart($salesChart, {
    type: 'bar',
    data: {
      labels: ['Sales Report'],
      datasets: [
        {
          backgroundColor: '#007bff',
          data: [2]
        },
        {
          backgroundColor: '#dc3545',
          data: [2]
        },
        {
          backgroundColor: '#28a745',
          data: [2]
        }
      ]
    },
    options: {
      maintainAspectRatio: false,
      tooltips: {
        mode: mode,
        intersect: intersect
      },
      hover: {
        mode: mode,
        intersect: intersect
      },
      legend: {
        display: false
      },
      scales: {
        yAxes: [{
          // display: false,
          gridLines: {
            display: true,
            lineWidth: '4px',
            color: 'rgba(0, 0, 0, .2)',
            zeroLineColor: 'transparent'
          },
          ticks: $.extend({
            beginAtZero: true,

            // Include a dollar sign in the ticks
            callback: function (value) {
              if (value >= 1000000) {
                value /= 1000000
                value += 'jt'
              }
              else if (value >= 1000) {
                value /= 1000
                value += 'k'
              }else {
                value
              }

              return 'Rp. ' + value
            }
          }, ticksStyle)
        }],
        xAxes: [{
          display: true,
          gridLines: {
            display: false
          },
          ticks: ticksStyle
        }]
      }
    }
  })

我的表格

<input type="text" name="from-to" class="form-control text-right" id="reservation">

我的控制器

public function LoadPendapatan(Request $request) {      
  $date = explode('-', $request->date);
  $pendapatan = KasMasuk::orderBy('created_at', 'asc');
  if (count($date) == 2) {
      if ($date[0] != '') {
          $pendapatan = $pendapatan->whereDate('created_at', '>=', date('Y-m-d', strtotime($date[0])));
      }
      if ($date[1] != '') {
          $pendapatan = $pendapatan->whereDate('created_at', '<=', date('Y-m-d', strtotime($date[1])));
      }
  }
  $pendapatan = $pendapatan->sum('debet');

  $penjualan = KasKeluar::orderBy('created_at', 'asc');
  if (count($date) == 2) {
      if ($date[0] != '') {
          $penjualan = $penjualan->whereDate('created_at', '>=', date('Y-m-d', strtotime($date[0])));
      }
      if ($date[1] != '') {
          $penjualan = $penjualan->whereDate('created_at', '<=', date('Y-m-d', strtotime($date[1])));
      }
  }
  $penjualan = $penjualan->sum('sub_total');
  
  $income = $pendapatan - $penjualan;

  return response()->json([$pendapatan,$penjualan,$income]);

}

我的路线：

Route::get('/load-pendapatan', [DashboardController::class, 'LoadPendapatan'])->name('load_pendapatan');

Answer 1

为图表建立一个端点将有助于解决问题。检查此文档https://charts.erik.cat/api_charts.html#building-the-api-endpoint。一旦有了终点，您实际上可以将 daterangepicker 参数传递到服务器端并更新图表

var Original_api_url = {{ $chart->id }}_api_url; {{ $chart->id }}_refresh(original_api_url + "?date_start=2019-01-01&date_end=2019-12-31");