Salut a tous,

Je bosse avec la librairie chartjs, j'ai besoin de passer des variables, j'ai créé un tableau d'exemple que j'arrive bien a passer du controller a twig mais pas de twig a mon fichier js que je gère avec Encore

Mon Controller :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
#[Route('/', name: 'home')]
    public function index(): Response
    {
        $test = ['test1', 'test2', 'test3', 'test4', 'test5', 'test6'];
 
        return $this->render('home/index.html.twig', [
            'lab' => json_encode($test)
        ]);
    }
Mon Twig :

Code twig : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% extends 'base.html.twig' %}
 
{% block title %}Hello HomeController!{% endblock %}
 
{% block body %}
<div class="container">
    <h1>Home</h1>
 
    <canvas id="myChart" width="400" height="100"></canvas>
</div>
{% endblock %}
 
{% block javascripts %}
    {{ parent() }}
    {{ encore_entry_script_tags('chart') }}
{% endblock %}

Mon fichier chart.js (lire le commentaire dans le code)

Code js : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import Chart from 'chart.js/auto';
 
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: lab, // JE NE SAIS PAS COMMENT RECUPERER LA VARIABLE LAB DE MON CONTROLLER ICI... il me dit : lab is not defined
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
 
console.log('ok');

quelqu'un aurait une idée ?

merci a vous.