Share
Es gibt viele Tutorials zur Erstellung von CSS-Balkendiagrammen. Manchmal reichen Balkendiagramme jedoch nicht aus. Was ist, wenn sich unsere Datenspuren im Laufe der Zeit ändern und ein Liniendiagramm angemessener ist? Oder vielleicht sind wir mit einem Balkendiagramm nicht zufrieden. Geben Sie Flot, ajQuery-Plugin ein, mit dem wir problemlos gut aussehende Grafiken erstellen können.
In einer datenzentrischen Welt müssen wir oft große Datenmengen im Web anzeigen. Im Allgemeinen zeigen wir eine Wertetabelle mit Überschriften, und wenn wir wirklich Lust hätten, würden wir ein Bild eines Graphen verwenden. Die Leute mögen Bilder. Ich mag Bilder. Warum? Weil es viel einfacher ist, Daten zu interpretieren, wenn sie in visueller Form sind. Das Erstellen eines Grafikdiagramms und das Aktualisieren mit neuen Daten kann jedoch sehr schwierig sein. In diesem Tutorial verwenden wir ein jQuery-Plugin namens Flot, um Diagramme schnell zu erstellen.
Um zu beginnen, benötigen wir einige Daten. Für dieses Tutorial werden wir einige BIP-Daten für einige verschiedene Länder verwenden, die ich auf Wikipedia gefunden habe. Leider beziehen sich die Daten nur auf das Jahr 2003, aber da dies keine ökonomische Lehre ist, reicht es aus. Lassen Sie uns die Daten in eine einfache Tabelle einfügen und ein paar Zeilen hinzufügen, um sie zu beschreiben.
Flot-Tutorial
BIP basierend auf Wechselkursen im Zeitablauf. Werte in Milliarden USD. 2003 2002 2001 2000 1999 1998 Vereinigte Staaten von Amerika 10.882 10.383 10.020 9,762 9.213 8.720 EU 10.970 9.040 8,303 8.234 8.901 8.889 Vereinigtes Königreich 1,765 1,564 1.430 1,438 1,460 1.423 China 1,575 1,434 1,345 1,252 1,158 1,148 Indien 599 510 479 457 447 414 BIP basierend auf Wechselkursen im Zeitablauf. Werte in Milliarden USD.
Beachten Sie, dass die Tabelle in einem Div mit der ID "plotarea" enthalten ist. Das Diagramm, das wir später erstellen werden, ersetzt die in diesem Div enthaltene Tabelle. Die Tabelle sieht im Moment etwas hässlich aus, also fügen wir CSS hinzu, um sie besser präsentierbar zu machen.
Du solltest etwas haben, das so aussieht.
Nun, da wir alle Daten in einer Tabelle haben, können wir das JavaScript hinzufügen, das ein Diagramm für uns erstellt. Technisch müssen wir keinen Tisch haben, aber aus zwei Gründen ist es schön, dies zu haben:
Verknüpfen Sie die erforderlichen JavaScript-Bibliotheken. Es gibt zwei davon und einen weiteren für die IE-Unterstützung. Wir müssen zuerst jQuery und dann die Flot-Bibliothek verlinken, da dies von jQuery abhängt. Da Flot das Canvas-Element zum Zeichnen der Diagramme verwendet, müssen Sie das ExplorerCanvas-Skript einschließen, das das Canvas-Element im IE emuliert. Firefox-, Opera- und Safari-Benutzer benötigen dies nicht. Daher verwenden wir bedingte Kommentare, um sicherzustellen, dass nur IE-Benutzer es herunterladen.
Das Erstellen eines Diagramms mit Flot ist recht einfach, da viele Optionen sinnvolle Standardwerte haben. Dies bedeutet, dass Sie mit minimalem Aufwand ein gut aussehendes Diagramm erstellen können, das Sie jedoch auch nach Ihren Wünschen anpassen können. Um ein einfaches Diagramm zu erstellen, müssen Sie ein Containerelement und die Daten angeben, die grafisch dargestellt werden sollen. Das Containerelement muss außerdem eine bestimmte Breite und Höhe haben. Daher verwenden wir jQuery, um den Plotbereich div so einzustellen, dass er eine Breite von 500 Pixeln und eine Höhe von 250 Pixeln hat.
Der erste Parameter ist ein jQuery-Objekt des Containerelements. Das zweite Element ist ein dreidimensionales Array, bei dem die ersten untergeordneten Arrays Datensätze sind und die "Enkel" Arrays geordnete Paare sind, die einen X- und Y-Wert für eine kartesische Ebene angeben. Lassen Sie uns zuerst die BIP-Daten für die USA darstellen.
Die Datentabelle, die wir zuvor hatten, sollte durch ein Diagramm mit einem schönen Look ersetzt werden. Wie Sie sehen, ist das Array, das die Datenmenge enthält, in einem anderen übergeordneten Array enthalten. Um ein anderes Dataset grafisch darzustellen, fügen wir es als übergeordnetes Element zum übergeordneten Array hinzu. Fügen wir die Daten für die anderen Länder hinzu, die wir in unserer Tabelle hatten.
var data = [[[2003, 10882], [2002, 10383], [2001, 10020], [2000, 9762], [1999, 9213], [1998, 8720]], [[2003, 10970], [ 2002, 9040], [2001, 8303], [2000, 8234], [1999, 8901], [1998, 8889]], [[2003, 1795], [2002, 1564], [2001, 1430], [ 2000, 1438], [1999, 1460], [1998, 1423]], [[2003, 1575], [2002, 1434], [2001, 1345], [2000, 1252], [1999, 1158], [ 1998, 1148], [[2003, 599], [2002, 510], [2001, 479], [2000, 457], [1999, 447], [1998, 414]]];
Wir haben jetzt ein ziemlich gut aussehendes Diagramm, aber wir wissen nicht, welche Linie welches Land ist! Was wir brauchen, ist eine Legende. Glücklicherweise unterstützt Flot dies, indem es unsere Datensätze in ein JSON-Objekt stellt und ein Beschriftungselement hinzufügt.
var data = [label: "USA", Daten: [[2003, 10882], [2002, 10383], [2001, 10020], [2000, 9762], [1999, 9213], [1998, 8720]] , label: "EU", Daten: [2003, 10970], [2002, 9040], [2001, 8303], [2000, 8234], [1999, 8901], [1998, 8889]] label: "UK", Daten: [2003, 1795], [2002, 1564], [2001, 1430], [2000, 1438], [1999, 1460], [1998, 1423]], label : "China", Daten: [[2003, 1575], [2002, 1434], [2001, 1345], [2000, 1252], [1999, 1158], [1998, 1148]], label: " Indien ", Daten: [[2003, 599], [2002, 510], [2001, 479], [2000, 457], [1999, 447], [1998, 414]]];
Ich habe bereits erwähnt, dass Flot viele vernünftige Standardwerte hat. Während sie wahrscheinlich für die meisten Menschen in Ordnung sind, verdeckt die Legende einige Daten teilweise. Flot hat einen dritten Parameter zum Übergeben von Optionen in ein JSON-Objekt.
$ .plot (Plotbereich, Daten, Optionen);
Um die Daten am Ende des Diagramms etwas sichtbar zu machen, passen wir die Hintergrunddeckkraft und die Ränder der Legende an.
var options = legend: show: true, margin: 10, backgroundOpacity: 0.5;
Einige Leute (wie ich) möchten gerne genau sehen, wo sich die Datenpunkte befinden. Legen Sie in den Optionen fest, dass jeder Punkt mit einem Kreis mit einem angegebenen Radius markiert werden soll.
var options = legend: show: true, margin: 10, backgroundOpacity: 0,5, Punkte: show: true, radius: 3;
Toll, wir haben Datenpunkte, aber wohin sind die Linien gegangen ?! Lassen Sie uns sie explizit wieder einschalten.
var options = legend: show: true, margin: 10, backgroundOpacity: 0,5, Punkte: show: true, Radius: 3, Zeilen: show: true;
Unser endgültiger Code sieht ungefähr so aus:
Flot-Tutorial
BIP basierend auf Wechselkursen im Zeitablauf. Werte in Milliarden USD. 2003 2002 2001 2000 1999 1998 Vereinigte Staaten von Amerika 10.882 10.383 10.020 9,762 9.213 8.720 EU 10.970 9.040 8,303 8.234 8.901 8.889 Vereinigtes Königreich 1,765 1,564 1.430 1,438 1,460 1.423 China 1,575 1,434 1,345 1,252 1,158 1,148 Indien 599 510 479 457 447 414 BIP basierend auf Wechselkursen im Zeitablauf. Werte in Milliarden USD.
Es gibt viele Möglichkeiten mit Flot. Die Flot-API enthält alle verschiedenen Optionen, die zum Optimieren der Diagramme verfügbar sind, einschließlich der Angabe verschiedener Diagrammtypen, -farben, -achsen und sogar der Aktivierung interaktiver Funktionen wie Auswahl und Zoomen. Eine andere Möglichkeit besteht darin, das Ganze vollständig zu dynamisieren und den JavaScript-Code dynamisch mit Daten aus einer Datenbank mithilfe von PHP zu generieren.
Accentsconagua