Question

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

我需要响应的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定位和调整大小，具体取决于您希望处理的屏幕大小。

Answer 2

以下解决方案管理垂直和水平方向上的响应度。此外，它不需要其他JS来调整容器div的大小。检查这个小提琴： https://jsfiddle.net/istibekesi/bm3d1zng/

默认情况下，Highchart将图表的高度设置为400px。因此，诀窍是通过百分比设置图表的高度：

#container-speed {
  height: 180%
}

Highchart Solid Gauge响应

2 个答案: