我正在尝试使用ajax和morris.js创建图表,但我收到此错误:
Cannot call method 'match' of undefined
中的 morris-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 (我不应该称之为db,但是w / 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);
?>
实际上,一切都应该完美,因为console.log(outEvoVal);
显示了良好的字符串。
谢谢大家。
答案 0 :(得分: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,
});
}
});
});