如何正確地將php mysql數據傳遞給ChartJs

Question

我希望能夠使用ChartJs生成條形圖和餅圖。我使用php和mysql來獲取數據。我想要製作的條形圖是一張圖表，顯示男生或女生的學生數量以及學生總數。下面是我多麼希望的結果出現一個例子：

它可能不完全一樣，但我覺得它給一個想法。我與我的代碼有關的問題似乎並不明白，因爲我是ChartJs的新手，只是嘗試了一下，因爲morris.js沒有得到完全支持。這裏是我的代碼的外觀：

的Html

<div class="box box-success"> 
     <div class="box box-header with-border"> 
      <h3 class="box-title">Student Chart</h3> 
      <div class="box-tools pull-right"> 
      <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> 
      </button> 
      <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> 
      </div> 
      <div class="box-body"> 
      <canvas id="mycanvas" style="height:230px;"></canvas> 
      </div> 
     </div> 

腳本：

$.ajax({ 
     url: 'data.php', 
     type: 'GET', 
     success:function(data){ 
     console.log(data); 

     var male = []; 
     var female = []; 

     for(var count in data){ 
      male.push(data[count].male); 
      female.push(data[count].female); 
     } 

     var chartdata = { 
      labels: male, 
      datasets: [ 
       { 
       label: 'Student Gender', 
       backgroundColor: 'rgba(200, 200, 200, 0.75)', 
       borderColor: 'rgba(200, 200, 200, 0.75)', 
       hoverbackgroundColor: 'rgba(200, 200, 200, 1)', 
       hoverborderColor: 'rgba(200, 200, 200, 1)', 
       data:female 
       } 
      ] 
     }; 

     var ctx = $('#mycanvas'); 

     var barGraph = new Chart(ctx, { 
      type:'bar', 
      data: chartdata 
     }); 
     }, 
     error:function(data){ 
     console.log(data); 
     } 
    }); 

data.php

$query = "SELECT 
      SUM(CASE WHEN gender = 'Male' THEN 1 ELSE 0 END) as Male, 
      SUM(CASE WHEN gender = 'Female' THEN 1 ELSE 0 END) as Female 
      FROM students"; 

$output = array(); 

if ($result = mysqli_query($connection, $query)) { 
    # code... 
    foreach ($result as $row) { 
     # code... 
     $output[] = $row; 
    } 
} else { 
    die("There was a problem". mysqli_error($connection)); 
} 

echo json_encode($output); 

下面是我從控制檯得到的結果：

[{「Male」： 「5」，「女」：「2」}]

將意識到如何使它更好的建議，也爲餅圖做同樣的事情。

基於我所做的事，這是我的表是如何顯示：

注意請忽略照片上的頻率。

Answer 1

建議您將您的sql查詢更改爲以下內容。

$query = "select gender,count(gender) as count from students group by gender"; 
$output = array(); 

if ($result = mysqli_query($connection, $query)) { 
    # code... 
    foreach ($result as $row) { 
     # code... 
     $output[] = $row; 
    } 
} else { 
    die("There was a problem". mysqli_error($connection)); 
} 

echo json_encode($output); 

腳本：

$.ajax({ 
     url: 'data.php', 
     type: 'GET', 
     success:function(data){ 
     console.log(data); 

     var gender = []; 
     var sum = []; 

     for(var count in data){ 
      gender.push(data[count].gender); 
      sum.push(data[count].total); 
     } 

     var chartdata = { 
      labels: gender, 
      datasets: [ 
       { 
       label: 'Student Gender', 
       backgroundColor: 'rgba(200, 200, 200, 0.75)', 
       borderColor: 'rgba(200, 200, 200, 0.75)', 
       hoverbackgroundColor: 'rgba(200, 200, 200, 1)', 
       hoverborderColor: 'rgba(200, 200, 200, 1)', 
       data:sum 
       } 
      ] 
     }; 

     var ctx = $('#mycanvas'); 

     var barGraph = new Chart(ctx, { 
      type:'bar', 
      data: chartdata 
     }); 
     }, 
     error:function(data){ 
     console.log(data); 
     } 
    }); 

Answer 2

我意識到，問題出在我的腳本。非常感謝@milan kumar幫助查詢。缺少的是我發送給ajax的數據類型的規範。我所要做的只是在成功函數之前添加值爲'json'的dataType，並且它完美地工作。這是代碼應該是什麼樣子：

腳本：

$.ajax({ 
     url: 'data.php', 
     type: 'GET', 
     // this was what I needed to make it work. 
     dataType: 'json', 
     success:function(data){ 

     var gender = []; 
     var sum = []; 

     for(var i in data){ 
      gender.push(data[i].gender); 
      sum.push(data[i].total); 
     } 

     var ChartData = { 
      labels: ['Student Gender'], 
      datasets: [ 
       { 
       label: gender[0], 
       fillColor: "rgba(210, 214, 222, 1)", 
       strokeColor: "rgba(210, 214, 222, 1)", 
       pointColor: "rgba(210, 214, 222, 1)", 
       pointStrokeColor: "#c1c7d1", 
       pointHighlightFill: "#fff", 
       pointHighlightStroke: "rgba(220,220,220,1)", 
       data:sum[0] 
       }, 
       { 
       label: gender[1], 
       fillColor: "rgba(60,141,188,0.9)", 
       strokeColor: "rgba(60,141,188,0.8)", 
       pointColor: "#3b8bba", 
       pointStrokeColor: "rgba(60,141,188,1)", 
       pointHighlightFill: "#fff", 
       pointHighlightStroke: "rgba(60,141,188,1)", 
       data:sum[1] 
       } 
      ] 
     }; 
     }); 

我增加了一些可選屬性來美化我的圖表。