使用 Highcharts 的（水平）条形图和折线图

【问题标题】：(Horizontal) bar and line chart with Highcharts使用 Highcharts 的（水平）条形图和折线图
【发布时间】：2016-02-23 17:55:39
【问题描述】：

我想用 Highstocks/Highcharts 在时间序列后面绘制水平条形图，类似于蓝色 here 显示的成交量与价格的关系。做了一些挖掘后，我不相信 Highcharts 可以做到这一点，因为条形图基本上颠倒了 x 轴和 y 轴，所以我没有时间作为 x 轴沿着底部运行，价格为垂直运行的 x 轴。我说得对吗？

【问题讨论】：

是的，没错。可以通过在折线图的顶部添加条形图来完成，但是（将条形图的包含元素置于折线图的包含元素之上，具有透明的图表和绘图背景）

标签： highcharts

【解决方案1】：

没有内置选项可以实现这一点。

您可能会使用polygon 系列类型来模拟条形系列。

我过去通过创建两个图表来实现这一点，它们包含的 div 被定位，以便它们看起来好像它们是同一个图表。

HTML：

<section id="wrapper">
    <div id="line-chart"></div>
    <div id="bar-chart"></div>
</section>

CSS：

#wrapper {
    position:relative;
    margin:1em auto;
    padding:0;
    width:900px;
}
#line-chart {
    margin:0;
    padding:0;
    height:400px;
}
#bar-chart {
    position:absolute;
    top:0;
    right:0;
    width:200px;
    height:400px;
    margin:0;
    padding:0;
}

工作示例：

http://jsfiddle.net/jlbriggs/r2Lvo2dw/

（此示例自动根据提供的线数据构建直方图）

【讨论】：