Chart.jsとmySQLの円グラフ

いくつかのクエリの結果を使用して円グラフを表示しようとしています。しかし、何も表示されていません。場合Chart.jsとmySQLの円グラフ

$(document).ready(function(){ 
 
\t $.ajax({ 
 
\t url:"http://localhost/bigdata/data.php", 
 
    method:"GET", 
 
    success:function(data) \t { 
 
\t \t console.log(data); 
 
\t \t var male =[]; 
 
\t \t var female =[]; 
 
\t \t 
 
\t \t male.push("male: "+data[0].maleid); 
 
\t  female.push("female: "+data[1].femaleid); 
 
\t 
 
\t var data1 = { 
 
    labels: [ 
 
     "Male", 
 
     "Female" 
 
    ], 
 
    datasets: [ 
 
     { 
 
\t \t  
 
\t \t  data: [male,female], 
 
      backgroundColor: [ 
 
       "#FF6384", 
 
       "#36A2EB" 
 
      ], 
 
      hoverBackgroundColor: [ 
 
       "#FF6384", 
 
       "#36A2EB" 
 
      ] 
 
     }] 
 
}; 
 

 
var ctx =$("#mycanvas"); \t 
 
var myPieChart = new Chart(ctx,{ 
 
    type: 'doughnut', 
 
    data: data1, 
 
\t options: { 
 
     animation:{ 
 
      animateScale:true, 
 
\t \t \t responsive: true, 
 
    maintainAspectRatio: true 
 
     } 
 
    } 
 
    
 
}); \t 
 
\t 
 
\t 
 
\t 
 
\t }, 
 
\t error:function(data){ 
 
\t \t console.log(data); 
 
\t } 
 
}); 
 
}); 
 

 
<!-- end snippet--!> 
 
Besides , my php code of query execution works also my html page . 
 

 
<!-- begin snippet: js hide: false console: true babel: false -->

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
<meta charset ="utf-8"/> 
 
<title>Chart</title> 
 
<style type="text/css"> 
 
#chart-container{ 
 
width:640px; 
 
height:auto; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div id="chart-container"> 
 
<canvas id="mycanvas"></canvas> 
 
</div> 
 

 

 

 
<script src="Chart.js"></script> 
 
<script src="jquery-3.2.1.js"></script> 
 
<script src="app.js"></script> 
 
</body> 
 
</html>

<?php 
 
header('Content-Type:application\json'); 
 
define('DB_HOST','127.0.0.1'); 
 
define('DB_USERNAME','root'); 
 
define('DB_PASSWORD',''); 
 
define('DB_NAME','gestionpersdb'); 
 
$mysqli=new mysqli(DB_HOST,DB_USERNAME,DB_PASSWORD,DB_NAME); 
 

 
if(!$mysqli) 
 
{ 
 
\t die("connection failed:".$myqli->error); 
 
} 
 

 

 

 
$male="SELECT * FROM gestiondb_users WHERE gender='male'"; 
 
$result_male=$mysqli->query($male); 
 
$num_males=mysqli_num_rows($result_male); 
 
$female="SELECT * FROM gestiondb_users WHERE gender='female'"; 
 
$result_female=$mysqli->query($female); 
 
$num_females=mysqli_num_rows($result_female); 
 

 
$data=array(); 
 
$data[0]=$num_males; 
 
$data[1]=$num_females; 
 

 

 
$result_male->close(); 
 
$result_female->close(); 
 
$mysqli->close(); 
 

 
print json_encode($data); 
 
?>

出典

2017-05-15 mira mohamed

print json_e ncode（$ data）; –

私はPHPスクリプトを実行してから、結果を回復すると思うので、もっと詳しく教えてください print json_encode（$ data）; –

それから私はそれを得る： –

あなたはまだそれが動作するように取得しようとしているここにある、：ミスが私のJavaScriptである場合、私にはわかりません私がやったこと：

<script type="text/javascript"> 

$.ajax({ 
url:"getdata.php", 
method:"GET", 
success:function(data) { 
console.log(data); 
var malenum =[1]; 
var femalenum =[2]; 



var ctx = document.getElementById("myChart"); 
var myChart = new Chart(ctx, { 
    type: 'pie', 
    data: { 
     labels: ["Male","Female"], 
    datasets: [{ 
     label: 'Genders', 
     data: [malenum,femalenum], 
     backgroundColor: [ 
      'rgba(255, 99, 132, 0.2)', 
      'rgba(54, 162, 235, 0.2)' 
     ], 
     borderColor: [ 
      'rgba(255,99,132,1)', 
      'rgba(54, 162, 235, 1)' 
     ], 
     borderWidth: 1 
    }] 
}, 

}); 

}, 
error:function(data){ 
    console.log(data); 
} 
}); 
</script>

出典

2018-02-05 22:35:30

答えて

関連する問題