javascript - 图表中心(饼图)

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