javascript - 如何用chartjs制作图表？

Question

这里我想用chartjs制作图表。我在 Chartjs 网站上的给定演示中获得了成功。但我想将我的 sql 数据添加到每列 3 列的图表中，但我不知道如何获取它。

|| || ||       || || ||     || || ||    || || ||    || || ||
|| || ||       || || ||     || || ||    || || ||    || || ||
|| || ||       || || ||     || || ||    || || ||    || || ||
array id 1     array id 2  array id 3   array id 4  array id 5

我想制作这样的条形图。每个都有 3 个不同的值。这是我的小代码

<script>
    window.onload = function (){

    $.get("<?php echo site_url('Chart');?>", 'jsonp', function(data){
                alert(data);
                var da = JSON.parse(data);


    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        //labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],

        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});


    });     
};

</script>

任何人都可以帮助我吗？

[[],{"id":"1","User_id":"Mahi_rocks007@gmail.com","Name":"Mahi 
Moj","Attempt":"10","Correct":"9","Score":"9","Accuracy":"9","Percentage":"10","
Avg_Time":"10","Percentile":"11","Paper_id":"tbl11"},{"id":"2","User_id":"moj_moj@moj.com","Name":"MOj","Attempt":"56","Correct":"656","Score":"56","Accuracy":"56","Percentage":"12","Avg_Time":"1","Percentile":"12","Paper_id":"tbl11"},{"id":"3","User_id":"moja_moja@g.com","Name":"Mama ni MOj","Attempt":"56","Correct":"45","Score":"22","Accuracy":"45","Percentage":"21","Avg_Time":"58","Percentile":"100","Paper_id":"tbl11"},{"id":"4","User_id":"dadu_dadu@gmail.com","Name":"Dadu","Attempt":"54","Correct":"23","Score":"23","Accuracy":"52","Percentage":"56","Avg_Time":"28","Percentile":"21","Paper_id":"tbl11"},{"id":"5","User_id":"kalu_Klliya@gmai.com","Name":"Kalu Kaliya","Attempt":"85","Correct":"56","Score":"55","Accuracy":"52","Percentage":"25","Avg_Time":"25","Percentile":"25","Paper_id":"tbl11"},{"id":"6","User_id":"Olaa_olla@gmail.com","Name":"Olla Gamna","Attempt":"65","Correct":"65","Score":"45","Accuracy":"55","Percentage":"55","Avg_Time":"55","Percentile":"56","Paper_id":"tbl11"},{"id":"7","User_id":"jembo_jembo@jembo.com","Name":"Jembo James","Attempt":"54","Correct":"54","Score":"54","Accuracy":"54","Percentage":"21","Avg_Time":"32","Percentile":"32","Paper_id":"tbl11"},{"id":"8","User_id":"Rambo.Rambo@gmail.com","Name":"Rambo Ravan","Attempt":"54","Correct":"54","Score":"54","Accuracy":"100","Percentage":"100","Avg_Time":"100","Percentile":"100","Paper_id":"tbl11"},{"id":"9","User_id":"Sakti@sakti.com","Name":"Sakti Sakti","Attempt":"65","Correct":"65","Score":"65","Accuracy":"65","Percentage":"65","Avg_Time":"65","Percentile":"65","Paper_id":"tbl11"},{"id":"10","User_id":"Shekhavat@sakti.com","Name":"Shekhavat Sakhti","Attempt":"54","Correct":"54","Score":"54","Accuracy":"54","Percentage":"54","Avg_Time":"54","Percentile":"54","Paper_id":"tbl11"}]

Answer 1

以下是实现此目标的方法...

window.onload = function() {
	
    // for demonstration purposes only
    // you should be using the actual json data from the ajax response
    var data = [{ "id": "1", "User_id": "Mahi_rocks007@gmail.com", "Name": "MahiMoj", "Attempt": "10", "Correct": "9", "Score": "9", "Accuracy": "9", "Percentage": "10", "Avg_Time": "10", "Percentile": "11", "Paper_id": "tbl11" }, { "id": "2", "User_id": "moj_moj@moj.com", "Name": "MOj", "Attempt": "56", "Correct": "656", "Score": "56", "Accuracy": "56", "Percentage": "12", "Avg_Time": "1", "Percentile": "12", "Paper_id": "tbl11" }, { "id": "3", "User_id": "moja_moja@g.com", "Name": "MamaniMOj", "Attempt": "56", "Correct": "45", "Score": "22", "Accuracy": "45", "Percentage": "21", "Avg_Time": "58", "Percentile": "100", "Paper_id": "tbl11" }, { "id": "4", "User_id": "dadu_dadu@gmail.com", "Name": "Dadu", "Attempt": "54", "Correct": "23", "Score": "23", "Accuracy": "52", "Percentage": "56", "Avg_Time": "28", "Percentile": "21", "Paper_id": "tbl11" }, { "id": "5", "User_id": "kalu_Klliya@gmai.com", "Name": "KaluKaliya", "Attempt": "85", "Correct": "56", "Score": "55", "Accuracy": "52", "Percentage": "25", "Avg_Time": "25", "Percentile": "25", "Paper_id": "tbl11" }, { "id": "6", "User_id": "Olaa_olla@gmail.com", "Name": "OllaGamna", "Attempt": "65", "Correct": "65", "Score": "45", "Accuracy": "55", "Percentage": "55", "Avg_Time": "55", "Percentile": "56", "Paper_id": "tbl11" }, { "id": "7", "User_id": "jembo_jembo@jembo.com", "Name": "JemboJames", "Attempt": "54", "Correct": "54", "Score": "54", "Accuracy": "54", "Percentage": "21", "Avg_Time": "32", "Percentile": "32", "Paper_id": "tbl11" }, { "id": "8", "User_id": "Rambo.Rambo@gmail.com", "Name": "RamboRavan", "Attempt": "54", "Correct": "54", "Score": "54", "Accuracy": "100", "Percentage": "100", "Avg_Time": "100", "Percentile": "100", "Paper_id": "tbl11" }, { "id": "9", "User_id": "Sakti@sakti.com", "Name": "SaktiSakti", "Attempt": "65", "Correct": "65", "Score": "65", "Accuracy": "65", "Percentage": "65", "Avg_Time": "65", "Percentile": "65", "Paper_id": "tbl11" }, { "id": "10", "User_id": "Shekhavat@sakti.com", "Name": "ShekhavatSakhti", "Attempt": "54", "Correct": "54", "Score": "54", "Accuracy": "54", "Percentage": "54", "Avg_Time": "54", "Percentile": "54", "Paper_id": "tbl11" }];
    
    var name = data.map(e => {
        return e.Name;
    });
    var attempt = data.map(e => {
        return e.Attempt;
    });
    var correct = data.map(e => {
        return e.Correct;
    });
    var score = data.map(e => {
        return e.Score;
    });
  
    var ctx = document.getElementById("myChart").getContext("2d");
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: name,
            datasets: [{
                label: 'Attempt',
                data: attempt,
                backgroundColor: 'rgba(220, 20, 60, 0.5)',
                borderColor: 'rgba(255,99,132,1)',
                borderWidth: 1
            }, {
                label: 'Correct',
                data: correct,
                backgroundColor: 'rgba(54, 162, 235, 0.6)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }, {
                label: 'Score',
                data: score,
                backgroundColor: 'rgba(255, 206, 86, 0.6)',
                borderColor: 'rgba(255, 206, 86, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                xAxes: [{
                    barPercentage: 0.75
                }],
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
};

<script src="https://code.jquery.com/jquery-3.0.0.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>

另外，这里有一个 demo on JSBin