我想把数据传递到Chart.js,但是卡片上什么都没有。如何解决这个问题?正确的传递数据到Chart.js的方法是什么?这样我就不能直接把数据放到脚本中了。
控制器
public function ViewAnalytic(){
$id = Auth::user()->id;
$electrical = DB::table('maintenances')->where('landlord_id', $id)->where('category', 'Electrical System')->count();
$pest = DB::table('maintenances')->where('landlord_id', $id)->where('category', 'Plumbing System')->count();
$plumbing = DB::table('maintenances')->where('landlord_id', $id)->where('category', 'Pest Infectations')->count();
$structural = DB::table('maintenances')->where('landlord_id', $id)->where('category', 'Structural Repairs')->count();
$appliances = DB::table('maintenances')->where('landlord_id', $id)->where('category', 'Electrical Appliances')->count();
$others = DB::table('maintenances')->where('landlord_id', $id)->where('category', 'Others')->count();
return view('analytic.analytic-page', compact('total_num', 'vacant', 'rented', 'user', 'paid', 'unpaid',
'electrical', 'pest', 'plumbing', 'structural', 'appliances', 'others'));
}
查看.blade.php
<div class="card-body px-3 py-4-5">
<canvas id="myChart" width="200" height="200"></canvas>
</div>
脚本
<script>
const data = {
labels: [
'Electrical System',
'Plumbing System',
'Pest Infections',
'Structural Repairs',
'Electrical Appliances',
'Others'
],
datasets: [{
label: 'My First Dataset',
data: [{!!$electrical!!}, {!!$plumbing!!}g, {!!$pest!!}, {!!$structural!!}, {!!$appliances!!}, {!!$others!!}],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(204, 102, 235)',
'rgb(255, 205, 86)',
'rgb(0, 204, 102)',
'rgb(102, 153, 255)',
'rgb(191, 0, 205)'
],
hoverOffset: 4
}]
};
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'pie',
data: data,
});
</script>
2条答案
按热度按时间z9zf31ra1#
在视图文件中发出一个 AJAX 请求,然后将值推送到图表中。
{!! json_encode($electrical) !!}
请看本教程
https://www.codeleaks.io/ajax-get-post-request-in-laravel/
yxyvkwin2#
{!!$plumbing!!}g
我认为你可以试着在你的数据中去掉这个“g”。乍一看,一切都是正确的。