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，

您需要添加＆＃34;属性＆＃34;对于您拥有的每个标签。

在您的代码中，我假设您有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
                }
            ]

只有一个＆＃34; backgroundColor＆＃34;，＆＃34; borderColor＆＃34;，＆＃34; hoverBackgroundColor＆＃34;和＆＃34; hoverBorderColor＆＃34;，仅适用于一个标签。

所以你应该做的是将每个属性作为一个数组，如下所示：

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

为此类其他属性执行此操作。

如何区分图表与颜色

1 个答案: