在 laravel 中将数组从控制器传递到 js
passing an array from controller to js in laravel
我正在我的索引页中制作一条莫里斯线,我正在尝试从我的控制器向它传递数据
控制器:
$chartData= DB::table('transactions')
->select('v_type',DB::raw("MONTH(transaction_created_at)"),DB::raw('sum(v_value)'))
->groupby('v_type',DB::raw("MONTH(transaction_created_at)"))
->get();
return view('layouts/dashboard/index', ['tickets' => $tickets , 'types'=> $types,'response'=>json_encode($all),'chartData' => $chartData]);
index.blade.php
.......<div class="row clearfix">
<div class="card">
<div class="header">
<h4>Charts</h4>
</div>
<div class="body">
<div id="pushups" class="graph-wrapper" > </div>
</div>
</div>
</div>
</div>
......
@section('extra-script')
{{Html::script('plugins/jquery-countto/jquery.countTo.js')}}
{{Html::script('plugins/raphael/raphael.min.js')}}
{{Html::script('plugins/morrisjs/morris.js')}}
{{Html::script('plugins/chartjs/Chart.bundle.js')}}
{{Html::script('plugins/flot-charts/jquery.flot.js')}}
{{Html::script('plugins/flot-charts/jquery.flot.resize.js')}}
{{Html::script('plugins/flot-charts/jquery.flot.pie.js')}}
{{Html::script('plugins/flot-charts/jquery.flot.categories.js')}}
{{Html::script('plugins/flot-charts/jquery.flot.time.js')}}
{{Html::script('plugins/jquery-sparkline/jquery.sparkline.js')}}
{{Html::script('js/pages/index.js')}}
@endsection
在我的 index.js 中我有这个功能
function initLineChart() {
Morris.Line({
element: 'pushups',
data: [
{ day: 'Monday', pushups: 20, beers: 2 },
{ day: 'Tuesday', pushups: 10, beers: 2 },
{ day: 'Wednesday', pushups: 5, beers: 3 },
{ day: 'Thursday', pushups: 5, beers: 4 },
{ day: 'Friday', pushups: 20, beers: 1 }
],
xkey: 'day',
parseTime: false,
ykeys: ['pushups','beers'],
labels: ['Pushups','Beers'],
lineColors: ['#373651','#E65A26']
});
}
这里我使用这些数据只是为了测试,但是我想使用 $chartdata
来填充这条莫里斯线
图表数据 json 看起来像这样
[
{
"v_type": "money_value",
"MONTH(transaction_created_at)": 9,
"sum(v_value)": 15.5
},
{
"v_type": "tariff_switch",
"MONTH(transaction_created_at)": 9,
"sum(v_value)": 3
},
.......]
所以我该怎么做
提前致谢。
您可以像这样将 php 数组传递到 index.js 文件:
index.blade.php
<script type="text/javascript">var chart_data =<?php echo chartData; ?>;</script>
{{Html::script('js/pages/index.js')}}
变量 chart_data 可以在 index.js 文件中访问
我正在我的索引页中制作一条莫里斯线,我正在尝试从我的控制器向它传递数据 控制器:
$chartData= DB::table('transactions')
->select('v_type',DB::raw("MONTH(transaction_created_at)"),DB::raw('sum(v_value)'))
->groupby('v_type',DB::raw("MONTH(transaction_created_at)"))
->get();
return view('layouts/dashboard/index', ['tickets' => $tickets , 'types'=> $types,'response'=>json_encode($all),'chartData' => $chartData]);
index.blade.php
.......<div class="row clearfix">
<div class="card">
<div class="header">
<h4>Charts</h4>
</div>
<div class="body">
<div id="pushups" class="graph-wrapper" > </div>
</div>
</div>
</div>
</div>
......
@section('extra-script')
{{Html::script('plugins/jquery-countto/jquery.countTo.js')}}
{{Html::script('plugins/raphael/raphael.min.js')}}
{{Html::script('plugins/morrisjs/morris.js')}}
{{Html::script('plugins/chartjs/Chart.bundle.js')}}
{{Html::script('plugins/flot-charts/jquery.flot.js')}}
{{Html::script('plugins/flot-charts/jquery.flot.resize.js')}}
{{Html::script('plugins/flot-charts/jquery.flot.pie.js')}}
{{Html::script('plugins/flot-charts/jquery.flot.categories.js')}}
{{Html::script('plugins/flot-charts/jquery.flot.time.js')}}
{{Html::script('plugins/jquery-sparkline/jquery.sparkline.js')}}
{{Html::script('js/pages/index.js')}}
@endsection
在我的 index.js 中我有这个功能
function initLineChart() {
Morris.Line({
element: 'pushups',
data: [
{ day: 'Monday', pushups: 20, beers: 2 },
{ day: 'Tuesday', pushups: 10, beers: 2 },
{ day: 'Wednesday', pushups: 5, beers: 3 },
{ day: 'Thursday', pushups: 5, beers: 4 },
{ day: 'Friday', pushups: 20, beers: 1 }
],
xkey: 'day',
parseTime: false,
ykeys: ['pushups','beers'],
labels: ['Pushups','Beers'],
lineColors: ['#373651','#E65A26']
});
}
这里我使用这些数据只是为了测试,但是我想使用 $chartdata
来填充这条莫里斯线
图表数据 json 看起来像这样
[
{
"v_type": "money_value",
"MONTH(transaction_created_at)": 9,
"sum(v_value)": 15.5
},
{
"v_type": "tariff_switch",
"MONTH(transaction_created_at)": 9,
"sum(v_value)": 3
},
.......]
所以我该怎么做
提前致谢。
您可以像这样将 php 数组传递到 index.js 文件:
index.blade.php
<script type="text/javascript">var chart_data =<?php echo chartData; ?>;</script>
{{Html::script('js/pages/index.js')}}
变量 chart_data 可以在 index.js 文件中访问