Highstock-Grafik mit Daten außerhalb des ausgewählten Bereichs

Ich habe eine Highstock-Grafik implementiert, bei der die Grafik in der Breite schmaler wird, um zwei von ihnen nebeneinander zu platzieren. Eine Konsequenz davon scheinen Daten zu sein, die von der linken Graphik nach rechts überbluten. Selbst wenn nur ein Graph in der Breite verengt ist, scheint es immer noch zu passieren.Highstock-Grafik mit Daten außerhalb des ausgewählten Bereichs

Die Daten, die bluten, können nur angezeigt werden, wenn Sie den Mauszeiger darüber bewegen. Der Halo und Tooltip werden für den Datenpunkt angezeigt, obwohl er sich im Navigator außerhalb des ausgewählten Bereichs befindet.

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>

Quelle

2017-05-15 Cowanch

Statt min-Breite zu verwenden, verwenden nur Breite. Dies verkürzt nicht nur die Breite des Diagramms, sondern auch die Breite des Navigators. Bitte überprüfen Sie http://jsfiddle.net/7dk6g6rh/1/ – komal

Ich kann immer noch den zusätzlichen Datenpunkt in Ihrer Lösung sehen. Die Länge des Navigators ist nicht das Problem, es ist der zusätzliche Datenpunkt, der angezeigt wird, wenn der Mauszeiger gerade auf der rechten Seite des Diagramms schwebt (siehe Screenshot in der ursprünglichen Frage). – Cowanch

Wenn Sie die extreme Linie entfernen, erhalten Sie das gewünschte Ergebnis. bitte überprüfen Sie http://jsfiddle.net/7dk6g6rh/2/ – komal

löste ich dieses Problem, indem extending Highcharts zu verhalten, wie ich es wollte. Ich habe die Funktionen Tooltip, Point und Axis (refresh, setState bzw. drawCrosshair) umgebrochen, um einige Überprüfungen durchzuführen, bevor ich zum normalen Betrieb übergehe.

Hier ist die JSFiddle mit dem richtigen Verhalten: 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>

Quelle

2017-05-16 14:09:14 Cowanch

Highstock-Grafik mit Daten außerhalb des ausgewählten Bereichs

Antwort

Verwandte Themen