在条形图Js 2.1.6上显示数据集值

Display dataset values on bar ChartJs 2.1.6

本文关键字：显示 数据集 条形图 Js      更新时间：2023-09-26

根据chartjs版本的变化，条形图上显示的数据集值本身不起作用。现有的代码可以使用V1.0.2。参考：如何在Chart.js上显示数据值

var ctx = document.getElementById("myChart2").getContext("2d");
var myBar = new Chart(ctx).Bar(chartData, {
    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 - 5);
            });
        })
    }
});

现在，必须与ChartJs V2.1.6配合使用的修改是什么？当前的条形图语法可以使用下面给出的V2.1.6。

        var myBarChart = new Chart(ctx, {
            type: 'bar',
            data: datasets,
            options: {
                responsive: true,
                tooltips: {
                    enabled: false
                },
                legend: {
                    display: false
                },
              //what should add to display values on bar?
            }
        });

使用animation.onComplete键，如下所示：

animation: {
        duration: 500,
        onComplete: function() {
            var ctx = this.chart.ctx;
            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
            ctx.fillStyle = "black";
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';
            this.data.datasets.forEach(function(dataset) {
                for (var i = 0; i < dataset.data.length; i++) {
                    for (var key in dataset._meta) {
                        var model = dataset._meta[key].data[i]._model;
                        ctx.fillText(dataset.data[i], model.x, model.y - 5);
                    }
                }
            });
        }
    }

http://www.chartjs.org/docs/#chart-配置动画配置

相关文章：