从控制器更新laravel中的chart.js

Question

当从日期选择器中选择新日期时，我正在尝试更新我的图表中的图表。我想我已经很接近了。

日期通过 AJAX post 从我的日期选择器传输到我的控制器：

<div class="col py-3">
            <div class="container">
                <h1>Water Data</h1>
                @csrf
                <input type="text" name="daterange"/> Enter date range for water data
                
                <script>
                $(function() {
                  $('input[name="daterange"]').daterangepicker({
                    opens: 'left'
                  }, function(start, end, label) {
                    $.ajax({
                        type: 'POST',
                        url: "/basicecho",
                        method: "POST",
                        data:{startdate: start.format('YYYY-MM-DD'), endate: end.format('YYYY-MM-DD')},
                        success: function(data) {
                            console.log(data);
                            
                            $('#dateSelected').text(data);
                            
                        },  
                    });
                    console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
                    dd(data);
                    return false;

我的控制器响应此功能：

function getDate(Request $request){
        $date = $request->all();
        $d2=array_values($date);
        $start = $d2[0];
        $end = $d2[1];
        
        $this->update($start,$end);
        return;
     }

依次调用 SQL 查询：

 public function update($a,$b)
    {
         
         if ($a==1){
            $a= date('Y-m-d',strtotime("-18 days"));
            $b=date('Y-m-d');
        }
        $string="SELECT top ";
        $s2= " 2 * FROM [JDDProduction].[jd2exp].[CaveWaterTotal]";
        $s3= $string.$s2;
        //dd($key2);
        $usage = DB::table('jd2exp.CaveWaterTotal')
             -> select('JD1Cave','JD2Cave_calc')
             ->whereBetween("Date",[$a,$b])
             ->get();
           
       $output=[];      
       $values = ($usage->first());
       $i =0;
       foreach ($values as $entry){
            $output[$i]=($entry);
            $i+=1;
       }
       $data = (array_values($output));
       $labels = [
         'JD1Cave','JD2Cave_calc'
       ];
        return response()->json($data);
    }

数据正确并存在于控制器末尾的 $data 标签中。但是，我似乎无法将其恢复到视图中。

我认为我搞乱了控制器/视图应该如何工作的流程。我有 -> 使用当前日期生成视图 -> 日期选择器将新数据发布到控制器 -> 控制器生成响应 -> ??????

图表也在视图中生成：

<script type="text/javascript">
  
  var Data = @json($data)

  const data = {
  labels: [
    'JD1Cave','JD2Cave_calc'
  ],
  datasets: [{
    label: '',
    data: Data,
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)'
    
    ],
    hoverOffset: 4
  }]
    };
    const centerText = {
        id:'centerText',
        afterDatasetDraw(chart,args,pluginOptions){
            const {ctx}=chart;
            ctx.textAlign = 'center'
            console.log(Data);
            var result = Data.map(function (x) { 
                return parseFloat(x, 10); 
            }); 
            const atext = 'Total Gallons:'
            const text =result.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
            //const text = atext.conacat(btext)
            console.log(text);
            //.data.reduce((a, b) => a + b, 0);
            ctx.font = 'bold 30px san-serif';
            ctx.fillStyle = 'rgba(54,162,235,1)';
            const textWidth=ctx.measureText(text).width;
            const x = chart.getDatasetMeta(0).data[0].x
            const y = chart.getDatasetMeta(0).data[0].y
            
           
            //ctx.fillStyle = 'rbga(54,162,235,1)';
            ctx.fillText(atext,x,y-20);
            ctx.font = 'bold 24px san-serif';
            ctx.fillText(text,x,y);
           
        
    }
}
   const config = {
  type: 'doughnut',
  data: data,
  options:{
    plugins:{
        legend:{
            position:'right'
        }
    }
  },
  plugins:[centerText]
};

我尝试使用ajax get，但失败了：

var updateChart = function(){
    $.ajax({
        url: '/basicecho'
        type: 'GET',
        dataType: 'json',
        success: function(data){
            myChart.data.datasets[0].data=data.data;
            myChart.update();
        }
    });
    
}
    updateChart();
    setInterval(() => {
        updateChart();
    },1000);

有人可以帮我理清事情的顺序，以便我可以适当地更新我的图表吗？

aynber 指出我没有返回我的数据。我已经修复了它，现在可以看到数据进入正在运行的应用程序的控制台。但我不知道如何让图表更新。

getDate 现在返回 Json 数据响应：

    function getDate(Request $request){
    $date = $request->all();
    $d2=array_values($date);
    $start = $d2[0];
    $end = $d2[1];
    
    $data = $this->update($start,$end);
    return response()->json($data);
 }

Answer 1

我无法评论之前的评论，所以我在这里评论

您检查过这些文档吗？也许你可以在这里找到你的答案。 https://www.chartjs.org/docs/latest/developers/updates.html