highcharts - How do I redesign this highchart

Question

EDIT:

How do i bring the bottom graph to the right of the top chart and align them as if they look like one chart

http://jsfiddle.net/dP93u/

<div><div id="container1" style="width: 300px; height: 400px;"></div><div id="container" style="width: 300px; height: 400px; margin: 0 auto"></div></div>

New EDIT:

The only way i can change the answer is if someone can develop the same chart in just one container div instead of 2.

Answer 1

我建议您构建两个条形图，设置它们的偏移量以使它们对齐，注意只有一个具有 xAxis。

希望这对你有用。

Answer 2

如果您不介意包含 bootstrap.css 库，那么解决方案非常简单。检查这个小提琴。

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

Answer 3

您是否打算：如何在两个条形系列之间添加价值标签？您可以通过 css 完成：

<div style="font-family:verdana">
<p style="text-align:center">Population pyramid for Germany, midyear 2010</p>
<p style="font-size:small;text-align:center">Source: www.census.gov</p>
<div id="container1" style="width: 50%; height: 400px;float:left"></div>
<div id="container" style="width: 50%; height: 400px;float:left;position:relative;left:-55px"></div>
</div>
<div style="clear:both"></div>

以及对 HighCharts 代码的一些改进。见jfiddle。