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 Call：

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.chart.load每次绘制图表，
特别是如果你打算绘制多个图表，它应该每页只调用一次

相反，交换事物的顺序，首先从callback开始，
然后你可以直接从ajax调用中绘制图表

您也可以在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); } }); } ...

尝试类似......

URL GOTO=http://mywebsite.here.com/

SET !VAR1 EVAL("var randomNumber=Math.floor(Math.random()*20 + 5); randomNumber;")
WAIT SECONDS={{!VAR1}}
TAG POS=1 TYPE=A ATTR=TXT:Get<SP>a<SP>random<SP>post!

Google Chart不显示数据

1 个答案: