如何将高图甜甜圈图中心的HTML跨度与响应式设计对齐？

Question

I am using Highcharts.js for drawing a do-nut graph.

Here i need legends just right to graph and a 'span' outside the container(svg) on the center of graph. Legends work properly, while 'span' doesn't align at the center of graph on responsive view.

JSFIDDLE

var chartDiv = document.getElementById('container');
var textX = $(chartDiv).width()/2;
var textY = $(chartDiv).height()/2 ;
var span = '<span id="pieChartInfoText" style="position:absolute;text-align:center;">';
span += '<span class="centerText">'+Math.round((response.engagement / response.traffic || 0) * 100) + '%</span><br></span>';

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

Answer 1

there are a few things going wrong here but the main thing ist this: the circle is actually not in the center of the screen, so the text is but the circle is not you need to adjust the text position to that of the circle offest. plus body has a margin and is not 100% height

also this part here sets the height and the width so we can then calculate the percentage offset

var $addText =  $("#addText");
                $addText.append($span)
                .height($addText.height())
                .width($addText.width());

see this solution http://jsfiddle.net/zgLm44q5/1/

also I optimised you code a bit, but there are still thing that could be written more elegantly

Answer 2

I have fixed the issue by using chart 'load' callback. Refer here

events: {
    load: function() {
        var chart = this,
        rend = chart.renderer,
        pie = chart.series[0],
        left = chart.plotLeft + pie.center[0],
        top =  chart.plotTop + pie.center[1],
        text = rend.text(Math.round((response.engagement / response.traffic || 0) * 100) + '%', left,  top).attr({'text-anchor': 'middle','class': 'middleText'}).add();
    }
}

JSFIDDLE