在图表js laravel刀片中解析数组

时间:2017-10-04 06:29:23

标签: javascript php laravel charts

我需要每月向laravel中的图表显示温度 我的视图页面包括 temp.blade

<script>
    console.log({!! $temp !!});
    console.log({!! $dateTemp !!});
    window.onload = function() {
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: {!! $temp !!},
            datasets: [{
                label: 'Temperature',
                data: {!! $dateTemp !!},
                borderWidth: 1
            }]
        }
    });
    }
</script>

和控制器

public function tempChart()
{
    $temp = Temps::select(DB::raw('temp'))
        ->orderBy('date_temp','asc')
        ->get();
    $temp->implode(',',$temp);
    $dateTemp = Temps::select(DB::raw('temps'))
        ->select('date_temp')
        ->orderBy('date_temp','asc')
        ->get();
    $dateTemp->implode(',',$dateTemp);
    //dd($temp,$dateTemp);
    return view('report/temp')
        ->with('temp',$temp)
        ->with('dateTemp',$dateTemp);
}

它无法显示数据数组但显示

  

[{...}],[{...}],[{...}]

2 个答案:

答案 0 :(得分:0)

尝试为数据添加高位逗号?

        datasets: [{
            label: 'Temperature',
            data: '{!! $dateTemp !!}',
            borderWidth: 1
        }]

答案 1 :(得分:0)

我不确定您使用的是哪个图表库,但是大多数图表库都需要一个字符串或整数数组,并且您可以为它们提供一组对象。

我认为你只需要在php(或javescript)中转换你的数组

php方式:

$temp = Temps::select('temp'`)
    ->orderBy('date_temp','asc')
    ->get()
    ->pluck('temp');


$dateTemp = Temps::select(['temps', 'data-temp'])
    ->orderBy('date_temp','asc')
    ->get()
    ->pluck('data-temp'); // I am not whats the acual query you want but this is the idea

然后如果您使用laravel 5.5只需在刀片上书写

<script>
window.onload = function() {

    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: @json($temp),
            datasets: [{
                label: 'Temperature',
                data: @json($dateTemp) ,
                borderWidth: 1
            }]
        }
    });

}
</script>