Javascript highcharts多环饼图内的多行文字

我试图在我的highcharts甜甜圈饼图中实现居中多行文本。我希望第一行的字体大小为50px，第二行的字体大小为25px

目前，我无法在每一行上获得不同的字体大小，也无法使文本居中

JSFiddle：

下面是我如何呈现标题的

 var r = this.renderer,
        x = this.series[0].center[0] + this.plotLeft,
        y = this.series[0].center[1] + this.plotTop;
      this.title = r.text('Top<br>Bottom', 0, 0)
        .css({
          fontSize: '25px',
          textAlign: "center",
        }).hide()
        .add();

var r=this.renderer，
x=this.series[0]。居中[0]+this.plotLeft，
y=this.series[0]。中心[1]+this.plotTop；
this.title=r.text（'Top
Bottom'，0,0）
.css({
fontSize:'25px'，
textAlign：“居中”，
}).hide（）
.add（）；

使用

textAnchor:'middle'更新
渲染器

 this.title = r.text('1,234 <br> <span style="font-size:25px">Calls Today</span>', 0, 0)
    .css({
      fontSize: '40px',
      textAnchor:'middle'
    }).hide()
    .add();

this.title=r.text（'1234
今天调用'，0，0）
.css({
fontSize:'40px'，
textAnchor:“中间”
}).hide（）
.add（）；


$（函数（）{
Highcharts.setOptions({
颜色：['79CEB8'、'66041A'、'0099CC'、'1D3461']
});
var图表=新的Highcharts.图表({
图表：{
renderTo:'容器'，
键入：“馅饼”
},
标题：{
对齐：'居中'，
垂直排列：“中间”
},
亚克斯：{
标题：{
文本：“”
}
},
打印选项：{
馅饼：{
影子：错
}
},
工具提示：{
格式化程序：函数（）{
返回“+this.point.name+”：“+this.y+”%”；
}
},
系列：[{
名称：'浏览器'，
数据：[
[“旁路”，10]，
[“无IVR”，20]，
[“已处理”，7]，
[“所需操作员”，7]
],
大小：“100%”，
内部尺寸：“80%”，
showInLegend:false，
数据标签：{
已启用：true
}
}]
},
函数addTitle（）{
如果（本标题）{
这个.title.destroy（）；
}
var r=this.renderer，
x=this.series[0]。居中[0]+this.plotLeft，
y=this.series[0]。中心[1]+this.plotTop；
this.title=r.text（'1234
今天调用'，0，0）
.css({
fontSize:'40px'，
textAnchor:'中间'
}).hide（）
.add（）；
var bbox=this.title.getBBox（）；
this.title.attr({
x:x-（bbox.width/100），
y:y
}).show（）；
}
);
});