Highcharts - Navigation durch 3. Element in Serie 'versteckt' in Handlung

Question

Ich habe einige Informationen, die in diesem Format (Geschwindigkeit, Häufigkeit, Datum) ist. Was passiert, ist, dass ich dieses Diagramm mit Geschwindigkeit x Häufigkeit plotten muss, aber ich möchte den Benutzern erlauben, die Navigationsfilterung nach dem Datum zu verwenden, das nicht auf dem Diagramm erscheint.

Auch habe ich einige Informationen, die nicht dynamisch aufgebaut ist, das ist die Grenzen der Geschwindigkeit x Frequenz. Diese Informationen werden als Referenzpunkte in der Handlung festgelegt. Wenn ich also die Plot-Informationen (nicht die Grenzen) filtere, müssen immer diese Grenzwert-Plots angezeigt werden.

Sie können eine Idee von diesem Diagramm haben, die Flächendiagramme zeigen die Grenzen für die Punkte (Geschwindigkeit, Frequenz). Dann würde ich Punkte der Geschwindigkeit x Häufigkeit (x Datum) hinzufügen und dann nach Datum filtern.

Können Sie mir einen Rat geben?

ist hier ein JSFIDDLE

JSFIDDLE

data: [ 
       [0, 20, here is a date], [10, 20,here is a date], 
       [50, 39.9994, here is a date], [100,49.7494, here is a date] 
      ], 

Typen, bemerken, dass jedes Element des Feldes in der Serie hat 3 Elemente [a, b, c] an, dass die dritte (c) ist ein DATUM und keine Zufallszahl wie es gerade ist. Ich möchte in der Lage sein, den kommentierten Navigatorcode zu verwenden, um diese Reihe nach diesem C-Element zu filtern, das tatsächlich nicht auf dem angezeigten Diagramm erscheint, sondern ein verborgenes Element, nur um die Daten zu filtern.

Answer 1

Es wird ein wenig schwierig, wenn Sie einen Navigator im selben Diagramm haben wollen. Navigator arbeitet nur mit Datetime-Daten und muss vom Hauptdiagramm aus mit der Achse verbunden sein.

Also, Sie haben Daten in diesem Format:

var points = [ 
    [5, 9, Date.UTC(2016, 1, 0)], 
    [65, 6, Date.UTC(2016, 1, 1)], 
    ... 

Sie benötigen zwei x-Achsen - eine, die die Daten und die andere darstellt, die an den Navigator angeschlossen ist. Die zweite Achse muss sichtbar sein, um mit dem Navigator zu arbeiten, und muss mit den Datetime-Daten verbunden sein.

So, jetzt, außer zwei x-Achsen, benötigen Sie zwei Serien - eine mit den tatsächlichen Daten, und die andere besteht aus [date, y] Werte aus der ersten Serie. Die zusätzlichen Daten werden im Navigator sichtbar sein - beachten Sie, dass Sie im Navigator keine Scatter-Serien verwenden können - so wird es in eine Zeilenserie umgewandelt - damit es ohne Fehler geschieht, sollten Ihre Daten nach Datum sortiert sein.

series: [{ 
    id: 'main-series', 
    data: points.map(function(point) { 
    return [point[0], point[1], point[2], point[1]] 
    }), 
    showInNavigator: false, 
    xAxis: 1, 
    keys: ['x', 'y', 'date', 'holdY'] //holdY is for easier hiding points 
}, { 
    xAxis: 0, 
    data: points.map(function(point) { 
    return [point[2], point[1]]; 
    }), 
    showInNavigator: true, 
    enableMouseTracking: false, 
    color: 'transparent', 
    showInLegend: false 
}], 

xAxis: [{ 
    minRange: 1000 * 3600 * 24, 
    type: 'datetime', 
    tickLength: 0, 
    tickLength: 0, 
    labels: { 
    enabled: false 
    }, 
}, { 
    type: 'linear' 
}], 

Die letzte Sache, die Sie einen Rückruf benötigen, der Punkte versteckt/zeigt, nachdem die Extreme im Nautiker eingestellt werden. Das Verbergen/Zeigen hängt von der Eigenschaft des dritten Punkts ab, der ein Datum ist. Es gibt keine direkte API, um bestimmte Punkte zu verstecken/anzuzeigen (außer Kuchen), aber es kann erreicht werden, indem man den Wert des Punktes auf Null setzt (deshalb habe ich das echte y in HoldY erhalten).

events: { 
    afterSetExtremes: function(e) { 
    var points = this.chart.get('main-series').points; 
    points.forEach(function(point) { 
     point.update({ 
     y: e.min <= point.date && point.date <= e.max ? point.holdY : null 
     }, false, false); 
    }); 
    this.chart.redraw(); 
    } 
} 

Beispiel: https://jsfiddle.net/3wuwdonn/1/

Ich würde einen Navigator als separate Grafik verwenden, dann würden Sie nicht die zweite x-Achse und Serie im Haupt Diagramm benötigen und Sie würden sie nicht machen müssen unsichtbar aussehen.

Beispiel mit einem Navigator nur hier Diagramm: http://jsfiddle.net/f7Y9p/