2013-07-30 33 views
3

我試圖創建一個使用Ajax和morris.js圖表​​「匹配」,但我得到這個錯誤:阿賈克斯+ morris.js:不能調用方法的不確定

Cannot call method 'match' of undefinedmorris-0.4.3.min.js:1

實際上,該圖只是不顯示。

這裏是我的代碼:

的index.html


<link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 
<script src="http://cdn.oesmith.co.uk/morris-0.4.3.min.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){  
    $.ajax({  
    url: 'db.php', //le fichier qui va nous fournir la réponse  
    success: function(outEvoVal) {  
     console.log(outEvoVal); 

     Morris.Line({ 
     element: 'graph', // l'élément qui va centenir le dessin 
     data: outEvoVal, //notre objet de données  
     xkey: 'd', // on souhaite afficher notre graph en fonction de temps alors on assigne 'd' pour les axes des x 
     ykeys: ['i','q'], // les autres sur les axes des y 
     labels: ['chaine','prea'], // ajouter un label a chaque courbe  
     lineColors: ['#0000FF','#044c29'], // différencier chaque courbe avec une couleur  
     lineWidth: 2, // largeur de chaque ligne 
     });  
    }  
    }); 
}); 
</script> 
</head> 
<body> 
    <div id="graph"></div> 
</body> 

db.php中(我不應該叫分貝,但瓦特/ E)

<?php 
    /*Mysql hostname*/ 
    $hostname = 'localhost'; 
    /*Mysql username*/ 
    $username = 'root'; 
    /*Mysql password*/ 
    $password = 'root'; 

try { 
    $db = new PDO("mysql:host=$hostname;dbname=kpi", $username, $password); 
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
} 

catch(PDOException $e) { 
echo "erreur: ".$e->getMessage(); 
} 

//requete qui va compter le nombre d’utilisateur ,les question et les reponses en fonction de la date 
$requete = $db->query('SELECT Heure, TAT_CHAINE, TAT_PREA FROM out_evo_tat group by Heure'); 

//faire une boucle pour récupérer le résultat de notre requête 
$requete->fetch(PDO::FETCH_ASSOC); 
while($row = $requete->fetch()) { 
    $tableau[]=array('d'=>$row['Heure'],'i'=>$row['TAT_CHAINE'],'q'=>$row['TAT_PREA']); 
} 

//afficher le tableau sous format json 
echo json_encode($tableau); 
?> 

其實,一切都應該和rk完美,因爲console.log(outEvoVal);顯示良好的字符串。

謝謝大家。

+1

看看這個問題,http://stackoverflow.com/questions/13204813/morris-js-on-rails-3-2-1-cannot- get-json-from-html – DevZer0

+1

非常感謝:) – MathieuLuyten

回答

1

只是改變劇本

$(document).ready(function(){  
    $.ajax({  
    url: 'db.php', 
    dataType: "json", 
    success: function(outEvoVal) {  
     console.log(outEvoVal); 
     Morris.Line({ 
     element: 'graph', 
     data: outEvoVal, 
     xkey: 'd', 
     ykeys: ['i','q'], 
     labels: ['chaine','prea'], 
     lineColors: ['#0000FF','#044c29'], 
     lineWidth: 2, 
     });  
    }  
    }); 
});