Highchart Solid Gauge响应

Question

我使用Highchart创建了Solid Gauge图表.但是当屏幕分辨率改变时,图表仍然以原始尺寸显示.

我需要响应的Solid Gauge图表. Demo Link

Answer 1

实心仪​​表图表可以很好地处理尺寸变化.我已经更新了演示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定位和调整大小,具体取决于您希望处理的屏幕大小.