谷歌圖表不顯示數據

Question

我有一個谷歌圖表，小枝ans Symfony的問題。我對發送數據到js函數繪製圖表的函數進行ajax調用。我在圖表外顯示數據，並且運行良好。我也試圖顯示一個硬編碼數據的圖表，它也很好地顯示。只有當我把我的Controller的數據放入圖表的數據表中時，它纔會起作用。

我沒有顯示我的控制器，因爲它正確地發送數據。

這裏是我的代碼：

繪圖功能：

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); 

陣列發送爲$再分配。 getNote（）是一個浮點數，getNombre是一個整數。

繪圖函數和Ajax調用在index.html.twig中。

GetStatsColle（使用AJAX調用函數）返回collapsideColle.html.twig與所需的數據。

Ajax正在工作：我發送其他信息與相同的調用，它被呈現。

Answer 1

我建議不依賴google.charts.setOnLoadCallback繪製圖表每次，
特別是如果你打算繪製多個圖表，它應該只每頁調用一次

代替，交換事物的秩序，並開始google.chart.load第一，
那麼你可以直接從Ajax調用繪製圖表

可以包括在load聲明以及在callback ...

嘗試類似...

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); 
     } 
    }); 
}