Javascript 图表中心（pieChart） 我想在这样的圆的中间设置烙印标题。< /P> 标题：{ 文本：“aSD500 aSD”， 对齐：'居中'， 垂直排列：'中间'， }

但是：title.align是svg容器的选项，而不是图表对齐！ （想象一下，如果图表的左边将是图表的图例，图表的标题不会出现在图表的中间），

会发生什么？ 我正在寻找解决此问题的方法，但只发现了以下问题：

var textX=chart.plotLeft+（chart.plotWidth*0.5）；
var textY=chart.plotTop+（chart.plotHeight*0.5）；
var span=''；
span+=“上部
”；
span+=‘较低’；
span+=''；
$（“#addText”）.append（span）；
span=$（'pieChartInfoText'）；
css（'left'，textX+（span.width（）*-0.5））；
css（'top'，textY+（span.height（）*-0.5））；

而不是使用带文本的span元素作为标题，该元素通过

无法获取chart.plotLeft、chart.plotTop、chart.plotWidth、chart.plotHeight，因为使用了TypeScript抽象

---

有人知道如何将标题（或文本）放在图表的中心吗？？？谢谢。

可以使用饼图系列中心阵列（x和y坐标）、plotLeft和plotTop计算饼图中心。 使用renderer.text可以添加文本。 在重画事件中，另外渲染的文本应调整为保持在饼图的中心。 例如：

$（函数（）{
var图表=新的Highcharts.图表({
图表：{
renderTo:'容器'，
键入“pie”，
活动：{
加载：函数（）{
var图表=此，
x=chart.plotLeft+（chart.series[0]。中心[0]），
y=chart.plotTop+（chart.series[0].center[1]），
盒子；
chart.pieCenter=chart.renderer.text（'aSD
500 aSD'，x，y，true）
.css({
“文本对齐”：“居中”，
颜色：'黑色'，
字体大小：“16px”
})
.add（）；
box=chart.pieCenter.getBBox（）；
chart.pieCenter.attr({
x:x-box.width/2，
y:y-框高度/4
});
},
重画：函数（）{
var图表=此，
x=chart.plotLeft+（chart.series[0]。中心[0]），
y=chart.plotTop+（chart.series[0].center[1]），
box=chart.pieCenter.getBBox（）；
chart.pieCenter.attr({
x:x-box.width/2，
y:y-框高度/4
});
}
}
},
打印选项：{
馅饼：{
内部尺寸：“40%”
}
},
图例：{
布局：“垂直”，
对齐：“左”，
垂直排列：“中间”
},
系列：[{
showInLegend：是的，
数据：[
['Firefox'，44.2]，
[IE7'，26.6]，
[IE6'，20]，
[Chrome'，3.1]，
[“其他”，5.4]
]
}]
});
});

问得好！下面是一个明确的问题示例：

 title: {
        text: 'aSD<br>500 ASD.',
        align: 'center',
        verticalAlign: 'middle',

    }

var textX = chart.plotLeft + (chart.plotWidth  * 0.5);
    var textY = chart.plotTop  + (chart.plotHeight * 0.5);

    var span = '<span id="pieChartInfoText" style="position:absolute; text-align:center;">';
    span += '<span style="font-size: 32px">Upper</span><br>';
    span += '<span style="font-size: 16px">Lower</span>';
    span += '</span>';

    $("#addText").append(span);
    span = $('#pieChartInfoText');
    span.css('left', textX + (span.width() * -0.5));
    span.css('top', textY + (span.height() * -0.5));

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'pie',
            events: {
                load: function () {
                    var chart = this,
                        x = chart.plotLeft + (chart.series[0].center[0]),
                        y = chart.plotTop + (chart.series[0].center[1]),
                        box;

                    chart.pieCenter = chart.renderer.text('aSD<br>500 ASD.', x, y, true)
                        .css({
                        'text-align': 'center',
                        color: 'black',
                        fontSize: '16px'
                    })
                        .add();

                    box = chart.pieCenter.getBBox();
                    chart.pieCenter.attr({
                        x: x - box.width / 2,
                        y: y - box.height / 4
                    });
                },
                redraw: function () {
                    var chart = this,
                        x = chart.plotLeft + (chart.series[0].center[0]),
                        y = chart.plotTop + (chart.series[0].center[1]),
                        box = chart.pieCenter.getBBox();
                    chart.pieCenter.attr({
                        x: x - box.width / 2,
                        y: y - box.height / 4
                    });
                }
            }
        },
        plotOptions: {
            pie: {
                innerSize: '40%'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            verticalAlign: 'middle'
        },
        series: [{
            showInLegend: true,
            data: [
                ['Firefox', 44.2],
                ['IE7', 26.6],
                ['IE6', 20],
                ['Chrome', 3.1],
                ['Other', 5.4]
            ]
        }]
    });
});