2016-05-02 11 views
1

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

ズームは、極端な軸に影響します。軸のsetExtremesまたはafterSetExtremesイベントを使用してこれを捕捉することができます。例えば

JSFiddle):関数でthisは(またminとmaxを有する)軸対象である

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

eオブジェクトは、minとmaxを含んでいます。最終最小値と最大値がminRangeのために計算され、修正された後setExtremesイベント、このイベントが発生するとは対照的に...

afterSetExtremes:二つの事象間のわずかな違いは以下のようにAPIに記述されています。

関連する問題