在chart.js条形图中需要多个图例

时间:2018-06-28 08:59:52

标签: javascript charts chart.js bar-chart

有人可以帮我解决我的问题吗? 我有用于获取记录并将其显示到图表的脚本。 虽然我可以获取并显示数据,但我的问题是图例。它仅显示一个图例,但我传递的变量是一个数组。

代码如下:

 $(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

这是屏幕截图。 我想显示多个图例以显示其各自的颜色 谢谢

0 个答案:

没有答案