wake-up-neo.com

Automatisches Vergrößern von Highcharts nach dem Laden

Weiß jemand, wie man einen Teil eines Diagramms nach dem Laden automatisch vergrößert? Ich habe viele Zeitreihendaten, aber die wichtigsten Informationen sind rechts. Ich möchte weiterhin, dass alle Daten verfügbar sind, aber nur die letzten 7 Tage in der Ansicht vergrößert werden.

Was ich simulieren möchte, ist ein Benutzer, der für die letzten 7 Tage in meinem Diagramm auf die Schaltfläche klickt. Wenn also jemand weiß, wie man dieses Ereignis manuell auslöst, würde ich es wahrscheinlich gerne tun.

Hier ist ein Beispieldiagramm von jsfiddle mit der normalen Zoomfunktion: http://jsfiddle.net/Y5q8H/50/

Ich habe ein paar andere Ideen, wie das gemacht werden könnte, aber ich denke, was ich will, ist der beste Weg, dies zu tun.

Andere Ideen:

1) Laden Sie nur die letzten 7 Tage, und setzen Sie einen gefälschten "Zoom zurücksetzen" -Button, der anschließend die gesamte Datenreihe lädt

2) Sehen Sie sich das Schwesterprodukt StockCharts an, das sich gerade in der Beta befindet. Es scheint eine Reihe von voreingestellten Bereichsanzeigen zu haben, die auch cool wären. Ich bin mir nicht sicher, wie viel meines vorhandenen Codes ich ändern müsste.

16
Robodude

Mit der Funktion setExtremes können Sie den Zoom ändern. http://jsfiddle.net/quVda/382/

Für ein Zeitreihendiagramm mit tagesaktuellen Informationen müssen Sie die UTC-Darstellung des Datums verwenden:

var d = new Date();
chart.xAxis[0].setExtremes(
    Date.UTC(d.getFullYear(), d.getMonth(), d.getDate() - 7),
    Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
29
Dennis

Aktualisiertes offizielles Fiddle für die Lösung, Jungs: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/members/axis-setextremes/

$(function() {
    $('#container').highcharts('StockChart', {

        rangeSelector: {
            selected: 1
        },

        series: [{
            name: 'USD to EUR',
            data: usdeur
        }]
    });

    $('#button').click(function() {
        var chart = $('#container').highcharts();
        chart.xAxis[0].setExtremes(
            Date.UTC(2007, 0, 1),
            Date.UTC(2007, 11, 31)
        );
    });
});
3
Andy Webov

Wenn Sie es versuchen, gibt es eine andere Option

var max_in = 100; //the highest y value you have in your series data;
var min_in = 41 ;//the lowest y value you have in your series data;

yaxis=this.yAxis[0];
yaxis.options.max = max_in;
yaxis.options.min = min_in;
0
zero8