Нужно несколько легенд в Chart.js Barchart - PullRequest
0 голосов
/ 28 июня 2018

Кто-нибудь может мне помочь с моей проблемой? Так вот У меня есть скрипт, который выбирает записи и отображает их на графике. Хотя я могу получить и отобразить данные, моей проблемой является легенда. Она отображает только одну легенду, но переменная, которую я передаю, является массивом.

Вот код:

 $(document).ready(function() {

/**
 * call the data.php file to fetch the result from db table.
 */
$.ajax({
    url : "api/salesmonthproduct.php",
    type : "GET",
    success : function(data){
        console.log(data);
        // var user = '22';
        var salesmonth = {
            Company : [],
            color : []
        };

        var item_name = {
            Company : []
            // ,
            // TeamB : []
        };

        var len = data.length;
        $.each(data,function(key,item){
            item_name.Company.push(item.category);
            salesmonth.Company.push(item.qty);
            salesmonth.color.push(item.color);
        });
        /*for (var i = 0; i < len; i++) {
            if (data[i].user_id == user) {
                quantity.Company.push(data[i].quantity);
                item_name.Company.push(data[i].item_name);
            }
            // else if (data[i].team == "TeamB") {
            //  score.TeamB.push(data[i].score);
            // }
        }*/

        //get canvas
        var ctx = $("#line-chartcanvas");

        var data = {
            labels : item_name.Company,

            datasets : [
                {
                    label : "QTY",
                    data : salesmonth.Company, 
                    // backgroundColor : "blue",
                    // borderColor : "lightblue",
                    backgroundColor: salesmonth.color,
                    borderColor: salesmonth.color,
                    fill : true,
                    lineTension : 0,
                    pointRadius : 5 
                }

            ]
        };

        var options = {
            title : {
                display : true,
                position : "top",
                text : "TOTAL SALES BY CATEGORY",
                fontSize : 18,
                fontColor : "#111"
            },
            legend : {
                display : true,
                position : "bottom"
            }
        };

        var chart = new Chart( ctx, {
            type : "bar",
            data : data,
            options : options
        });

    },
    error : function(data) {
        // console.log(data);
    }
});

});

enter image description here

Вот скриншот. Я хочу отобразить несколько легенд, отображая их соответствующие цвета Спасибо

...