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

내가 콘솔에서지고있어 결과가 여기 내 코드는 모습입니다 :

[{ "Male": "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에게 큰 감사드립니다. 누락 된 것은 아약스에 보내는 데이터 유형의 지정입니다. 내가해야 할 일은 성공 함수 앞에 데이터 타입 값을 '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] 
       } 
      ] 
     }; 
     }); 

내 차트를 아름답게하는 몇 가지 옵션 속성을 추가했습니다.