У меня есть компонент (код для построения графика). Как мне передать в него массив из данных?
Котроллер компонента:
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class Chart extends Component
{
public $name = [];
public $weight;
public function __construct($name, $weight)
{
$this->name = $name;
$this->weight = $weight;
}
public function render()
{
return view('components.chart');
}
}
Вьюшка компонента:
<div class="container">
<canvas id="myChart"></canvas>
</div>
<script>
massPopChart = new Chart(myChart, {
type: 'bar', // bar, horizontalBar, pie, line, doughnut, radar, polarArea
data: {
labels: [
Здесь должны быть данные, через запятую, которые передаются из переменной $name. Например:
'a', 'b', 'c'
],
datasets: [{
label: 'Заполнение',
data: [{{ $weight }}],
//backgroundColor:'green',
backgroundColor: [
'rgba(255, 99, 132, 0.6)',
'rgba(54, 162, 235, 0.6)',
'rgba(255, 206, 86, 0.6)',
'rgba(75, 192, 192, 0.6)',
'rgba(153, 102, 255, 0.6)',
'rgba(255, 159, 64, 0.6)',
'rgba(255, 99, 132, 0.6)'
],
borderWidth: 1,
borderColor: '#777',
hoverBorderWidth: 3,
hoverBorderColor: '#000'
}]
},
options: {
title: {
display: true,
text: 'Заполнение бочек углем',
fontSize: 25
},
legend: {
display: true,
position: 'right',
labels: {
fontColor: '#000'
}
},
layout: {
padding: {
left: 50,
right: 0,
bottom: 0,
top: 0
}
},
tooltips: {
enabled: true
}
}
});
</script>
Вьюшка:
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<link href="style.css" rel="stylesheet">
</head>
<body>
<x-chart name="{{$arr = ['a', 'b', 'c']}}" weight="1000"/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
