Chart.js未在饼图上显示所有标签

Question

我最近更新了Chart.js，然后得到了以下错误。

我的饼形图下的一些标签不再显示，直到我单击一个可见的标签为止。然后一切都会显示出来。

在这里，您可以在单击某些内容之前先查看其外观：before clicking

并且在这里您可以在单击可见标签后看到图表：after clicking

在这里您可以看到我的图表代码的选项部分：

options: {
                    maintainAspectRatio : false,
                    animation: {
                        duration: 0
                    },
                    elements: {
                        center: center
                    },
                    legend: {
                        position: 'bottom',
                        //fullWidth: 'true',
                        labels: {
                            generateLabels: (chart) => {
                                chart.legend.afterFit = function () {
                                    var width = this.width;

                                    this.lineWidths = this.lineWidths.map( () => this.width - 12 );

                                    this.options.labels.padding = 30;
                                    this.options.labels.boxWidth = 15;
                                };

                                var data = chart.data;
                                if (data.labels.length && data.datasets.length) {
                                    return data.labels.map((label, i) => {
                                        var meta = chart.getDatasetMeta(0);
                                        var ds = data.datasets[0];
                                        var arc = meta.data[i];
                                        var custom = arc && arc.custom || {};
                                        var getValueAtIndexOrDefault = this.getValueAtIndexOrDefault;
                                        var arcOpts = chart.options.elements.arc;
                                        var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
                                        var stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
                                        var bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);

                                        return {
                                            text: label,
                                            fillStyle: fill,
                                            strokeStyle: stroke,
                                            lineWidth: bw,
                                            hidden: isNaN(ds.data[i]) || meta.data[i].hidden,

                                            // Extra data used for toggling the correct item
                                            index: i
                                        };
                                    });
                                }
                                return [];
                            }
                        },
                    },
                    cutoutPercentage: 85, 
                    plugins: {
                        datalabels: {
                            anchor: 'end',
                            align: 'end',
                            display: function(context) {
                                var index = context.dataIndex;
                                var value = context.dataset.data[index];
                                return value > 0; // display labels with a value greater than 0
                            },
                            font: {
                                weight: 'bold',
                                size: 16,
                            },
                        }
                    }
                }

Answer 1

chart.legend.afterFit = function () {
    if (keys.length > 4) {
        this.options.labels.padding = 15;
        this.height = this.height + 25;
    }
    else {
        this.options.labels.padding = 20;
        this.height = this.height + 18;
    }
    var width = this.width; // guess you can play with this value to achieve needed layout
    this.lineWidths = this.lineWidths.map(function () { return width; });
};

我将afterFit的部分更改为此，因此它的格式正确，问题是，当我单击标签时，填充设置被重新设置。