如何使用响应式设计将Highchart甜甜圈图中心的HTML范围对齐？

杰夫·约翰尼

我正在使用Highcharts.js绘制甜甜圈图。

在这里，我需要图例恰好适合图例，并且在图中心的容器（svg）外部需要一个“跨度”。图例正常工作，而“跨度”未在响应视图上对准图的中心。

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

杰夫·约翰尼

我已经通过使用图表“加载”回调解决了该问题。请参考这里

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。