Question

我有两张同步的图表。他们留有余量以确保它们均匀对齐。我有一些情况，我有多个yAxis可以打开，他们在右侧与左侧相对。我试图使用相同的marginRight方法但是当第二，第三或第四轴被添加到右边时它不会显示，因为没有足够的空间。因此，我正在处理右侧的动态空间。 Highcharts只处理一个图表时处理动态方面，但我需要我的第二个图表具有相同的余量，即使它没有这些额外的yAxis。这个时间序列数据在两个图表中保持一致非常重要。

处理此问题的方法是什么？

更新：

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

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

当他们自己转动时，系列会被渲染并添加轴和标题。这个例子表明，第一个图表没有意识到第三个图表有3个轴，因此应该有更多的marginleft

更新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/（对于Highcharts＆lt; 5.0.0）

<强>更新

使用Highcharts 5+可以通过chart update进行相同的操作。

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

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

如果每个图表中有多个系列，您可以为load，redraw，afterAnimate等事件调用自定义函数。

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

Highcharts与多个yaxis同步

1 个答案: