有可能在两个散点图之间同步缩放吗？

Question

​

​

我想实现两件事。

在上面的图片中，想象上面的部分根本不存在。如果用户要点击底部图表上的任何一点，我希望用放大视图创建顶部图表。如果底部的部分被点击和拖动，上面的部分应该跟随这一点。

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

这些能用高图集吗？

Answer 1

是的，这种行为在高级图表中很容易实现。您所需要做的就是使用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