如何使用Chart.js在Donut Chart中更改多行文本的字体大小和颜色

Question

我一直在应用程序中使用甜甜圈图，并且该图的中心有一些文本。当文本较大时，我想将其包装在两行中，并且这两行的字体颜色和大小不同。以下是我正在使用的代码：

HTML代码：

<div class="chart-container">
    <p-chart #chart type="doughnut" [data]="data" [options]="pieOptions">
    </p-chart>
</div>

Component.ts：

public constructor() {    
    this.data = {
        labels: ['A'],
        datasets: [
            {
                data: [300],
                backgroundColor: [
                    "#FF6384"
                ],
                borderColor: ["grey"],
                hoverBorderColor: ['grey'],
                hoverBackgroundColor: [
                    "#FF6384"
                ],
                borderWidth: 10,
                segmentShowStroke: false
            }]
    };

    this.pieOptions = {
        title: {
            display: true,
            text: 'My Title',
            fontSize: 16
        },
        legend: {
            position: 'bottom',
            display: false
        },
        cutoutPercentage: 80,
        responsive: true,
        maintainAspectRatio: true,
        centertext: "This is one line" + "This is second line",
    };
}

public ngAfterViewInit() {
    Chart.pluginService.register({
        beforeDraw: function (chart) {
            if (chart.options.centertext) {
                var width = chart.chart.width,
                height = chart.chart.height,
                ctx = chart.chart.ctx;

                ctx.restore();

                ctx.font = "8px verdana";
                ctx.textBaseline = "middle";

                var text = chart.options.centertext, // "75%",
                        textX = Math.round((width - ctx.measureText(text).width) / 2),
                        textY = height / 2 - (chart.titleBlock.height - 15);

                ctx.fillText(text, textX, textY);
                ctx.save();
            }
        }
    });
}

因此在上述代码中。我在选项中将一些文本声明为“ centerText”，并在图表插件服务中使用它。文本正在移出图表，但没有分成两行。所以，请您让我知道如何将文本分成两行。此外，第一行的字体大小和颜色应该不同，第二行的字体大小和颜色应该相同。