javascript - 如何使用chartjs在每个条形图上自定义索引标签？

Question

我正在开发一个使用条形图的网站，但我找不到自定义条形图以在每个条形图上显示值的方法。

这是我的条形图js

$(function(){
        var t;
        function size(animate){
            if (animate == undefined){
                animate = false;
            }
            clearTimeout(t);
            t = setTimeout(function(){
                $("#bar-chart-js").each(function(i,el){
                    $(el).attr({
                        "width":$(el).parent().width(),
                        "height":$(el).parent().outerHeight()
                    });
                });
                redraw(animate);
                var m = 0;
                $(".chartJS").height("");
                $(".chartJS").each(function(i,el){ m = Math.max(m,$(el).height()); });
                $(".chartJS").height(m);
            }, 30);
        }
        $(window).on('resize', function(){ size(false); });

        function redraw(animation){
            var options = {};
            if (!animation){
                options.animation = true;
            } else {
                options.animation = true;
            }
            var dataJson1 = <?php echo json_encode($monthly_income);?>;
            var dataJson2 = <?php echo json_encode($monthly_expense);?>;
            var data1 =  $.map(dataJson1, function(el) { return el; });
            var data2 =  $.map(dataJson2, function(el) { return el; });
            //console.log(dataJson1);
            //console.log('data1:' + data1);
            var barChartData = {
                labels : ["January","February","March","April","May","June","July","August","September","October","November","December"],
                datasets : [
                    {
                        fillColor : "#79D1CF",
                        strokeColor : "#79D1CF",
                        data : data1
                    },
                    {
                        fillColor : "#E67A77",
                        strokeColor : "#E67A77",
                        data : data2
                    }
                ]
            };
            var myLine = new Chart(document.getElementById("bar-chart-js").getContext("2d")).Bar(barChartData);
        }
        size(true);
    });

我想将索引标签显示如下图

请帮助我，我非常感谢您的帮助。

Answer 1

只需在animationComplete回调中添加标签

var myLine = new Chart(document.getElementById("bar-chart-js").getContext("2d")).Bar(barChartData, {
    showTooltips: false,
    onAnimationComplete: function () {

        var ctx = this.chart.ctx;
        ctx.font = this.scale.font;
        ctx.fillStyle = this.scale.textColor
        ctx.textAlign = "center";
        ctx.textBaseline = "bottom";

        this.datasets.forEach(function (dataset) {
            dataset.bars.forEach(function (bar) {
                ctx.fillText(bar.value, bar.x, bar.y);
            });
        })
    }
});

我已经关闭了工具提示，假设您不再需要它们(因为新添加的标签中显示了相同的信息)。如果您需要工具提示，那么您需要扩展条形图并将上述逻辑移至每次绘制图表之后。

<小时/>

fiddle - http://jsfiddle.net/geaje18p/ (我用硬编码数组替换了你的 php echo)

<小时/>