多Y轴的高图同步

Question

我有两个图表是同步的。他们有一个空白，以确保他们是一致的对齐。在我的情况下，我有多个可以打开的yAxis，它们位于右侧，与左边相反。我试图使用同样的marginRight方法，但是当第二个、第三个或第四个轴被添加到右边时，它就不会出现，因为没有足够的空间。所以我要处理的是右边的动态空间。高图表处理动态方面时，它只是一个图表，但我需要我的第二个图表有相同的边际，即使它没有这些额外的yAxis。重要的是，这个时间序列数据保持在两个图表中。

处理这件事的方法是什么？

更新：

我在这里创建了一个简单的jsFiddle :在我的实际示例中，http://jsfiddle.net/28hrffv7/将showEmpty设置为false，并设置了一个默认隐藏的系列。

{ opposite: true,  title: { text: 'Random Text' }, showEmpty: false}

当他们转动它拥有它的系列是呈现和轴和标题被添加。这个例子显示，第一个图表没有意识到第三个图有三个轴，因此应该有更多的边框。

更新2:更新JS小提琴，以显示问题的更动态性质。当您切换图例中的一个系列时，您可以观察到斧头被添加和删除，这是需要的功能。需要的是保持所有图表在可绘制区域的宽度内保持同步，以便它们都正确地排列。http://jsfiddle.net/28hrffv7/3/

Answer 1

您可以对marginRight和marginLeft进行硬编码。

演示1：http://jsfiddle.net/28hrffv7/1/

或者检查哪个marginRight是最高的，并使用新的设置更新所有图表。守则的有关部分：

                }, {
                    data: []
                }]
            }, function(chart){
                if (chart.marginRight > topMarginRight) {
                topMarginRight = chart.marginRight;
                console.log(topMarginRight);
              }
            });
    }); // end of the each function creating the charts
    $.each(Highcharts.charts, function (i, chart) {
        chart.margin[1] = topMarginRight;
      chart.isDirtyBox = true;
      chart.redraw(false);
    })

演示2：http://jsfiddle.net/28hrffv7/4/ (用于高级图表< 5.0.0)

更新：

使用高级图表5+，通过图表更新也可以做到这一点。

    $.each(Highcharts.charts, function (i, chart) {
        chart.update({
        chart: {
            marginRight: topMarginRight
        }
      });
    })

演示3：http://jsfiddle.net/28hrffv7/5/

在每个图表中出现多个系列的情况下，您可以为加载、重绘、afterAnimate等事件调用自定义函数。

演示4：http://jsfiddle.net/acjaLxj1/1/