Question

我正在尝试使用某些查询的结果显示饼图。但没有任何表现。我不知道我的javascript错误在哪里：

$(document).ready(function(){
	$.ajax({
	url:"http://localhost/bigdata/data.php",
    method:"GET",
    success:function(data)	{
		console.log(data);
		var male =[];
		var female =[];
		
		male.push("male: "+data[0].maleid);
	    female.push("female: "+data[1].femaleid);
	
	var data1 = {
    labels: [
        "Male",
        "Female"
    ],
    datasets: [
        {
		   
		    data: [male,female],
            backgroundColor: [
                "#FF6384",
                "#36A2EB"
            ],
            hoverBackgroundColor: [
                "#FF6384",
                "#36A2EB"
            ]
        }]
};

var ctx =$("#mycanvas");	
var myPieChart = new Chart(ctx,{
    type: 'doughnut',
    data: data1,
	 options: {
        animation:{
            animateScale:true,
			responsive: true,
    maintainAspectRatio: true
        }
    }
   
});	
	
	
	
	},
	error:function(data){
		console.log(data);
	}
});
});

<!-- 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)
{
	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);
?>

Answer 1

如果你还在努力让它发挥作用，我就是这样做的：

<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>

饼图与Chart.js和mySQL

1 个答案: