Symfony 5 Как отобразить несколько диаграмм Google с помощью jQuery вкладок пользовательского интерфейса - PullRequest
Новая
       31

Symfony 5 Как отобразить несколько диаграмм Google с помощью jQuery вкладок пользовательского интерфейса

0 голосов
/ 01 мая 2020

Моя первая Symfony 5 попыток, и я пытаюсь использовать Google Charts в первый раз. Я использую CMENGoogleChartsBundle, который предоставляет расширение Twig и PHP объекты для отображения диаграмм.

Я хочу отображать различные графики, которые должны быть доступны через jQuery Вкладки пользовательского интерфейса У меня также есть таблица со всеми отображаемыми данными. При нажатии на вкладку со страной, например, я хочу обновить график и таблицу. Я пытался отобразить все данные непосредственно в своем шаблоне ветки (fruitsoverview. html .twig), но при нажатии на вкладку я бы снова отобразил страницу чуть ниже вкладок, плюс я потерял бы любую возможную настройку моего поисковый фильтр, если вся страница будет перезагружена. Затем я прочитал, что вы можете создать представление только с содержимым, которое необходимо обновить, поэтому я сделал это, и в моем контроллере у меня теперь есть: 

if ($request->isXmlHttpRequest())
{

return $this->render('fruits/chart.html.twig', [
        'searchFilter' => $searchFilter->createView(),
        'fruitCounts' => $fruitCounts,
        'barchart' => $barchart
        ]);
}else{

    return $this->render('fruits/fruitsoverview.html.twig', [
        'searchFilter' => $searchFilter->createView(),
        'fruitCounts' => $fruitCounts,
        'barchart' => $barchart
        ]);
}}

Это решило проблему с рендерингом, но диаграмма не показано. Данные диаграммы доступны в виде веточки, но график отображается только на вкладке по умолчанию. Я действительно отображаю таблицу с правильными данными. Что может быть не так или лучше вопрос, как это правильно настроить. Я уверен, что я еще не понял концепцию Symfony и, вероятно, не из jQuery Tab. Любая помощь будет высоко ценится. Заранее большое спасибо.

ОБНОВЛЕНИЕ

Я теперь обновил свой код и получил частично работу, кроме диаграммы. Таким образом, переменные ветки для таблицы обновляются с новым содержимым после запроса AJAX, но диаграмма не изменяется. Я сделал
{{dump (barchart)}} на графике. html .twig, и я тоже получаю обновленные данные внутри него, но график не перерисовывается. Как мне этого добиться?

контроллер 

    if ($request->isXmlHttpRequest())
    {         
        $response = new JsonResponse();
        $response->setStatusCode(200);
        return new JsonResponse([
                'html' => $this->renderView('fruits/chart.html.twig', [ 
                    'fruitCounts' => $fruitCounts,
                    'barchart' => $barchart
                    ])     
                ]);

В моем основном шаблоне у меня есть код ниже и Javascript. $ ( "# DIV клиент-л oop -container") html (данные html.). похоже, обновляет переменные ветки в моем шаблоне chart.twig. 

   <div id="client-loop-container">
     {% include 'chart.html.twig' %}
   </div>


     {% block javascripts %}
        {{ encore_entry_script_tags('app') }}

     <script type="text/javascript">

     $( function() {

     $('#country-tabs a').on('click', function (e) {
        e.preventDefault()
        $(this).tab('show');
        var $this = $(this),
        loadurl = $this.attr('href');

        var form = $('form');

        var jsonData = $.ajax({
            url: loadurl,  
            type:       'POST',
            data: form.serializeArray(),
            dataType:   'json',  

            success: function(data, status) {  

               $("div#client-loop-container").html(data.html);  
            }
          }).responseText;
        });

диаграмма. html .twig 

    <div id="client-loop-container">
    <div class="w-100" id="div_chart"></div>

        <table class="table">
            <tr>
                <th>Date</th>
                {% for fruitcount in fruitcounts %}
                    <th>{{ fruitcount }} </th>
                {% endfor %}
            </tr>
        </table>
    </div>

        {% block javascripts %}

         <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
          {{ gc_draw(barchart, 'div_chart') }}          
        </script>

       {% endblock %}
...