高图多轴-在多个图表上同步轴

Question

我有两个多轴的高图表。这两组轴代表相同的单位，两个图表是水平对齐的。我创建了一个JSFiddle来演示基于高图样本的设置

http://jsfiddle.net/dennismadsen/gbbzz2jh/

​

​

在这个例子中，你可以放大图表上的y轴到左边。请注意，正确的图表上的轴是同步的。使用此afterSetExtremes事件完成的操作：

function syncYAxis(e) {
    var thisAxis = this;
    var thisChart = e.currentTarget.chart;

    Highcharts.each(Highcharts.charts, function (chart) {
        if (chart && chart !== thisChart) {
            var currentAxis = chart.get(thisAxis.options.id);
            currentAxis.setExtremes(e.min, e.max);
        }
    });
}

如果我将正确的图表更改为不同的高级图表，那就不再起作用了。请参见此JSFiddle：

http://jsfiddle.net/dennismadsen/kmuhw0zf/

我尝试调试并将一个afterSetExtremes事件添加到正确的图表轴：

function rightChartAxisChanged(e) {
    var thisAxis = this;
    console.log('Right chart axis changed: '+thisAxis.options.id);
    console.log('min/max: '+e.min+','+e.max);
    console.log('user min/max: '+e.userMin+','+e.userMax);
}

据我所见，e.min和e.max中的新的min/max值似乎计算错误。我在setExtremes调用中在syncYAxis中给出的正确值存储在e.userMin和e.userMax中。

Answer 1

嗯，我试过你的演示程序( http://jsfiddle.net/dennismadsen/kmuhw0zf/ )--它工作得很好，但有时它会失败。无论如何，我会用tickPositioner改进第二个图表的逻辑:所以滴答总是得到与第一个相同的数字，例如：http://jsfiddle.net/kmuhw0zf/3/。

        tickPositioner: function () {
            return $('#chart1').highcharts().get('axis1').tickPositions.slice();
        },
        id: 'axis1',

此外，您还可以将alignTicks设置为false，因此它将防止高海图逻辑在特定位置强制执行滴答。

对于e.min/e.max和a.userMin/e.userMax -您可以设置例如max = 32.1235，这将存储在e.userMax中，但是图表将呈现max = 35 (对于一个很好的勾号)，因此e.max将是35。请注意，对于我来说，您的两个演示都很好(除了alignTicks的问题)。