php mysqlデータをChartJsに正しく渡す方法

Question

ChartJsを使用して棒グラフと円グラフを作成したいと考えています。私は、データを取得するためにPHPとMySQLを使用しています。私が作りたい棒グラフは、男性または女性の生徒の統計と生徒の合計を示すグラフです。ここで私は結果を表示する方法の例です：

それはまさにそれのようではないかもしれないが、私はそれがアイデアを提供します感じています。私はChartJの初心者であり、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); 

は、私は、コンソールから取得していた結果です。

[{"男性" "5"、 "Female"： "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に送信していたデータの種類の指定でした。私がしなければならなかったのは、success関数の前にdataTypeという値を 'json'と追加するだけでした。これは、コードがどのように見えるべきかです：

スクリプト：

$.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] 
       } 
      ] 
     }; 
     }); 

私は私のチャートを美化するためにいくつかのオプションの属性を追加しました。