如何显示Laravel控制器中的变量，以查看具有特定索引的javascript

Question

我想从laravel控制器传递变量索引到javascript区域上的视图，这样我就可以创建图表

我的控制器

<?php
namespace AppHttpControllers;
use AppGenderSeries;
use IlluminateHttpRequest;
class EventDashboardController extends Controller
{
/**
* Display a listing of the resource.
*/
public function index()
{
$titles = GenderSeries::select('titles','numbers')->get();
return view('events.dashboard',compact('titles'));
}
}

和我的视图文件

@extends('layouts.templates.event')
@section('title','Store Dashboard')
@section('content')
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<canvas id="genderCount" width="100%" height="80"></canvas>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<canvas id="genderTitle" width="100%" height="80"></canvas>
</div>
</div>
</div>
</div>
@endsection
@section('scripts')
<script>
//Show graph of individuals count by gender
var ctx = document.getElementById('genderTitle');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: {!! $titles !!},
datasets: [{
label: '# Gender Series',
data:{!! $titles !!},
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}]
},
}
});
</script>
@endsection

在javascript标签上，我想显示javascript数据集数据的标题。我想显示数字来制作图表。

当我尝试时，我得到了这个并查看了我的源代码

<script>
//Show graph of individuals count by gender
var ctx = document.getElementById('genderCount');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: [{"title":"Feminism","numbers":"50"}],
datasets: [{
label: '# Individual By Gender',
data:[{"title":"Feminism","numbers":"50"}],
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}]
},
}
});
</script>

我需要帮助来修复这个

Answer 1

使用收集方法pluck():

@section('scripts')
<script>
//Show graph of individuals count by gender
var ctx = document.getElementById('genderTitle');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: {!! $titles->pluck('title') !!},
datasets: [{
label: '# Gender Series',
data:{!! $titles->pluck('numbers') !!},
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}]
},
}
});
</script>
@endsection