如何在高图图表中拖动缩放后获取图表最小值和最大值?

时间:2016-05-02 19:58:53

标签: javascript charts highcharts

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

1 个答案:

答案 0 :(得分:1)

缩放会影响轴的极限。您可以使用轴的setExtremesafterSetExtremes事件来捕获此信息。

例如(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的最终最小值和最大值后触发。