在highChart图表中拖动放大后如何获取图表最小值和最大值？

Question

http://jsfiddle.net/leongaban/0zuxtdcg/

I could not find a "Drag zoom" type event in the HighChart docs that would tell me that the user has finished zooming into a specific range on the chart, then give me the new min and max values.

$(function () {
  $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {

      $('#container').highcharts({
          chart: {
              zoomType: 'x'
          },
          title: {
              text: 'USD to EUR exchange rate over time'
          },
          subtitle: {
              text: document.ontouchstart === undefined ?
                      'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
          },
          xAxis: {
              type: 'datetime'
          },
          yAxis: {
              title: {
                  text: 'Exchange rate'
              }
          },
          legend: {
              enabled: false
          },
          plotOptions: {
              area: {
                  fillColor: {
                      linearGradient: {
                          x1: 0,
                          y1: 0,
                          x2: 0,
                          y2: 1
                      },
                      stops: [
                          [0, Highcharts.getOptions().colors[0]],
                          [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                      ]
                  },
                  marker: {
                      radius: 2
                  },
                  lineWidth: 1,
                  states: {
                      hover: {
                          lineWidth: 1
                      }
                  },
                  threshold: null
              }
          },

          series: [{
              type: 'area',
              name: 'USD to EUR',
              data: data
          }]
      });
  });
});

Answer 1

The zoom effects the extremes of the axis. You can use the setExtremes or afterSetExtremes events of the axis to catch this.

For example ( JSFiddle ):

xAxis: {
    events: {
        setExtremes: function(e) {
            alert("Min: "+e.min+"\n"
                    +"Max: "+e.max);
        }
    }
}

The e object contains the min and max, while this in the function is the Axis object (which also has min and max). The minor difference between the two events is described in the API as:

afterSetExtremes ... As opposed to the setExtremes event, this event fires after the final min and max values are computed and corrected for minRange .