Highcharts調整窗口大小時將HTML右對齊

我已將自定義文本添加到圖表。圖表是流暢的，並在調整瀏覽器窗口大小時調整它的大小。Highcharts調整窗口大小時將HTML右對齊

有什麼方法可以將「受監視系統」和「漏洞」部分設置爲正確對齊，以便它們將隨圖表的其餘部分一起調整大小？

function(chart) { // on complete 

chart.renderer.html('<div align="center" style="color: #333333; font-size: 36px; font-weight: bold; margin: 0px; padding: 0px;">96</div><div align="center" style="margin: -10px; padding: 0px;">Monitored Systems</div>', 350, 0) 
    .css({ 
     color: '#999999', 
     fontSize: '13px' 

    }) 
    .add(); 



    chart.renderer.html('<div align="center" style="color: #333333; font-size: 36px; font-weight: bold; margin: 0px; padding: 0px;">6</div><div align="center" style="margin: -10px; padding: 0px;"><i class="fa fa-warning" title="Warning"></i> Vulnerabilities</div>', 515, 0) 
    .css({ 
     color: '#999999', 
     fontSize: '13px' 

    }) 
    .add(); 
})

來源

2017-01-19 patlxix9

您需要將HTML元素chart.events.redraw。您可以根據chart.plotLeft和chart.plotWidth計算他們的新職位。

chart: { 
renderTo: 'cont_monitor', 
marginTop: 50, 
backgroundColor: 'transparent', 
events: { 
    redraw: function() { 
    var elements = this.HTMLElements, 
     offsetWidth = 0, 
     i = elements.length; 

    while (--i > -1) { 
     offsetWidth += elements[i].getBBox().width + 75; 
    // offsetWidth += 235; 
     elements[i].attr({ 
     x: this.plotLeft + this.plotWidth - offsetWidth 
     }); 
    } 
    } 
} 
},

例如：https://jsfiddle.net/cdmv0cys/

來源

2017-01-20 11:21:42 morganfree

這是偉大的工作時，調整瀏覽器窗口。有什麼方法可以在初始頁面加載時找出正確的位置嗎？目前，數據加載在指定X，Y座標的地方，但在調整大小時，調整大小。 – patlxix9

Nevermind，我添加了chart.plotWidth - 指定的偏移量，以指定X座標的位置，它的運行效果很好現在..謝謝！ – patlxix9

是的，這正是你在最初的回調中應該做的。 – morganfree

Highcharts調整窗口大小時將HTML右對齊

回答

相關問題