使用带有 Laravel 的chart.js 将数据从控制器传递到视图

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/31375425/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-14 11:56:16  来源:igfitidea点击:

Using chart.js with laravel passing data from controller to view

javascriptphplaraveleloquentchart.js

提问by Clay

Trying to utilize chart.js in my laravel app. In my controller, I'm using Eloquent to perform a simple query of the database:

尝试在我的 Laravel 应用程序中使用 chart.js。在我的控制器中,我使用 Eloquent 来执行一个简单的数据库查询:

//sampleController.php

//sampleController.php

public function test()
{
  $inventories = Inventory::all();
  $dates = $inventories->lists('updated_at');
  $totals = $inventories->lists('item_4801');

  return view('pages.test')
      ->with('dates')
      ->with('totals');
}

I'm passing 'dates' and 'totals' to my view:

我将“日期”和“总计”传递给我的视图:

//test.blade.php

//test.blade.php

@extends('app')

@section('content')
  <canvas id="myChart" width="400" height="400"></canvas>
@stop

@section('footer')
  <script src="assets/admin/js/Chart.min.js"></script>

  <script>
    var ctx = document.getElementById("myChart").getContext("2d");
    var data = {
        labels: {!! json_encode($dates) !!},
        datasets: [
            {
                label: "My Data",                    
                data: {!! json_encode($totals) !!}
            }
        ]
    };
    var myLineChart = new Chart(ctx).Line(data);
  </script>
@stop

This doesn't work. The chart placeholder shows but it seems the data is being read as null. I'm guessing I'm just not passing the data in the correct format, but not sure exactly how I would do that. I can confirm that the data is being passed from controller to view, as I can dump the variable and see the data. Evidently it's just not in a format that chartjs can understand. Any information would be greatly appreciated. Just a nudge in the right direction would help. Many thanks, Clay

这不起作用。图表占位符显示,但似乎数据被读取为空值。我猜我只是没有以正确的格式传递数据,但不确定我将如何做到这一点。我可以确认数据正在从控制器传递到视图,因为我可以转储变量并查看数据。显然它只是不是chartjs可以理解的格式。任何信息将不胜感激。只要朝着正确的方向轻推就会有所帮助。非常感谢,粘土

回答by Clay

Turns out, it was the 'dates' variable causing the problem (in addition to a syntax error). Chartjs was looking for an array like: ["2015/06/08", 2015/06/13", "2015/6/20"]instead of the collection object from the eloquent query. So I ran $dates = array_column($inventories->toArray(), 'updated_at');to get the array, then reformatted the dates by running:

事实证明,这是导致问题的“日期”变量(除了语法错误)。Chartjs 正在寻找一个类似的数组: ["2015/06/08", 2015/06/13", "2015/6/20"]而不是 eloquent 查询中的集合对象。所以我跑去$dates = array_column($inventories->toArray(), 'updated_at');获取数组,然后通过运行重新格式化日期:

foreach ($dates as $date){
    $formatted_dates[] = date('m/d/Y', strtotime($date));
}

Then I passed $formatted_datesto the view. I'm sure there's a better way, but I'm learning more everyday and it works for me!

然后我传递$formatted_dates到视图。我相信有更好的方法,但我每天都在学习更多,它对我有用!

回答by u6385294

In your model;

在你的模型中;

use this

用这个

public function getCreatedAtAttribute($value)
{
    return  date('m/d/Y', strtotime($value));
}