Блог

У меня есть такая групповая гистограмма

Все данные в порядке, но я хочу показать знак%, как на прикрепленном изображении. Как я могу это сделать?

Мои коды приведены ниже.

 $.ajax(
{
    url:"../apis/api_dashboard_sales.php?reg=1",
    type: "post", //request type,
    dataType:"json",
    success:function(result)
    { 
        var daily_sales_data = result['data'];
        var collection = result['col'];
        var daily_sales_label = result['labels'];
        var target = result['tar'];
        var percentage = result['per'];

     new Chart($("#region-sales")[0].getContext("2d"), {
        type: 'bar',
        data: {
            labels: daily_sales_label,
            datasets: [
                {
                    label: "Sales",
                    data: daily_sales_data,
                    borderWidth: 2,
                    borderColor: 'darkgreen',
                },
                {
                    label: "Collection",
                    data: collection,
                    borderWidth: 2,
                    borderColor: colors.color_success,
                },
                {
                    label: "Target",
                    data: target,
                    borderWidth: 2,
                    borderColor: 'darkorange',
                },
                {
                    label: "Target/Collection Comparison (%)",
                    data: percentage,
                    borderWidth: 2,
                    borderColor: 'darkred',
                },
            ],
        },
        options: {
            animation: {
                duration: 1,
                onComplete: function () {
                    var chartInstance = this.chart,
                    ctx = chartInstance.ctx;
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'bottom';
                    this.data.datasets.forEach(function (dataset, i) {
                            var meta = chartInstance.controller.getDatasetMeta(i);
                            meta.data.forEach(function (bar, index) {
                            var data = dataset.data[index];                            
                            ctx.fillText(data, bar._model.x, bar._model.y - 4);
                        });
                    });
                }
            },

            scales: {
                yAxes: [{
                    ticks: {
                        fontColor: "black",
                        fontSize: 14,
                        barThickness: 40, 
                        callback: function (o, r, e) {
                            return parseInt(o) >= 1e3 ? "৳"   o.toString().replace(/B(?=(d{3}) (?!d))/g, ",") : "৳"   o;
                        },
                    },

                }],
                xAxes: [{
                    ticks: {
                        fontColor: "black",
                        fontSize: 16,
                        autoSkip: false,
                        min: 0,
                    }
                }]
            },

        },  

     });
    }
});