javascript - chart.js - 右侧标签的问题

Question

我使用chart.js，我想在每个栏的右侧显示标签，但第一个标签有问题。

我使用插件chartjs-plugin-datalabels它可以工作，但第一个标签是隐藏的。

你知道如何解决这个问题吗？

https://jsfiddle.net/rq78pg4j/1/

var ctx4 = $('#chart_choice');
        var chart_market = new Chart(ctx4, {
            type: 'horizontalBar',
            data: {
                labels: ['Legend 1', 'Legend 2'],
                datasets: [{
                    data: [12, 10],
                    label: '# of Votes',
                    backgroundColor: [
                        'rgba(243,212,205,1)',
                        'rgba(243,212,205,1)'
                    ],
                    borderColor: [
                        'rgba(223,142,123,1)',
                        'rgba(223,142,123,1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                plugins: {
                    datalabels: {
                        align: 'end',
                        anchor: 'end',
                        color: '#0B4892',
                        font: function(context) {
                            var w = context.chart.width;
                            return {
                                size: w < 512 ? 12 : 14,
                                weight: 'bold',
                            };
                        },
                        formatter: function(value, context) {
                            return context.chart.data.labels[context.dataIndex];
                        }
                    }
                }
            }
        });

标签： javascriptchart.js

Answer 1

问题是Chart.js不知道在chartjs-plugin-datalabels做什么。因此，它没有在图表右侧保留足够的空间，让最大柱的标签出现在canvas.

这可以通过在图表右侧定义额外的填充来解决，如下所示。

options: {
  layout: {
    padding: {
      right: 100
    }
  },
  ...

有关更多详细信息，请参阅文档中的页面布局配置Chart.js。