Wie gruppiere ich das Diagramm

Question

Ich möchte dieses Diagramm gruppieren wie "Geschlecht 1" ist Männer und "Geschlecht 2" ist Frauen, aber wenn ich versuche, das Diagramm zu kodieren, ist es schwierig, sie zu unterscheiden.

hier ist mein Code

//data.php

<?php 
//setting header to json 
header('Content-Type: application/json'); 

//database 
define('DB_HOST', '127.0.0.1'); 
define('DB_USERNAME', 'root'); 
define('DB_PASSWORD', ''); 
define('DB_NAME', 'dbintegrasi'); 

//get connection 
$mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME); 
if(!$mysqli){ 
    die("Connection failed: " . $mysqli->error); 
} 

//query to get data from the table 
$query = sprintf("SELECT JenisKelaminID, COUNT(JenisKelaminID) as jumlah FROM tahunmasukmagister GROUP BY JenisKelaminID"); 

//execute query 
$result = $mysqli->query($query); 

//loop through the returned data 
$data = array(); 
foreach ($result as $row){ 
    $data[] = $row; 
} 

//freee memory associated with result 
$result->close(); 

//close connection 
$mysqli->close(); 

//new print the data 
print json_encode($data); 

//app.js

$(document).ready(function(){ 
    $.ajax({ 
     url: "http://localhost/chartjs/data.php", 
     method: "GET", 
     success: function(data) { 
      console.log(data); 
      var Gender = []; 
      var jumlah = []; 

      for(var i in data){ 
       Gender.push("Gender " + data[i].JenisKelaminID); 
       jumlah.push(data[i].jumlah); 

      } 

      var chartdata = { 
       labels: Gender, 
       datasets: [ 
        { 
         label : 'Gender', 
         backgroundColor: 'rgba(250, 300, 100, 0.75)', 
         borderColor: 'rgba(200, 200, 200, 0.75)', 
         hoverBackgroundColor: 'rgba(200, 200, 200, 1)', 
         hoverBorderColor: 'rgba(200, 200, 200, 1)', 
         data: jumlah 
        } 
       ] 
      }; 

      var ctx = $("#mycanvas"); 

      var barGraph = new Chart(ctx, { 
       type: 'bar', 
       data: chartdata 

      }); 
     }, 
     error: function(data) { 
      console.log(data); 
     } 
    }); 
}); 

mir bitte helfen, dieses Problem zu lösen, danke

Answer 1

In Sie app.js Datei in der Zeile Nummer 10:

Gender.push("Gender " + data[i].JenisKelaminID); 

können Sie eine if-Bedingung festgelegt, anstatt sie wie

if(data[i].JenisKelaminID == 1){ 
Gender.push("Men"); 
} else if(data[i].JenisKelaminID == 2){ 
Gender.push("Women"); 
} else { 
Gender.push("Other"); 
} 

Dort der Planname definiert ist, hoffen, dass es Ihre Arbeit helfen.