如何用颜色区分图表

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 个标签，分别是 Men、Women 和 Other。

例如，在您的代码中：

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

对类似的其他属性进行此操作。