使用chart.js和ajax更新图表

时间:2016-09-14 17:42:24

标签: javascript php ajax chart.js

我正在尝试使用chart.js创建一个圆环图,通过使用onclick事件调用的ajax函数传递数据。问题是尽管数据到达,但不会显示图表。

这是ajax函数

<script src="/newton/js/Chart.bundle.js"></script>
<?php
include 'connessione.php';
$nome = $_GET["nome"];
$cn = connessione();
$query = 'SELECT Pv, Pp, Pb FROM risultati WHERE Name = "'.$nome.'"';
if ($result = $cn->query($query)){
    $vittorie = 0;
    $pareggi = 0;
    $bye = 0;
    while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
        $vittorie += $row[Pv];
        $pareggi += $row[Pp];
        $bye += $row[Pb];
        }
    }
else printf("Errormessage: %s\n", $result->error);
?>

<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById("myChart");
var vittorie = <?php print $vittorie ?>;
var pareggi = <?php print $pareggi ?>;
var bye = <?php print $bye ?>;
var graficoRisultati = new Chart(ctx, {
type: 'doughnut',
data: {
    labels: ["Vittorie", "Pareggi", "Bye"],
    datasets: [{
        data: [vittorie, pareggi, bye],
        backgroundColor: [
            '#4BC0C0',
            '#FF6384',
            '#FFCE56'
        ],
        borderWidth: 1
    }]
},
    options: {
        responsive: true,
        maintainAspectRatio: true,
    }
});
</script>

这是creaGrafico.php

function classificaMagic(){
    $cn = connessione();
    $query = 'SELECT * FROM LM ORDER BY Punti DESC LIMIT 10';

    echo'
    <div id="content">
    <article class="post">
    <h2 class="entry-title">Classifica giuoco del Magic</h2><p>';
    if ($result = $cn->query($query)){
        echo'
        <table name="classificaMagic">';

        while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
            $stampaNome = explode(", ", $row[Name]);
            echo'
            <tr onClick="generaGrafico(\''.$row[Name].'\')">
                <td>'.$stampaNome[1].' '.$stampaNome[0].'</td>
                <td>'.$row[Punti].'</td>
            </tr>';
        }

        echo'
        </table>
        </article> <!-- .post  -->
        <hr />
        </div> <!-- #content -->

        <aside id="sidebar">
            <div class="widget">
                <div id="stats"  style="width: 300; height: 300;"></div>
            </div>
        </aside>';

    }
    else printf("Errormessage: %s\n", $result->error);
}

这就是调用ajax的地方

>>> s = [('769817', [6]), ('769819', [4, 10]), ('769819', [4, 10])]
>>> [(x,y) for x,y in {key: value for (key, value) in s}.items()]
[('769817', [6]), ('769819', [4, 10])]
>>>

正如我之前所说,数据到达,但图表已创建。 我哪里错了?

0 个答案:

没有答案