javascript - 如何将一个 highcharts 放在另一个之上

Question

我创建了两个图表。第一个包括箱形图/面积图的组合图。第二个是创建多个并排极坐标图的循环。这是 jsfiddle:http://jsfiddle.net/civilsurfer/kw20pq8n/14/

请展开图表，以便您可以看到在所有极坐标图表下方还有另一个图表。

我的目标是使此设置尽可能响应移动设备。为此，我想让顶部图表占据屏幕高度的前 80%，第二组图表(极坐标)占据屏幕高度的后 20%。

我遇到的主要问题是，我以一种我理解的更直接的方式在脚本顶部创建了第一个图表的 div(和包装器)...然后通过 javascript 在底部创建了一个 div jsfiddle JS(第 981 行)。我想要的是在包装 div 中包含极坐标图。相反，现在极坐标图绘制在箱形图/面积图之上。这可能是我不知道如何将我在下面创建的这个 div(用于极坐标图)推到箱形图/面积图下方的问题。

var container2 = document.createElement('div');
container2.style.cssText = 'position: relative; float: left; width: 5%; 
height: 20%; margin-bottom: 0;'
document.body.appendChild(container2);

不可否认，我花了很多时间来创建图表，但我并不擅长 CSS 以及将所有这些部分集成到一个漂亮的布局中。任何帮助将不胜感激。

这是我正在寻找的总体布局/间距的图片。我通过为方框/面积图 (800px) 提供像素高度来实现这一点，但在手机上图表太大了。这就是为什么我想使用 % 作为高度，希望在移动屏幕和 pc 屏幕上同时保留箱线/面积图和极坐标图。

Answer 1

我想我找到了答案。我最终为 html 和正文添加了一些 CSS，然后我将第二个容器(极坐标图)附加到包装器上。我将两个容器(图表)都放在 wrapper 内，并使 wrapper 高度为 100%，容器分别为 75% 和 15%。

http://jsfiddle.net/civilsurfer/mwzkgvq1/2/

CSS:

html, body {
height:100%;
}
#wrapper {height: 100%;}
#container {position: relative; height: 75%;}