如何在拖动后获得图表的最小值和最大值放大高图表

How to get chart min and max values after Drag zooming in highChart chart?

本文关键字：最小值最大值高图表放大拖动更新时间：2023-09-26

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

我在HighChart文档中找不到一个"拖动缩放"类型的事件，它会告诉我用户已经完成了对图表上特定范围的缩放，然后给我新的最小值和最大值。

$(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
          }]
      });
  });
});

缩放影响轴的极值。您可以使用轴的setExtremes或afterSetExtremes事件来捕捉这一点。

例如（JSFiddle）：

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

e对象包含min和max，而函数中的this是Axis对象（也有min和max）。API将两个事件之间的细微差异描述为：

afterSetExtremes。。。与setExtremes事件相反，此事件在计算并校正minRange的最终最小值和最大值后触发。