Highcharts与多个yaxis同步-Java 学习之路

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

处理这个问题的方法是什么？

更新：

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

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

当它们自己转动时，渲染系列并添加轴和 Headers . 此示例显示第一个图表没有意识到第3个图表有3个轴，因此应该有更多的marginleft

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

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 <5.0.0）

UPDATE:

使用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/

回复于 2024-05-10T08:39:27+08:00

Highcharts与多个yaxis同步

1 回答

相关问题