图表中心（饼图）

Question

我想像这样http://jsfiddle.net/NVX3S/1036/ 将饼图的标题设置在圆圈的中间。

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

    }

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

我一直在寻找解决这个问题的方法，但只找到了这个：http://jsfiddle.net/NVX3S/2/

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));

使用带有文本的span元素代替标题，它以：

为中心

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

有没有人知道如何在饼图（图表）中居中标题（或文本）？？？谢谢。

Answer 1

可以使用饼系列中心数组（x 和 y 坐标）、plotLeft 和 plotTop 计算饼中心。 使用 renderer.text 可以添加文本。 在重绘事件中，应调整额外渲染的文本以保持在饼图的中心。 示例：http://jsfiddle.net/1917s4pL/

$(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]
            ]
        }]
    });
});