在Chart.js中，在条形图上显示数据标签

Question

我有一个关于水平条形图的非常特殊的问题。 是否可以将数据标签显示在条形上？

就像这张图片中所示：绘制的图表

我尝试使用以下代码实现：

ticks: {
   padding: -xx,
}

不幸的是，标签消失在条形图下面，就好像条形图在标签的上一层。

这个问题能否改变？

以下是我的代码：

var ctx = document.getElementById("stakeholderChart").getContext('2d');
var stakeholderChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: ["Point 1", "Point 2", "Point 3", "Point 4", "Point 5", "Point 6", "Point 7", "Point 8", "Point 9", "Point 10", "Point 11", "Point 12"],
        datasets: [{
            backgroundColor: "#527a82",
            data: [74, 74, 68, 67, 65, 63, 60, 60, 58, 57, 45, 44],
        }],

    },
    options: opt
});

and my options:

    var opt = {
        /*Legende ausblenden*/
        legend: {
            display: false,
        },
        /*responsive*/
        responsive: true,

        /*tooltips - hover labels*/
        tooltips: {
            enabled: false,
        },

        /*Layout*/
        layout: {
            padding: {
                right: 30,
            }
        },

        /* Label auf Balken – Werte hinter balken*/
        plugins: {
            datalabels: {
                align: 'end',
                anchor: 'end',
                color: '#fff',
                font: {
                    weight: 'bold',
                    size: 14,
                },
                formatter: function(value, context) {
                    return value + '%';
                },
            },
        },
        /*Plugins ende*/

        /*Animation*/
        animation: {
            duration: 2000
        },
        /*Animation Ende*/


        /*Achsen Einstellungen*/
        scales: {
            /* x Achse */
            xAxes: [{
                display: false,
                gridLines: {
                    display: false
                },

                ticks: {
                    beginAtZero: true,
                    max: 90,
                }

            }],
            /*x-axes ende*/

            /* Y Achse */
            yAxes: [{
                display: true,
                gridLines: {
                    display: false,
                },

                ticks: {
                    fontColor: '#fff',
                    fontStyle: 'normal',
                    fontSize: 13,
                    padding: -170,
                },
                categoryPercentage: 1.0,
                barPercentage: 0.85,

            }],
            /* y-axes ende*/
        },
        /*Scales Ende*/
    }

Thank You in advance!

- Enick

Answer 1

       yAxes: [{
                display: true,
                gridLines: {
                    display: false,
                },

                ticks: {
                    fontColor: '#fff',<-- Text is currently white, change to black
                    fontStyle: 'normal',
                    fontSize: 13,
                    padding: -170,,<-- set to 0 or remove
                },
                categoryPercentage: 1.0,
                barPercentage: 0.85,

            }],/* y-axes ende*/

- Glenn McAvoy

---

谢谢回复！但是当我删除填充时，标签会出现在柱子旁边，而不是在柱子顶部，我需要它们在柱子上，就像我的图纸上那样。而且文本需要是白色的，因为和黑色相比，白色在我的蓝色柱子上看起来更好。:/ - Enick

嗨，Enrico，是的，我明白你的意思。我在许多论坛上查找了很多，但找不到可行的解决方案。有人说可以让标签在柱形图之后渲染，但我不知道如何做。你可以尝试一下，然后告诉我你的进展如何吗？谢谢。 - Glenn McAvoy

Answer 2

在你的代码中添加以下选项：

options:  {
"hover": {
                      "animationDuration": 0
                    },
                    "animation": {
                      "duration": 1,
                      "onComplete": function() {
                        var chartInstance = this.chart
                        ctx = chartInstance.ctx;
                        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                        ctx.fillStyle = this.chart.config.options.defaultFontColor;
                        ctx.textAlign = 'left';
                        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 - 5);
                          });
                        });
                      }
                    },

} 
});

或者访问 https://jsfiddle.net/tushar22/bfd98r26/5/

- Tushar Kale

Answer 3

对于水平条形图，您可以简单地启用'mirror'选项：

options: {
    scales: {
        yAxes: [{
            ticks: {
                mirror: true //Show y-axis labels inside horizontal bars
            }
        }]
    }
}

请查看文档：https://www.chartjs.org/docs/latest/axes/cartesian/#tick-configuration

"翻转刻度标签以围绕轴显示标签，而不是在图表外部显示。注意：仅适用于垂直比例尺。"

- maelga