Google 图表不显示数据

Question

我在使用 Google Chart、Twig 和 Symfony 时遇到问题。我对一个函数进行 ajax 调用，该函数将数据发送到 js 函数绘制图表。我在图表之外显示了数据，效果很好。我还尝试显示一个包含硬编码数据的图表，它也显示得很好。只有当我将控制器中的数据放入图表的数据表中时，它才不起作用。

我没有显示我的控制器，因为它正在正确发送数据。

这是我的代码：

绘图功能：

function drawGraphRepNoteOfColle() {
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ['Notes', 'Nombre'],
                {% for r in repartitionsColle %}
                    [{{ r.note }}, {{ r.nombre }}],
                {% endfor %}
            ]);

            var options = {
                chart: {
                    title: 'Company Performance',
                    subtitle: 'Sales, Expenses, and Profit: 2014-2017'
                }
            };

            var chart = new google.charts.Bar(document.getElementById('graphRepNoteColle'));

            chart.draw(data, options);
        }
    }

Ajax 调用：

function rechargerColleStats() {
        var groupes = document.getElementsByClassName("filled-in");
        var groupesSelected = getSelectedGroupesOf(groupes);
        var colleId = document.getElementById('collapside_colle_form_colles').value;
        var numAdherent = document.getElementById('numAdherent').value;

        var DATA = {groupesSelected: groupesSelected, idColle: colleId, numAdherent: numAdherent};
        var request = $.ajax({
            type: "POST",
            url: "{{ path('paces_statistique_calculstatistique_getstatscolle') }}",
            datatype: "html",
            data: DATA,
            success: function (response) {
                document.getElementById("bodyColapColle").innerHTML = response;
                drawGraphRepNoteOfColle();
                document.getElementById("tableauQ").reload(true);
            }
        });
    }

index.html.twig：

<nav class="top-nav panel-title">Statistiques</nav>
<div class="card-panel hoverable">
   // Groupes selected field (checkboxes)
   <div id="bodyColapGroupes">
      {% include 'PACESStatistiqueBundle:Default:groupesCheckBoxes.html.twig' %}
   </div>

   // Form to get colleId
   <fieldset style='display: inline; border: 2px solid deepskyblue;'>
       <legend> Choix de la colle</legend>
       {{ form_start(formColle) }}
       {{ form_end(formColle) }}
   </fieldset>
</div>

<div class="card-panel hoverable">
    Colles
    <div id="bodyColapColle">
       {% include 'PACESStatistiqueBundle:Default:collapsideColle.html.twig' %}
    </div>
</div>

collapsibleColle.html.twig：

<div id="colles">
    <fieldset style='display: inline; border: 2px solid deepskyblue;'>
        <legend> Minor </legend>
        {% if minor is defined %}
            {{ minor }} / {% if typeColle == 'QC' %}{{ nbQc }}{% else %}20{% endif %}
        {% endif %}
    </fieldset>
    <div class="center">
        <fieldset id="fieldchartA"  style='height:100%; width: 100%  ;border: 2px solid deepskyblue;'>
            <legend> Chart1</legend>
            <div id="graphRepNoteColle"></div>
        </fieldset>
    </div>
</div>

控制器中的 getStatsColleAction :

$repartitionsColles=$em->getRepository( RepartitionColle::class )->findBy(['idStatColle'=>$statsColle]);

            //on en recupere les données minor, major, medianne
            $notes=array();
            $nbRepartition = 0;
            foreach($repartitionsColles as $repartitionsColle){

                $repartition[$nbRepartition]['note'] = $repartitionsColle->getNote();
                $repartition[$nbRepartition]['nombre'] = $repartitionsColle->getNombre();

                $nbRepartition++;
            }
            array_multisort(array_column($repartition, 'note'), SORT_ASC, SORT_NUMERIC, $repartition);

发送的数组是$repartition。 getNote() 是浮点数，getNombre 是整数。

绘图函数和Ajax调用在index.html.twig中。

GetStatsColle（使用 AJAX 调用的函数）返回带有所需数据的 collapsideColle.html.twig。

Ajax 正在工作：我使用同一调用发送其他信息并且它被渲染。

Answer 1

我建议不要每次都依赖

google.charts.setOnLoadCallback

来绘制图表，
特别是如果您打算绘制多个图表，则每页只应调用一次

相反，交换事物的顺序并首先从

google.chart.load

开始，
然后你可以直接从ajax调用中绘制图表

您也可以在

callback

语句中包含

load

...

尝试类似...

google.charts.load('current', {
  callback: rechargerColleStats,
  packages:['bar']
});

function drawGraphRepNoteOfColle() {
    var data = google.visualization.arrayToDataTable([
        ['Notes', 'Nombre'],
        {% for r in repartitionsColle %}
            [{{ r.note }}, {{ r.nombre }}],
        {% endfor %}
    ]);

    var options = {
        chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017'
        }
    };

    var chart = new google.charts.Bar(document.getElementById('graphRepNoteColle'));

    chart.draw(data, options);
}

function rechargerColleStats() {
    var groupes = document.getElementsByClassName("filled-in");
    var groupesSelected = getSelectedGroupesOf(groupes);
    var colleId = document.getElementById('collapside_colle_form_colles').value;
    var numAdherent = document.getElementById('numAdherent').value;

    var DATA = {groupesSelected: groupesSelected, idColle: colleId, numAdherent: numAdherent};
    var request = $.ajax({
        type: "POST",
        url: "{{ path('paces_statistique_calculstatistique_getstatscolle') }}",
        datatype: "html",
        data: DATA,
        success: function (response) {
            document.getElementById("bodyColapColle").innerHTML = response;
            drawGraphRepNoteOfColle();
            document.getElementById("tableauQ").reload(true);
        }
    });
}