Question

如何在ChartJs（最新版本）中显示数据值或索引标签，如下图所示：

我使用ChartJs在我的React项目中显示图表。一切都很好，除了这个。

我在stackoverflow（https://stackoverflow.com/a/31632707）中找到了一个答案，但是它使用的是旧版本的chartjs，而不是我正在使用的那个。

我的ChartJs代码：

var ctx = document.getElementById("myChart");

var BarChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Jan","Feb","March"],
        datasets: [{
            label: "Chart Data",
            data: [10,20,15],
            backgroundColor: "red",
            borderColor: "green",
            borderWidth: 1
        }]
    },
    options: {
        legend: {
            display: false
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }],
            xAxes: [{
                ticks: {
                    maxRotation: 180
                }
            }]
        }
    }
});

我尝试使用函数ctx.fillText(bar.value, bar.x, bar.y - 5);添加它，但它显示.fillText is not a function

Answer 1

最后我开始工作了。

在onComplete（）函数中使用以下代码：

animation: {
    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);
                }
            }
        });
    }
}

Answer 2

经过一番研究后得到了它。

您必须在动画的onComplete事件之后进行设置。条形的x，y值存储在子模型中（点，线，条，等等）

onComplete: function () {
                var ctx = this.chart.ctx;
                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
                ctx.textAlign = 'center';
                ctx.textBaseline = 'bottom';

                this.data.datasets.forEach(function (dataset) {
                    for (var i = 0; i < dataset.data.length; i++) {
                            console
                        var model = dataset._meta[0].dataset._children[i]._model;
                        ctx.fillText(dataset.data[i], model.x, model.y - 5);
                    }
                });               
            }

只是结构改变了一点。

您可以在这个有效的JSFiddle

中看到它

如何在ChartJs中显示数据值或索引标签（最新版本）

2 个答案: