web-dev-qa-db-fra.com

Graphique Google "Le conteneur n'est pas défini"

J'ai résolu mon problème mais je ne peux pas y répondre moi-même car je suis trop nouveau sur ce site:

s'avère que je devais utiliser ce qui suit:

chart = new google.visualization.PieChart(document.getElementById('pie_today_div'));

J'utilisais JQuery pour accéder à l'élément, $('#pie_today_div'). À l'heure actuelle, les preuves indiquent que le constructeur PieChart doit avoir un code JS standard, document.getElementById('pie_today_div')

Peut-être que quelque chose d'autre se passe, mais changer la façon dont j'accède à l'élément conteneur corrige mon code

PROBLÈME ORIGINAL POUR RÉFÉRENCE À MA SOLUTION

J'obtiens une erreur "Le conteneur n'est pas défini" lorsque j'essaie d'instancier un objet Google PieChart.

J'ai validé ma page à http://validator.w3.org/ et j'obtiens une jolie bannière verte disant qu'elle valide.

Je ne reçois aucune erreur js lors du chargement de la page. Mon appel Ajax fait un aller-retour complet avec les données que je veux de la base de données.

Voici mon HTML 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <link href="/css/note.css?10022012" rel="stylesheet" type="text/css" media="screen">
        <script type="text/javascript" language="javascript" src="/call/js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">google.load('visualization', '1.0', {'packages':['corechart']});</script>
        <script type="text/javascript" language="javascript" src="/call/js/init.js?10042012-2"></script>
        <title>Call Stats</title>
    </head>
    <body>
        <a href="#" id="pie_today_link">Today Stats</a>
        <div id="pie_today_div"></div>
    </body>
</html>

voici le js: 

function drawPieChartToday() {

    $.post('/call/ajax.php5',{
        action:'pieToday'
    }, function(ticketData) {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Count');
        data.addColumn('number', 'Topic');
        for (var key in ticketData){
            data.addRow([key, ticketData[key]]);
        }
        options = {
            title: 'Issue Topics'
        };
        alert($('#pie_today_div').attr('id'));
        chart = new google.visualization.PieChart($('#pie_today_div'));
        chart.draw(data, options);
    },'json');     
}

voici mon code de débogage pour m'assurer que l'élément a bien été trouvé: alert($('#pie_today_div').attr('id')); <- alertes "pie_today_div"

apichartscontainers
26
Mike

Je ne suis pas un fan de jquery, mais je pense que $ ('# pie_today_div') renvoie un ensemble d'éléments correspondants. Le calcul d'attribut fonctionne parce que (à partir de jquery documentation ) il "obtient la valeur d'un attribut pour le premier élément de l'ensemble des éléments correspondants".

Alors essayez

chart = new google.visualization.PieChart($('#pie_today_div')[0]);

ou directement

chart = new google.visualization.PieChart(document.getElementById('pie_today_div'));
33
abidibo

Une erreur de conteneur est exactement cela, il cherche l'exemple d'ID:

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

Vous obtiendrez cette erreur "Le conteneur n'est pas défini" pour les graphiques Google si cet ID vous manque.

9
Tom Stickel

Il doit y avoir une ligne où vous chargez les types de visualisation que vous souhaitez avoir dans votre page Web. Ça ressemble à ça

google.load("visualization", "1", {packages: ["corechart"]});

Ici, je charge le package corechart. Placez cette ligne comme première ligne après dans le <script> balise à l'intérieur de votre page HTML comme index.html. Cela devrait résoudre le problème.

1
Akbar