javascript - 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);
        }
    });
}

如果我将右侧的图表更改为不同的 Highchart，那将不再有效。看到这个 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 中的新最小/最大值计算错误。我在 syncYAxis 的 setExtremes 调用中给出的正确值存储在 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，这样可以防止 Highcharts 逻辑在特定位置强制刻度。

关于 e.min/e.max 与 a.userMin/e.userMax - 你可以设置例如 max = 32.1235，这将存储在 e.userMax 中，但是图表将呈现 max = 35(一个不错的刻度数)，所以 e.max将是 35。请注意，对我来说，您的两个演示都可以正常工作(alignTicks 问题除外)。