Question

我想在圈子中间设置pieChart的标题，如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抽象。

有没有人有任何想法如何在pieChart（图表）中居中标题（或文本）???感谢。

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

图表中心（pieChart）

1 个答案: