Highchart多轴 - 多个图表上的同步轴

Question

我有两个拥有多个轴的Highcharts。两组轴代表相同的单位，两个图表水平对齐。我已经创建了一个JSFiddle来基于Highchart sample来说明我的设置：

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中的新最小/最大值计算错误。我在setExtremes的{​​{1}}来电中提供的正确值存储在syncYAxis和e.userMin中。

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，这样就可以阻止Highcharts逻辑强制在特定位置进行刻度。

关于e.min / e.max vs a.userMin / e.userMax - 你可以设置例如max = 32.1235，这将存储在e.userMax中，但是图表将呈现max = 35（对于一个漂亮的刻度数字），因此e.max将为35.注意，对我来说，这两个演示都可以正常工作（除了alignTicks的问题）。