将数据从控制器传递到ChartJS-Laravel

Question

我想将数据从我的laravel控制器传递到chartjs javascript文件。 但是目前，我只能将数据保存到home.blade而不是javascript文件。 以下是我的控制器：

 public function index()
{


    $visits = Visitdetail::all();
    $countVisit = $visits->count();


    $totalSchools = School::all()->count();
    $totalProjects = Project::all()->count();

    $recentVisits = Visitdetail::all()->sortByDesc('created_at')->take(5);


    $visitsYear = Visit::where('created_at','>=', Carbon::now()->startOfYear())->take(5)->get();





    return view('home',['countVisit'=>$countVisit,'recentVisits'=>$recentVisits, 'totalSchools'=>$totalSchools,'totalProjects'=>$totalProjects,
        'yearVisits'=>$visitsYear]);
}

在home.blade上，我只有一块画布，下面是代码：

<div class="box-body">                    
  <div class="chart">
     <canvas id="barChart" style="height:227px"></canvas>
  </div>
</div>

在chartJS文件上，我有以下代码（文件名：dashboard.js），位于public / js / dashboard.js目录中：

// Get context with jQuery - using jQuery's .get() method.
    var barChartCanvas = $('#barChart').get(0).getContext('2d');
    // This will get the first returned node in the jQuery collection.
    var barChart            = new Chart(barChartCanvas);

    var barChartData = {
      labels  : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      datasets: [
        {
          label               : 'Electronics',
          fillColor           : 'rgba(38,198,218,1)',
          strokeColor         : 'rgba(38,198,218,0)',
          pointColor          : '#26c6da',
          pointStrokeColor    : 'rgba(38,198,218,0)',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(38,198,218,1)',
          data                : [5, 4, 3, 7, 5, 10, 3]
        },
        {
          label               : 'Digital Goods',
          fillColor           : 'rgba(30,136,229,1)',
          strokeColor         : 'rgba(30,136,229,0)',
          pointColor          : 'rgba(30,136,229,0)',
          pointStrokeColor    : '#1e88e5',
          pointHighlightFill  : '#fff',
          pointHighlightStroke: 'rgba(30,136,229,1)',
          data                : [3, 2, 9, 5, 4, 6, 4]
        }
      ]
    };

我尝试使用动态Blade变量设置数据集的值，在数据上，我有：

data                : [{{$countVisits}}, {{recentVisits}}]

但是，这没有用。 任何可以帮助我指出正确方向的帮助将不胜感激。

Answer 1

您无法将Laravel中的变量插入资产文件。 您只能插入视图。 资产应该是在请求中不会改变的部分。

通常的方法是将数据插入视图中，并将其存储在脚本可以访问的全局JS变量中。

即在home.blade.php执行以下操作：

<script>
var datasets = [@json($countVisits), @json($recentVisits)]

// or using an object
var theDatasets = {
    countVisits: @json($countVisits),
    recentVisits: @json($recentVisits)
}

//or directly
var countVisits = @json($countVisits)
var recentVisits = @json($recentVisits)
</script>

<!-- include your dashboard.js afterwards -->

然后，您可以按照与存储方式相对应的方式使用dashboard.js中的变量：

//from array
datasets[0]

//from object
theDatasets.countVisits

//directly
countVisits

解决这个问题的其他方法是

• 通过AJAX加载数据。 但这改变了您必须给出或硬编码路径的问题
• 将所有图表javascript放在视图中（如果仅在一个视图中使用，我会这样做，如果您希望组织代码，也可以从子视图中包含它）
• 将javascript文件创建为动态视图，然后让刀片将数据插入其中。 我从未见过这样做，而且似乎不合适，但这可能是可能的。