jquery - Highcharts中不同地区的人口金字塔

Question

使用 Highcharts，我想创建一个类似于这个的人口金字塔：

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/bar-negative-stack/

但这会比较不同的地区。因此，不是每个年龄组和性别都有一个条形图，而是有 3 个条形图，每个代表一个不同的区域。

到目前为止我所拥有的是这个，但我不确定我是否朝着正确的方向前进。

http://jsfiddle.net/YCxgr/

如您所见，给定年龄类别和区域的条形图彼此不对齐：我想要的是使区域的条形图针对两种性别正确对齐，以便它们显示为 3 个条形图（每个区域一个) 而不是 6. 我怎样才能做到这一点？

Answer 1

为你准备一个 jsFiddle 现在回答你的问题

   series: [{
    name: 'Region 1',
    zIndex: 1000,
    data: [[0, -3 ],[0,3],[1, -5] ,[1,5],[2, -4],[2,4],[3, -3],[3,3]]
},{
    name: 'Region 2',
    data: [[0, -4] ,[0,4],[1, -2],[1,2],[2, -6],[2,6],[3, -4],[3,4]]
},{
    name: 'Region 3',
    data:  [[0, -3],[0,3],[1, -5],[1,5],[2, -4],[2,4],[3, -3],[3,3]]
}]

工作的jsFiddle

Answer 2

当我今天查看示例时，只有原始的普通金字塔示例有效。另一个在结果窗格中没有显示任何内容。

我注意到缺少 highcharts 库引用，并且 jquery 版本在 1.4.2 上。

我通过添加引用修复了这两个问题：

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

并选择 jquery 1.7.2 版。现在他们（再次）显示金字塔。看：

1. 原创海报的多柱金字塔尝试
2. 修复了答案中的多列金字塔

我希望这可以帮助其他对示例感兴趣的人。