Highchart 多轴 - 在多个图表上同步轴答案

【问题标题】：Highchart multiple axes - sync axes on multiple chartsHighchart 多轴 - 在多个图表上同步轴
【发布时间】：2015-11-26 08:11:51
【问题描述】：

我有两个带有多个轴的 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 中。

【问题讨论】：

所以在我放大第一个高图时您提供的第二个小提琴中，第二个也放大了。这意味着它们是同步的。你能告诉我你想同步什么吗
对我来说似乎也能正常工作。您能否描述一下什么是不正确/不起作用的，或者我们如何逐步复制您的问题？

标签： javascript highcharts

【解决方案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 的问题除外）。

【讨论】：