我如何重新设计这个高图答案

【问题标题】：How do I redesign this highchart我如何重新设计这个高图
【发布时间】：2013-10-17 16:28:47
【问题描述】：

编辑：

我如何将底部图表放在顶部图表的右侧并将它们对齐，就像它们看起来像一个图表一样

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

新编辑：

我可以改变答案的唯一方法是，如果有人可以在一个容器 div 而不是 2 个容器中开发相同的图表。

【问题讨论】：

当我四处寻找我的示例代码时，您可以做的是创建 2 个单独的图表，但仅在 xAxis 上启用并偏移图表以使它们对齐。
我绝对可以尝试一下，但我希望图表的加载使其无缝，就好像它们是一个有凝聚力的单元而不是两个独立的实体一样。感谢您的关注。
我找不到我要找的那个，但您可以使用它作为基础：jsfiddle.net/wergeld/Z8V3v。这是一张图表，不是两张。
为什么不能以这种方式构建它：highcharts.com/demo/bar-negative-stack - 这应该更快更复杂。
@codename 我同意你的看法，伙计......但你知道设计要求。是设计要求。作为开发人员，我对此没有太多发言权。虽然我确实向他们提出了这个建议，但被拒绝了:)

标签： highcharts

【解决方案1】：

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

希望这对您有用。

【讨论】：

谢谢，我得到了我需要的东西。谢谢。请参考我的jsfiddle jsfiddle.net/dP93u/3

【解决方案2】：

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

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

【讨论】：

【解决方案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。

【讨论】：