Как отличить диаграмму с цветами

Question

Я хочу отличить «Мужчины» и «Женщины» от этой диаграммы цветами. возможно мы можем сделать диаграмму людей с зелеными цветами и диаграммами женщин с розовыми цветами. вот мой код

//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); 
       if(data[i].JenisKelaminID == 1) 
       { 
        Gender.push("Men"); 
       } 
       else if(data[i].JenisKelaminID == 2) 
       { 
        Gender.push("Women"); 
       } 
       else 
       { 
       Gender.push("Other"); 
       } 

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

могли бы вы помочь мне решить эти коды? спасибо заранее

Answer 1

Согласно документации Chart.js здесь: http://www.chartjs.org/docs/#bar-chart,

Вы должны добавить «атрибуты» для каждой метки у вас есть.

В вашем коде я предполагаю, что у вас есть 3 ярлыка, которые являются мужчинами, женщинами и другими.

Так, как, например, в коде:

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

есть только один "BackgroundColor", "BorderColor", "hoverBackgroundColor", и "hoverBorderColor", который предназначен только для одной этикетки.

Так что вы должны сделать, это каждый из атрибутов в виде массива, например:

backgroundColor: [ 
     'rgba(79, 181, 59, 1)', //green for men 
     'rgba(239, 87, 196, 1)', //pink for women 
     'rgba(166, 160, 164, 1)', //grey for other 
], 

ли это для других атрибутов, как это.