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

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.afterSetExtremes

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

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