Highcharts：如何使用两个轴 - 来自 y 轴的条形图和来自 x 轴的脊柱

Question

我想知道是否有人知道如何在 highcharts 中制作 2 个图表（使用 2 个轴），因为它在 x 轴上有一个正常的脊柱图，在相反的 y 轴上有一个条形图？

我目前有一个带有样条曲线和柱形图的图表，但有人问我是否可以移动柱形，使它们从右边进入？

看到样条曲线是信息带，而条形图是总计，因此它们实际上只需要一个轴，而脊柱则同时使用带编号和数量。

我希望这些列来自右侧的 y 轴。

我尝试了多个 x 轴和 y 轴，但是当我更改为 'bars' 而不是 'columns' 时，它会将条形图和脊柱图都翻转到右侧的 y 轴。

理想情况下，我希望书脊在底部 x 轴上，条形图在右侧 y 轴上。

希望你们中的一个能帮助我

Answer 1

不幸的是，这在 highcharts 中不受支持，因此您需要始终保持相同的轴方向。

Answer 2

因此，如前所述，Highcharts 中没有针对一张图表执行此操作的设置。

有 2 个单独的图表和一些 CSS 工作，但是，这是完全可行的。

想法是在一个 div 中构建一个折线图，在第二个 div 中构建一个条形图，将它们都放在一个包装器中，并使用 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/ea5bf1j5/

我使用这种方法来显示所观察时间序列的直方图。

当然，您可以调整定位和透明度，并可以通过多种方式进行设置。

示例，条形位于左侧，重叠：

http://jsfiddle.net/jlbriggs/ea5bf1j5/8/

Highcharts：如何使用两个轴 - 来自 y 轴的条形图和来自 x 轴的脊柱

Highcharts: How to use both axis - bar coming from y axis and spine coming from the x

highcharts