带圆角的Chart.js甜甜圈与Vue3和vue-3

Question

我想要创建一个圆弧形的甜甜圈图形。我似乎无法将开始和结束弧与改变弧与图中的部分分开。我有这个：

我找不到如何修改图表部分的弧度。我有这个：

​

我想让它看起来像这样

​

    /* In parents */
    // template
            <DoughnutChart class="simulator__doughnut" :chartData="datacollection"/>
    // computed
        datacollection() {
            return {
                datasets: [
                    {
                        data: [this.monthlyPayment, this.monthlyRate],
                        backgroundColor: ["#ff0058", "#ff645a"],
                        borderWidth: 0,
                        angle: [50],
                        borderRadius: [{ innerEnd: 50, outerEnd: 50 }],
                    },
                ],
            };
        },

/* In Children*/
<script>
import { DoughnutController, Chart } from "chart.js";

Chart.register(DoughnutController);

export default {
    extends: DoughnutController,
    mixins: [reactiveProp],
    mounted() {
        this.renderChart(this.chartData, this.chartOptions);
    },
    props: {
        chartData: {
            type: Object,
            default: null,
        },
        chartOptions: {
            type: Object,
            default: null,
        },
    },
};
</script>

Answer 1

/* In parents */
// template
        <DoughnutChart class="simulator__doughnut" :chartData="datacollection"/>
// computed
    datacollection() {
        return {
            datasets: [
                {
                    data: [this.monthlyPayment, this.monthlyRate],
                    backgroundColor: ["#ff0058", "#ff645a"],
                    borderWidth: 0,
                    angle: [50],
                    borderRadius: [{ innerEnd: 50, outerEnd: 50, innerStart: 50, outerStart: 50}],
                    spacing: -50
                },
            ],
        };
    },