選択した範囲外のデータを示すハイストックグラフ

Question

グラフを幅が狭くして2つを横に並べるHighstockグラフを実装しました。これの結果は、左のグラフから右へいくらかのデータが出ているようです。単独でグラフの幅を狭くしても、それはまだ起こっているようです。

出血するデータは、上に置かないと表示されません。ナビゲータで選択範囲外にあるにもかかわらず、ハローとツールヒントがデータポイントに表示されます。

Hovering over a point outside of the graph

JSFiddle：http://jsfiddle.net/7dk6g6rh/

var stockChart = Highcharts.stockChart('container', { 
 
    xAxis: {  
 
     width: '500', 
 
     type: 'datetime' 
 
    }, 
 
\t \t series: [{ 
 
     data: [1, 2, 3, 4, 5, 3, 4, 6, 3, 8], 
 
     pointStart: Date.UTC(2004, 3, 1), 
 
     pointInterval: 3600 * 1000 
 
    }] 
 
}); 
 

 
stockChart.xAxis[0].setExtremes(1080777600000, 1080806400000);

<div id="container" style="height: 400px; min-width: 600px"></div> 
 

 
<script src="https://code.highcharts.com/stock/highstock.js"></script> 
 
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script> 
 
<script type="text/javascript" src="https://www.highcharts.com/samples/data/usdeur.js"></script>

Answer 1

私は、私はそれが欲しかった方法を動作するようにextending Highchartsことで、この問題を解決しました。私はTooltip、Point、Axisの関数（それぞれrefresh、setState、およびdrawCrosshair）をラップして、通常の操作に進む前にいくつかのチェックを行いました。幅のみを使用し、http://jsfiddle.net/7dk6g6rh/7/

(function (H) { 
 
    H.wrap(H.Tooltip.prototype, 'refresh', function(proceed, points) { 
 
     for(var i=0; i<points.length; i++) { 
 
      if(!points[i].isInside) { 
 
       this.hide(); 
 
       return; 
 
      } 
 
     } 
 
     proceed.apply(this, Array.prototype.slice.call(arguments, 1)); 
 
    }); 
 
    H.wrap(H.Point.prototype, 'setState', function(proceed, state) { 
 
     if(this.isInside || state !== 'hover') { 
 
      proceed.apply(this, Array.prototype.slice.call(arguments, 1)); 
 
     } 
 
    }); 
 
    H.wrap(H.Axis.prototype, 'drawCrosshair', function(proceed) { 
 
     var hoverPoint = this.chart.hoverPoint; 
 
     if(hoverPoint && hoverPoint.isInside) { 
 
      proceed.apply(this, Array.prototype.slice.call(arguments, 1)); 
 
     } else { 
 
      this.hideCrosshair(); 
 
     } 
 
    }); 
 
}(Highcharts)); 
 

 
var stockChart = Highcharts.stockChart('container', { 
 
    xAxis: {  
 
     width: '500', 
 
     type: 'datetime' 
 
    }, 
 
    series: [{ 
 
     data: [1, 2, 3, 4, 5, 3, 4, 6, 3, 8], 
 
     pointStart: Date.UTC(2004, 3, 1), 
 
     pointInterval: 3600 * 1000 
 
    }] 
 
}); 
 

 
stockChart.xAxis[0].setExtremes(1080777600000, 1080806400000);

<div id="container" style="height: 400px; min-width: 600px"></div> 
 

 
<script src="https://code.highcharts.com/stock/highstock.js"></script> 
 
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script> 
 
<script type="text/javascript" src="https://www.highcharts.com/samples/data/usdeur.js"></script>