Wie zeichnen Sie einen Datumsbereich auf der X-Achse in Flot-Charts?

Ich bin mit Flot-Diagramme für die Anzeige von Daten für einen bestimmten Zeitraum (wählbar durch den Benutzer, z.B. Letzte 30 Tage, Letzte 7 Tage, ab 1. Jan 2013 bis 3. März 2013 etc)

So, ich möchte, um eine Linie Diagramm mit x-Achse als Datum.

E. g. wenn ich zwei Tage, startDate und endDate wie mache ich die X-Achse zeigt etwa wie:

1 Jan 2013 | Jan 2 2013........................3 Mar 2013

Mein code ist wie folgt:
Die Daten (derzeit statisch).

var mydata = [
                [1, 2.4],
                [2, 3.4 ],
                [3, 4.5 ],
                [4, 5 ],
                [5,  5],
                [6, 5],
                [7, 2 ],
                [8, 1 ],
                [9, 1.5 ],
                [10, 2.5 ],
                [11,  3.5],
                [12, 4 ],
                [13, 4 ],
                [14, 2.4],
                [15, 3.4 ],
                [16, 4.5 ],
                [17, 5 ],
                [18,  5],
                [19, 5],
                [20, 2 ],
                [21, 1 ],
                [22, 1.5 ],
                [23,  2.5 ],
                [24,   3.5],
                [25,  4 ],
                [26,  4 ],
                [27,  2.5 ],
                [28,   3.5],
                [29,  4 ],
                [30,  4 ],
            ];

var plot = $.plot($("#mychart"), [{
                data: mydata,
                label: "Y-axis label"
            }], {
                series: {
                    lines: {
                        show: true
                    },
                    points: {
                        show: true
                    },
                    shadowSize: 2
                },
                grid: {
                    hoverable: true,
                    clickable: true
                },
                colors: ["#37b7f3", "#d12610", "#52e136"],
                xaxis: {
                     mode: "time", timeformat: "%d/%m/%y", minTickSize: [1, "day"]
                },
                yaxis: {
                    ticks: 11,
                    tickDecimals: 0,
            min:0, max: 5
                }
            });

Merke ich, dass ich brauche, um mydata Aussehen [Datum, Wert]. Wird, dass die Arbeit?
Ich habe die Daten dynamisch generiert werden, indem der server in JSON-in

[{Datum, Wert}, {Datum, Wert}...]

format.
Bitte guide.

InformationsquelleAutor LittleLebowski | 2013-03-04

15

Müssen Sie ändern Sie die zahlen, um UNIX-Zeitstempel, multipliziert mit 1000. Dies ist von der API, wenn Sie suchen, Time Series Data:

Die Zeit-Serie unterstützen, die in Flot basiert auf Javascript-Zeitstempel,
d.h. überall dort, wo ein Zeit-Wert erwartet wird oder übergeben, Javascript
timestamp-Zahl verwendet wird. Dies ist eine Zahl, nicht ein Date-Objekt. Ein
Javascript-timestamp ist die Anzahl der Millisekunden seit dem 1. Januar
1970 00:00:00 UTC. Dies ist fast die gleiche wie die Unix-timestamps, außer es ist
in Millisekunden, so denken Sie daran, multiplizieren Sie mit 1000!

Es ist ein .Net Beispiel in der API:
```
public static int GetJavascriptTimestamp(System.DateTime input)
{
System.TimeSpan span = new System.TimeSpan(System.DateTime.Parse("1/1/1970").Ticks);
System.DateTime time = input.Subtract(span);
return (long)(time.Ticks / 10000);
}
```
Hier ist ein Beispiel - http://jsfiddle.net/zxtFc/4/
- Vielen Dank. Das löst es!
- Du bist die Multiplikation mit 10.000, nicht 1.000, und Ihr Beispiel ist nicht angegeben, Wann/wo die Methode definiert ist, verwendet. Außerdem, du bist die Definition eines neuen DateTime-Wert, also warum analysiert eine Zeichenfolge, wenn Sie können geben Sie einfach das Jahr, den Monat und den Tag?
- Endlich... das scheint schlicht nicht funktionieren. Die Zecken bin ich immer zu bewerten, um irgendwo in der Jahr 1.
- In diesem Beispiel wird von der API. Hast du gelesen das FLOT documentaiton unter "Time Series Data"? Es funktioniert ganz gut.
InformationsquelleAutor Blake

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.