deadloop
@deadloop
Активно осваиваю PHP

Как передать массив в компонент Blade?

У меня есть компонент (код для построения графика). Как мне передать в него массив из данных?

Котроллер компонента:
<?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>
  • Вопрос задан
  • 582 просмотра
Пригласить эксперта
Ответы на вопрос 1
deadloop
@deadloop Автор вопроса
Активно осваиваю PHP
Реализовал так:
Во вьюшку-компанеент передаю
@json($name)
в самой вьюшке вызываю компонент так:
<x-chart canvas="canvas1" :name="['a', 'b']" :weight="['617594', '181045']"/>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы