简体   繁体   English

Ajax + morris.js:无法调用undefined的方法'match'

[英]Ajax + morris.js : Cannot call method 'match' of undefined

I'm trying to create charts using ajax and morris.js, but I get this error : 我正在尝试使用ajax和morris.js创建图表,但是我收到此错误:

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

Practically, the graph just doesn't show up. 实际上,图表并没有显示出来。

Here's my code : 这是我的代码:

index.html 的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 (which I should not have called db, but w/e) 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);
?>

Actually, everything should work perfectly, as the console.log(outEvoVal); 实际上,一切都应该完美,就像console.log(outEvoVal); displays the good character strings. 显示好的字符串。

Thanks all. 谢谢大家。

just change the script to 只需将脚本更改为

$(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,
      });    
    }    
  });
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM