score:0

Accepted answer

the code example for your reference:

<div style="width:600px;height:400px;">
    <canvas id="mychart" width="600" height="400"></canvas>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.2/chart.bundle.min.js"></script>
<script type="text/javascript">
var colors = ["#009ea0", "#a7a9ac", "#d15f27", "#bad80a", "#e0aa0f", "#754760", "#373535"];
var listname = "cl26"; //data list name
var xaxisname="title";
var yaxisname=["java","python","sharepoint","dotnet"];
$(document).ready(function() {
    var requesturi = _sppagecontextinfo.webabsoluteurl +
                  "/_api/web/lists/getbytitle('"+listname+"')/items";

    //execute ajax request
    $.ajax({
        url: requesturi,
        type: "get",
        headers: { "accept": "application/json;odata=verbose" },
        success: function (data) {
            var mylabels=[];
            var mydatasets=[];
            $.each(data.d.results, function(i, item) {
                mylabels.push(item[xaxisname]);    
            });
            for(var i=0;i<yaxisname.length;i++){ 
                var mydata=[];                  
                $.each(data.d.results, function(j, item) {
                    mydata.push(item[yaxisname[i]]);
                });
                mydatasets.push({
                    label:yaxisname[i],
                    backgroundcolor:colors[i],
                    data:mydata
                });                 
            }
            buildbarchart(mylabels,mydatasets);
        },
        error: function () {
            //alert("failed to get details");
        }
    });
});

function buildbarchart(mylabels,mydatasets){
    var barchartdata = {
        labels: mylabels,
        datasets: mydatasets
    };
    var ctx = document.getelementbyid('mychart').getcontext('2d');
    var mybar = new chart(ctx, {
            type: 'bar',
            data: barchartdata,
            options: {
                title: {
                    display: true,
                    text: 'myproject'
                },
                tooltips: {
                    mode: 'index',
                    intersect: false
                },
                responsive: true,
                scales: {
                    xaxes: [{
                        stacked: true,
                    }],
                    yaxes: [{
                        stacked: true
                    }]
                }
            }
        });
}   
</script>

enter image description here


Related Query

More Query from same tag