グラフjsとlaravel：jsonデータを渡した後のチャートのレンダリング

Question

json_encodeとしてすべてのデータを正しく渡しても、チャートのレンダリングに苦労しているようです。私は何が間違っている可能性があります。以下のコードは私にエラーを与える

Uncaught SyntaxError: Unexpected token { on line data: {{json_encode($revenue)}},

//コントローラ

public function chartjs() 
{  
    $revenue = Invoice::all()->pluck('amount')->tojson(); 
    return view('home') 
     ->with('revenue',json_encode($revenue)); 
} 

//ブレードビュー

<script> 
(function() { 
    var ctx = document.getElementById('canvas').getContext('2d'); 
     var year = ['2013','2014','2015', '2016']; 
    var chart = { 
     labels: year, 
     datasets: [{ 
      data: @{{json_encode($revenue)}}, 
      fillColor : "#94646D", 
      strokeColor : "#A37079", 
      pointColor : "#BC808B", 
      showTooltips: true, 
      responsive: false 
     }] 
    }; 

    new Chart(ctx).Line(chart); 
})(); 

<div class="container"> 
<div class="row"> 
    <div class="col-md-10 col-md-offset-1"> 
     <div class="panel panel-default"> 
      <div class="panel-heading">Dashboard</div> 
      <div class="panel-body"> 
       <canvas id="canvas" height="280" width="600"></canvas> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

json_encode()を2回実行しているようです。コントローラ内とスクリプト内。コントローラにjson_encode()を呼び出して、あなたはそれをwith()を使用してセッション変数を渡すので、スクリプトで

data: {{ $revenue }}, 

それとも

data: <?php echo $revenue; ?>, 

$revenueを行うことは未定義です。代わりに、次のようにあなたの視点に戻してください：

$revenue = Invoice::all()->pluck('amount')->tojson(); 
return view('home', compact('revenue')); //'revenue' will match $revenue 

Answer 2

私はチャートの事についてはわかりませんが、データを3回エンコードしています！

public function chartjs() 
{  
    $revenue = Invoice::all()->pluck('amount')->toJson(); 
    // $revenue is already a json string 
    return view('home') 
     ->with('revenue',$revenue); // you don't need this json_encode 
} 

また、json_encodeは必要ありません。また、json文字列を引用符で囲む必要があるかもしれません。

data: @'{{$revenue}}', 

Answer 3

json_encodeを複数回呼び出すようです。 tojson（）は十分でなければなりません。

あなたのリターンはこの

return view('home', [ 'revenue' => $revenue ]); 

ようになる。そして、このようなjavascriptの上でそれを印刷することができます：あなたのHTMLソースコードに印刷されたデータ構造が1に等しい場合

data: {!! $revenue !!} 

もチェックチャートライブラリに必要です。