Geek Answers Handbook

How to align the HTML range in the center of a high-graphic chart with responsive design?

I use Highcharts.js to draw a do-nut chart.

Here I need legends, just to the right of the chart and "span" outside the container (svg) in the center of the chart. Legends work correctly, and "span" does not align in the center of the chart in a responsive way.

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));
+4
source share
2 answers

I fixed the problem using the "load" chart callback. Contact 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

0
source

, : , - , . 100%

,

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

. http://jsfiddle.net/zgLm44q5/1/

, ,

0

More articles:


All Articles