Highchart Solid Gauge Responsive

Question

我使用Highchart創建了Solid Gauge圖表。 但是當屏幕分辨率更改圖表仍以原始大小顯示時。

我需要敏感的固體儀表圖表。 Demo Link

Answer 1

固體測量圖表本身可以很好地處理尺寸變化。我有updated the demo JFiddle來顯示儀器如何處理大小調整。

主要這裏的想法是，當窗口大小的div的寬度由CSS改變：

<div id="container-speed" style="width: 50%; float: left"></div> 

而div的高度由JS改變：

function setDivHeight() { 
    var div = $('#container-speed'); 
    div.height(div.width() * 0.75); 
    div = $('#container-rpm'); 
    div.height(div.width() * 0.75); 
} 

$(window).on('load resize', function(){ 
    setDivHeight();   
}); 

請注意，寬度和高度之間的比例看起來是理想的4：3，這就是代碼乘以0.75來設置高度的原因。

根據您希望處理的屏幕大小，管理文本元素將根據您的選擇進行CSS/JS/HTML定位和調整大小。