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

Question

我想实现两件事。

1 - 在上图中，假设顶部不存在。如果用户要单击底部图表上的任何点，我希望使用放大视图创建顶部图表。如果底部被单击并拖动，顶部应该跟随它。

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

这些可以用highcharts吗？

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.afterSetExtremeshttps://api.highcharts.com/highcharts/series.scatter.events.clickhttps://api.highcharts.com/class-reference/Highcharts.Chart#update