vue.js - 如何防止chartjs上的标签截断？

Question

我使用 chartjs 和 clivuejs 制作了一个甜甜圈图。我的问题取决于图表，外部标签可以被截断或不被截断。

使用“检查”镀铬模式，我尝试修改画布和不同父 div 的宽度/高度。

//../src/DoughnutChart.js

import {
    Doughnut,mixins
} from 'vue-chartjs'

export default {
  extends: Doughnut,
    mixins: [mixins.reactiveProp],
    props: ['chartData'],
    data() {
        return {
            options: {
                tooltips: {
                  enabled: true
                },
                pieceLabel: {
                  render: 'label',
                  arc: true,
                  fontColor: '#000',
                  position: 'inside'
                },
                responsive: true,
                legend: {
                  display: false,
                  position: 'top',
                },
                scaleLabel : {
                    display: true
                  },
                maintainAspectRatio: false
            }
        }
    },
    mounted() {
        this.renderChart(this.chartdata, this.options)
    }

}

正如您在附加文件中看到的那样，外部标签根本不可见或被截断。

编辑：使用丹尼尔提供的填充建议（感谢丹尼尔）我现在有以下内容。如果图表非常小，我仍然有问题。有什么方法可以强制标签基于父画布具有更智能的位置？

标签： vue.jschart.js