如何在Symfony中实现动态图表？

// src/Controller/ChartController.php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Routing\Annotation\Route;

class ChartController extends AbstractController
{
    /**
     * @Route("/chart", name="chart")
     */
    public function index()
    {
        // 获取图表数据
        $data = $this->getData();

        return $this->render('chart/index.html.twig', [
            'data' => $data,
        ]);
    }

    private function getData()
    {
        // 从数据源获取数据
        // 假设数据是一个包含标签和值的关联数组
        $data = [
            ['label' => 'A', 'value' => 10],
            ['label' => 'B', 'value' => 20],
            ['label' => 'C', 'value' => 30],
        ];

        return json_encode($data);
    }
}

{# templates/chart/index.html.twig #}

{% extends 'base.html.twig' %}

{% block body %}
    <canvas id="myChart"></canvas>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var data = {{ data|raw }};
            var labels = data.map(function(item) {
                return item.label;
            });
            var values = data.map(function(item) {
                return item.value;
            });

            var ctx = document.getElementById('myChart').getContext('2d');
            var chart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Chart',
                        data: values,
                        backgroundColor: 'rgba(0, 123, 255, 0.5)',
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        });
    </script>
{% endblock %}