是否可以在两个散点图之间同步缩放？

Question

我想实现两件事。

1-在上图中，假设顶部不存在。如果用户单击底部图表上的任意点，则我希望使用放大视图创建顶部图表。如果单击并拖动底部，则顶部应紧随其后。

2-如果放大了底部的图表，我希望也放大顶部的图表。例如：如果底部是1倍，顶部是2倍，如果我将底部放大2倍，则顶部现在应该是4倍。

高图有可能吗？

Answer 1

是的，这种行为在Highcharts中很容易实现。您需要做的就是使用Axis.afterSetExtremes和Point.click事件回调函数来创建或更新具有正确轴极限的另一个图表。例如：

var chart1,
  scale = 4;

function createOrUpdateDetail() {
  var isPointClick = !this.lin2log,
    chart = this.chart || this.series.chart,
    xMin = chart.xAxis[0].min,
    xMax = chart.xAxis[0].max,
    xRange = xMax - xMin,
    xCenter = (xMax + xMin) / 2,
    yMin = chart.yAxis[0].min,
    yMax = chart.yAxis[0].max,
    yRange = yMax - yMin,
    yCenter = (yMax + yMin) / 2,
    calcXMin,
    calcXMax,
    calcYMin,
    calcYMax;

  if (isPointClick) {
    xCenter = this.x;
    yCenter = this.y;
  }

  calcXMin = xCenter - xRange / scale;
  calcXMax = xCenter + xRange / scale;
  calcYMin = yCenter - yRange / scale;
  calcYMax = yCenter + yRange / scale;

  if (!chart1) {
    chart1 = Highcharts.chart('container', {
      series: [{
        type: 'scatter',
        data: this.series.options.data
      }],
      xAxis: {
        min: calcXMin,
        max: calcXMax,
      },
      yAxis: {
        endOnTick: false,
        startOnTick: false,
        min: calcYMin,
        max: calcYMax
      }
    });

  } else {
    chart1.update({
      xAxis: {
        min: calcXMin,
        max: calcXMax,
      },
      yAxis: {
        min: calcYMin,
        max: calcYMax
      }
    });
  }
}

Highcharts.chart('container2', {
  chart: {
    zoomType: 'xy',
    panning: true,
    panKey: 'shift'
  },
  yAxis: {
    endOnTick: false,
    startOnTick: false,
  },
  xAxis: {
    events: {
      afterSetExtremes: createOrUpdateDetail
    }
  },
  series: [{
    type: 'scatter',
    data: [...],
    point: {
      events: {
        click: createOrUpdateDetail
      }
    }
  }]
});

---

实时演示： http://jsfiddle.net/BlackLabel/6m4e8x0y/4982/

API参考：

https://api.highcharts.com/highcharts/xAxis.events.afterSetExtremes

https://api.highcharts.com/highcharts/series.scatter.events.click

https://api.highcharts.com/class-reference/Highcharts.Chart#update