Statistische Diagramme mit numerischen Informationen spielen auf Internetseiten eine wichtige Rolle. Neben der Grundfunktion der Darstellung von Zahlen legen die Menschen immer mehr Wert auf die Schönheit und Interaktivität dieser Diagramme. Infolgedessen stehen Programmierer vor immer größeren Herausforderungen. Der Prozess, den sich die meisten Menschen vorstellen, indem er Zeichensoftware verwendet, um Bilder zu erstellen und sie dann auf Webseiten zu platzieren, ist zwar schön anzusehen, lässt sich aber nicht einfach ändern , rein statisch, und Nachteile wie die fehlende Möglichkeit zur Aktualisierung in Echtzeit geben den Ton an und sind nicht im großen Maßstab einsetzbar! Heutzutage gibt es viele verschiedene Netzwerkprogrammiersprachen wie ASP, PHP, .net ... Die meisten von ihnen verfügen über Skript-Zeichenfunktionen, aber die Funktionen sind recht einfach. Sie müssen ein Diagramm nach dem anderen zeichnen und Koordinaten berechnen und andere Informationen. Wenn Sie möchten, dass es schön ist, ist es etwas schwierig ... Die Jpgraph-Klassenbibliothek in PHP ist eine bessere Tabelle, aber ihre dynamische Schönheit ist immer noch dürftig ...
Die Geburt von JQuery hat das dynamische Interaktionsdesign von Webseiten beleuchtet. Viele aufstrebende Websites für junge Modekonzerne haben die JQuery-Technologie übernommen. Die offensichtlichsten sind die Beschleunigungs-, Ein- und Ausblendeffekte verschiedener Module im Web Seite. Die Entwicklung der Technologie hat auch die Anzeigeform von Web-Statistikdiagrammen stark weiterentwickelt. Im Folgenden wird eine der relativ einfachen, aber auch praktischen Javascript-Bibliotheken vorgestellt: Highcharts (statistische Diagramme) und Highstock (Anzeige von Zeitreihendaten). Sie sind in reinem JavaScript geschrieben und können einfach und bequem interaktive Diagramme zu Websites oder Webanwendungen hinzufügen. Sie benötigen keine Plug-Ins, um schnell ausgeführt zu werden, und können eine adaptive Größe erreichen kann die meisten aktuellen Browser perfekt unterstützen, einschließlich IE6, was vielen Front-End-Ingenieuren Kopfschmerzen bereitet. . Und es ist für das persönliche Studium, die persönliche Website und die nichtkommerzielle Nutzung kostenlos. Zu den derzeit von HighCharts unterstützten Diagrammtypen gehören Kurvendiagramme, Flächendiagramme, Balkendiagramme, Kreisdiagramme, Streudiagramme und umfassende Diagramme. Highstock wird hauptsächlich zur Anzeige von Zeitreihendaten verwendet.
Zu den Hauptfunktionen von HighCharts gehören:
1. Kompatibilität: HighCharts ist in reinem JavaScript geschrieben und mit den meisten heutigen Browsern kompatibel, einschließlich iPhone, IE, Firefox usw.;
2. Viele Diagrammtypen: HighCharts unterstützt jetzt eine Vielzahl von Diagrammtypen, darunter Kurvendiagramme, Flächendiagramme, Balkendiagramme, Kreisdiagramme, Streudiagramme, umfassende Diagramme usw., um verschiedenen Anforderungen gerecht zu werden.
3. Keine Sprachbeschränkung: HighCharts kann in den meisten WEB-Entwicklungen verwendet werden und ist für einzelne Benutzer kostenlos. Es unterstützt die Verwendung in mehreren Sprachen wie ASP, PHP, JAVA, .NET usw.
4. Eingabeaufforderungsfunktion: In dem von HighCharts generierten Diagramm können Sie den Eingabeaufforderungseffekt festlegen, der auf dem Datenpunkt angezeigt werden soll, dh wenn Sie die Maus auf einen bestimmten Datenpunkt bewegen, können die detaillierten Daten des Punkts angezeigt werden Anzeigeeffekt eingestellt werden.
5. Vergrößerungsfunktion: HighCharts kann eine große Datenmenge zentral anzeigen und einen bestimmten Teil des Diagramms vergrößern, um die Genauigkeit des Diagramms zu erhöhen und es im Detail anzuzeigen. Sie können wählen, ob Sie horizontal oder vertikal vergrößern möchten.
6. Zeitleiste: Sie kann auf Millisekunden genau sein.
Diagrammbeispiel:
Alle Diagrammbeispiele finden Sie in der offiziellen Demo: http://www.highcharts.com/demo/ http://www.highcharts.com/stock/demo/
Es ist sehr praktisch, diese beiden Arten von JS-Bibliotheksdiagrammen gemäß der offiziellen Vorlage aufzurufen. Fügen Sie den erforderlichen JS-Code und die referenzierten JS-Dateien in die Seite ein und verwenden Sie den eindeutigen ID-Wert im Bereich der div-Ebene, in den das Diagramm eingefügt wird.
Textänderungen in Diagrammen:
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}Änderungen an Datenquellen in Diagrammen lassen sich grob in drei Situationen einteilen:
1. Am einfachsten ist es, die Textersetzung direkt auf der Seite zu verwenden
series: [{
name: 'USA',
data: [null, null, null, null, null, 6 , 11, 32, 110, 235, 369, 640,
1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 ]
}, {
name: 'USSR/Russia',
data: [null, null, null, null, null, null, null , null , null ,null,
5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
21000, 20000, 19000, 18000, 18000, 17000, 16000]
}]2. Rufen Sie eine Textdatei in einem bestimmten Format auf:
jQuery.get('analytics.tsv', null, function(tsv, state, xhr)Nehmen Sie dies als Beispiel. Öffnen Sie die Datei „analytics.tsv“ mit einer Textbearbeitungssoftware. Generieren Sie einfach neue Daten und ersetzen Sie sie entsprechend der ursprünglichen Struktur.
3. In Highstock-Zeitreihendiagrammen wird hauptsächlich der Remote-Dateiaufruf verwendet:
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function(data)Sie können auch die Beispieldatei http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=? öffnen.
?([ [Date.UTC(2003,8,24),0.8709], [Date.UTC(2003,8,25),0.872], [Date.UTC(2003,8,26),0.8714], [Date.UTC(2003,8,29),0.8638], [Date.UTC(2003,8,30),0.8567], [Date.UTC(2003,9,1),0.8536], [Date.UTC(2003,9,2),0.8564], [Date.UTC(2003,9,3),0.8639], [Date.UTC(2003,9,6),0.8538], [Date.UTC(2003,9,7),0.8489], [Date.UTC(2003,9,8),0.8459], [Date.UTC(2003,9,9),0.8521], [Date.UTC(2003,9,10),0.8477], …………
Nachahmung durch Struktur.
Für diejenigen, die über eine gute Javascript-Grundlage verfügen, sind diese nicht auf die vorgegebene Datenaufrufmethode beschränkt und können flexibel angepasst werden. Achten Sie für Anfänger einfach auf das Strukturformat der Datendatei und die speziellen Markierungen am Anfang und Ende der Datei. Wenn die Markierungen verloren gehen, werden die Daten möglicherweise nicht gelesen Diagramme können nicht angezeigt werden.
Durch die Verwendung von Datenquellen können Skriptsprachen wie PHP vollständig zum Lesen aus der Datenbank verwendet werden, um Echtzeitaktualisierungen zu erreichen. Gleichzeitig können bei komplexeren Display-Projekten auch Multi-Modul-Kombinationen genutzt werden, um eine Webseite zu einem Display-System zusammenzufassen.