Laravel 5.4 ChartJs - ラベル/データとしてコレクション/配列を使用する

Question

グラフのラベルとデータを動的にすることが必要でした。

は、物事を始めるために、私は私のControllerにsearchと呼ばれる機能を持っており、それがこのようなクエリがあります：チャートを持っている

$total_cost = DB::raw('SUM(qty * cost) as total_cost'); 
$total_grossrev = DB::raw('(SUM(price * qty)) as total_grossrev'); 
$total_profit = DB::raw('(SUM(price * qty)) - (SUM(qty * cost)) as total_profit'); 

$period = DB::raw('date(created_at) as period'); 
$format = 'j F Y h:i A'; 

$salesanalysis = DB::table('orders') 
    ->whereDate('created_at','>=', $request->datefrom) 
    ->whereDate('created_at', '<=', $request->dateto) 
    ->where('status', 'served') 
    ->select($total_cost, $total_grossrev, $total_profit, $period, 'created_at') 
    ->groupBy('period') 
    ->get(); 

そして、私のスクリプトでは、これが私の構造体である：

<script src="{{ asset('js/Chart.min.js') }}"></script> 

<script> 
    let salesAnalysisChart = document.getElementById('salesAnalysisChart').getContext('2d'); 

    let barChart = new Chart(salesAnalysisChart, { 
     responsive: true, 
     type:'bar', 
     data:{ 
      labels:[ //period of salesanalysis ], 
      datasets:[{ 
       label:'Sales', 
       data:[ 
        // total_profit of salesanalysis 
       ], 
       backgroundColor: 'rgba(73, 187, 235, 0.7)', 
       hoverBorderWidth: 1, 
       hoverBorderColor: '#000' 
      }] 
     }, 
     options:{ 
      maintainAspectRatio: false, 
      scales: { 
       yAxes: [{ 
        ticks: { 
         beginAtZero: true, 
        } 
       }] 
      }, 

      legend:{ 
       position:'bottom', 
       display:false, 
      }, 

      layout:{ 
       padding: 0, 
      } 
     } 
    }); 
</script> 

また、$formatを使用して、販売分析のperiodをCarbonで解析する予定です。だから私はこの構文を使用するのではと思った：

{{\Carbon\Carbon::parse($collection->period)->format($format)}} 

bottomlineは、私がChartJsのlabelとdataためcollectionを使用するつもりのですか、です。

Answer 1

どうにか私は問題を解決することができました。私controllerで

、私は、クエリを行なったし、配列にそれを変換：

$salesanalysisarray = DB::table('orders') 
        ->whereDate('created_at','>=', $request->datefrom) 
        ->whereDate('created_at', '<=', $request->dateto) 
        ->where('status', 'served') 
        ->select($total_cost, $total_grossrev, $total_profit, $period, 'created_at') 
        ->groupBy('period') 
        ->get() 
        ->toArray(); 

そして、私のscriptに、私は別のarrayを初期化し、array自体に各データをプッシュするためにループをした：

var periodArray = new Array(); 
    var profitArray = new Array(); 
    var costArray = new Array(); 

    @forelse($salesanalysis as $analysis) 
    periodArray.push("{{\Carbon\Carbon::parse($analysis->created_at)->format($format)}}"); 
    profitArray.push("{{$analysis->total_profit}}"); 
    costArray.push("{{$analysis->total_cost}}"); 
    @empty 
    @endforelse 

Answer 2

ビューの一番下には、ラベル、データ、その他のパラメータを持つbuildChart関数が作成されます。 PHP implodeメソッドを使用してそれらを渡し、ブレード内のimploded変数をチャートを作成する関数に返します。

//View 
buildChart({{ $variable }}, ect)