Ein Tutorial zu Drilldown-FusionCharts in jQuery

Veröffentlicht: 2022-03-11

Die Visualisierung von Daten erleichtert das Lesen

Bei der Datenanalyse setzen die meisten Unternehmen auf MS Excel oder Google Sheets. Obwohl dies leistungsstarke Tools sind, ist es schwierig, Trends zu erkennen, geschweige denn, aus großen Reihen von Tabellendaten einen Sinn zu machen. Der Umgang mit Daten, die auf diese Weise präsentiert werden, ist nicht sehr interessant, aber sobald Sie diesen Daten eine Visualisierung hinzufügen, werden die Dinge einfacher zu verwalten, und das ist das Thema des heutigen Tutorials – das Erstellen interaktiver Diagramme mit jQuery.

Der Umgang mit Tabellendaten ist langweilig.

Es ist schwierig, Trends aus Reihen von Tabellenkalkulationsdaten zu erkennen, aber sobald Sie eine Visualisierung hinzugefügt haben ...

Twittern

Ich werde die JavaScript-Diagrammbibliothek von FusionCharts für dieses Projekt verwenden, da sie eine große Bibliothek mit über 90 Diagrammen bietet, mit jedem Browser kompatibel und ziemlich einfach zu handhaben ist. Es bietet auch ein dediziertes Plugin für jQuery, das unsere Arbeit erleichtert.

Ich beginne mit der Erstellung eines einfachen Diagramms mit der Kern-JavaScript-Bibliothek von FusionCharts und dem jQuery-Diagramm-Plug-In und füge dann die Drilldown-Funktion hinzu. Drilldown ermöglicht es Ihnen, von einem Diagramm zum anderen zu wechseln, indem Sie auf eine Datenzeichnung klicken.

Der Begriff „Datenplot“ ist kontextabhängig; es bezieht sich auf eine Säule in einem Säulendiagramm, Linien in einem Liniendiagramm, Tortenstücke in einem Tortendiagramm. Durch Klicken auf eine Datenzeichnung aus dem übergeordneten Diagramm wird Ihnen ein untergeordnetes Diagramm angezeigt, das die relativen Daten eine Ebene tiefer anzeigt.

Durch Klicken auf eine Datenzeichnung im übergeordneten Diagramm wird ein untergeordnetes Diagramm angezeigt.

FusionCharts verstehen

Bevor wir mit dem Tutorial beginnen, wollen wir uns mit der grundlegenden Anatomie von FusionCharts befassen. Jedes Diagramm besteht aus diesen Schlüsselelementen:

Beschriftung: Der Titel auf dem Diagramm. Es erklärt, was kartiert wird.
Untertitel: Der Text unter dem Untertitel, der zusätzliche Diagramminformationen angibt, gibt oft einen Zeitrahmen an, aus dem die Daten gesammelt wurden.
Legende: Dies zeigt ein Symbol für jede Datenzeichnung im Diagramm an. Ein bestimmter Plot kann aktiviert oder deaktiviert werden, indem Sie auf das entsprechende Legendensymbol klicken.
Datendiagramm: Dies sind Datendarstellungen im Diagramm. Ein Datendiagramm kann eine Säule in einem Säulendiagramm, Linien in einem Liniendiagramm oder Kreissegmente in einem Kreisdiagramm sein.
QuickInfo: Text, der angezeigt wird, wenn Sie den Mauszeiger über eine Datenzeichnung bewegen, um zusätzliche Informationen zu dieser bestimmten Datenzeichnung zu übermitteln.

Erstellen eines Drilldown-Diagramms

Bevor wir beginnen, ist hier ein Screenshot des Diagramms, das wir in diesem Tutorial erstellen werden. Sie können das JSFiddle hier sehen oder auf den vollständigen Quellcode des Projekts in meinem GitHub-Repo zugreifen.

Eine Vorschau auf das letzte jquery-Projekt dieses Tutorials.

Ich habe den Prozess der Erstellung eines Drilldown-Diagramms in fünf Schritte unterteilt, also fangen wir an.

Schritt 1: Einbinden von JavaScript-Dateien und Erstellen des Chart-Containers

Zuerst müssen wir alle JS-Dateien einschließen, von denen unser Projekt abhängig ist, indem wir das Tag <script> verwenden. Wenn die Seite noch nicht existiert, erstellen Sie bitte ein leeres HTML-Dokument und fügen Sie die folgenden Dateien in den Abschnitt <head> ein. Nun benötigen wir die folgenden vier Dateien:

Minimierte jQuery
JS-Hauptbibliothek von FusionCharts (enthält sowohl fusioncharts.js als fusioncharts.charts.js )
jQuery-Plugin von FusionCharts

Unser Abschnitt <head> sieht nun so aus:

 <!-- jQuery --> <script type="text/javascript" src="jquery.min.js"></script> <!-- FusionCharts JS file --> <script type="text/javascript" src="js/fusioncharts.js"></script> <script type="text/javascript" src="js/fusioncharts.charts.js"></script> <!-- jQuery charts plugin --> <script type="text/javascript" src="js/jquery-plugin.js"></script> <!-- custom theme file (optional) --> <script type="text/javascript" src="js/toptal.js"></script>

Nachdem wir nun alle Abhängigkeiten eingeschlossen haben, ist es an der Zeit, den Container <div> für das Diagramm zu erstellen und ihn mit dem folgenden HTML-Code in unsere Seite einzubetten:

 <div>drill-down chart will load here</div>

Jetzt können wir es mit dem $ -Selektor von jQuery im Code auswählen:

 $("#drill-down-chart")

Hinweis: Wenn Sie mehr als ein Diagramm auf Ihrer Seite haben, benötigen Sie für jedes Diagramm einen separaten Container mit einer eindeutigen id .

Die Visualisierung von Daten erleichtert das Lesen.

Schritt 2: Daten beschaffen und strukturieren

FusionCharts akzeptiert Daten sowohl im JSON- als auch im XML-Format, aber ich habe mich für die Verwendung von JSON entschieden, da es zum Standardformat für den Datenaustausch zwischen Web-Apps geworden ist. Das JSON-Datenarray für ein einfaches Diagramm enthält ein Objekt für jede Datenzeichnung, und innerhalb jedes Datenzeichnungsobjekts definieren wir seine jeweilige Bezeichnung und seinen Wert. Diese Struktur sieht so aus:

 "data": [{ "label": "Q1", "value": "850000", }, { "label": "Q2", "value": "2070000", },... // more data objects ]

Während wir unser Drilldown-Diagramm zeichnen, wird sein JSON komplexer. Die Verknüpfung zwischen übergeordneten und untergeordneten Diagrammen erfordert ein weiteres key - value -Paar in jedem Objekt des Datenarrays. Der neue Schlüssel (wenig überraschend link genannt) enthält die ID des untergeordneten Diagramms, das Sie erhalten, wenn auf die übergeordnete Datenzeichnung geklickt wird. Das Format zum Definieren der untergeordneten Diagramm- id ist newchart-dataFormat-childId . Da wir JSON verwenden, wissen wir, dass alles, was wir verknüpfen, wie newchart-json-childId . So definieren wir es für unser Diagramm:

 "data": [{ "label": "Q1", "value": "850000", "link": "newchart-json-q1" }, { "label": "Q2", "value": "2070000", "link": "newchart-json-q2" }, ... // more data objects]

Schritt 3: Diagrammdaten einfügen

Sobald Sie die Daten bereit haben, ist es an der Zeit, das Diagramm mithilfe der vom jQuery-Plug-in bereitgestellten insertFusionCharts Methode in Ihre Seite einzufügen:

 $("#drill-down-chart").insertFusionCharts({ type: 'column2d', id: "mychart", width: '100%', height: '450', dataFormat: 'json', dataSource: { "chart": { "caption": "Quarterly Revenue for 2015", "paletteColors": "#9EA5FC", "xAxisName": "Quarter (Click to drill down)", "yAxisName": "Revenue (In USD)", // more chart configuration options }, "data": [ // see step-2 for explanation ], "linkedData": [ // explained in step-4 ] } })

Lassen Sie uns das obige Code-Snippet aufschlüsseln:

type definiert den Typ des übergeordneten Diagramms, das wir zeichnen. In diesem Fall column2d . Jedes Diagramm in der FusionCharts-Bibliothek hat einen eindeutigen Alias. Sie finden den Alias für das Diagramm, das Sie zeichnen möchten, auf der Seite mit der Diagrammliste von FusionCharts.
id setzt die eindeutige ID für das Diagramm, nicht zu verwechseln mit der ID des <div> -Elements, das unser Diagramm enthält. Die id eines Diagramms wird verwendet, um ein Diagramm zum Anwenden von Ereignishandlern und Aufrufen von Methoden auszuwählen. Davon machen wir in Schritt 5 Gebrauch.
width und height legen die Größe des Diagramms in Pixel oder Prozent fest. 100 % Breite weist das Diagramm an, die volle Containerbreite einzunehmen.
Wir definieren das Datenformat mit dem Attribut dataFormat . Wir verwenden für unser Beispiel JSON, aber es gibt auch andere akzeptable Datenformate, wie z. B. eine XML-URL. Weitere Informationen zu Datenformaten finden Sie auf der offiziellen Dokumentationsseite von FusionCharts.
dataSource enthält den eigentlichen Inhalt des chart , und das darin enthaltene Diagrammobjekt enthält die Konfigurationsoptionen des Diagramms, z. B. Beschriftung und Untertitel. Das data sollte Ihnen bekannt vorkommen, da wir es in Schritt 2 erstellt haben (es enthält die zu zeichnenden Daten) und linkedData den Inhalt für das untergeordnete Diagramm enthält (das Diagramm, das Sie erhalten, nachdem Sie auf eine Datenzeichnung im übergeordneten Diagramm geklickt haben).

Verwandte Themen: Stellen Sie die besten 3 % der freiberuflichen Big-Data-Architekten ein.

Schritt 4: Erstellen des verknüpften Datenarrays für untergeordnete Diagramme

Nachdem wir nun das übergeordnete Diagramm definiert haben, ist es an der Zeit, ein untergeordnetes Diagramm für jede Datenzeichnung zu erstellen, ein Vorgang, der dem Erstellen des übergeordneten Diagramms sehr ähnlich ist. Das in der Methode „insertFusionCharts“ erstellte linkedData -Array definiert ein separates Objekt für jedes untergeordnete Diagramm. So sehen die Daten für das erste untergeordnete Diagramm aus:

 "linkeddata": [{ "id": "q1", "linkedchart": { "chart": { "caption": "Monthly Revenue", "subcaption": "First Quarter", "paletteColors": "#EEDA54, #A2A5FC, #41CBE3", "labelFontSize": "16", // more configuration options }, "data": [{ "label": "Jan", "value": "255000" }, { "label": "Feb", "value": "467500" }, //more data] } }, //content for more child charts

id ist die ID des einzelnen untergeordneten Diagramms, das wir in Schritt 2 definiert haben. linkedChart ähnelt dataSource aus Schritt 3, da es den tatsächlichen Inhalt dieses Diagramms enthält. Es gibt zahlreiche andere Attribute, die in das Diagrammobjekt einfließen, die ich ausführlich im späteren Abschnitt „Verbesserung des Designs mit Diagrammattributen“ behandle.

Schritt 5: Benutzerdefinierte Drilldown-Konfiguration

Verschiedene Diagrammtypen

Bisher haben in unserem Beispielcode sowohl das übergeordnete als auch das untergeordnete Diagramm den gleichen Diagrammtyp. Wenn Sie einen Drilldown zu einem anderen Diagrammtyp ausführen möchten (z. B. von Spalte zu Torte), tun Sie dies, indem Sie das fusionchartsrendered Ereignis binden.

 $('#drill-down-chart').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", overlayButton: { message: 'BACK', // Set the button to show diff message bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

Im obigen Code ruft das Ereignis fusionchartsrendered die Methode configureLink auf, die den Typ aller untergeordneten Diagramme sowie alle Overlay-Schaltflächenoptionen definiert. Sie können auch separate Diagrammtypen für jedes untergeordnete Diagramm angeben. In der configureLink -Methode sind viele Optionen verfügbar, sodass Sie es möglicherweise nützlich finden, die API-Referenzdokumentation von FusionCharts zu lesen.

Rendern von Diagrammen in verschiedenen Divs

Eine weitere coole Sache, die Sie tun können, ist das Rendern des untergeordneten Diagramms in einem anderen Container und nicht in demselben wie das übergeordnete Diagramm. Definieren Sie dazu einen separaten HTML- <div> -Container nach dem übergeordneten Chart-Container und übergeben Sie seine ID wie unten gezeigt an das renderAt Attribut:

 $('#chart-container').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", renderAt:"chart-container2", overlayButton: { message: 'BACK', // Set the button to show diff messafe bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

Der dem Attribut renderAt gegebene Wert gibt die ID des <div> an, in dem das untergeordnete Diagramm gerendert wird ( chart-container2 ).

Verbessern des Designs mit Diagrammattributen

Nach diesem Tutorial erhalten Sie ein Funktionsdiagramm, aber es wird etwas hässlich, wenn Sie es dabei belassen. Für eine ansprechendere Präsentation müssen Sie kosmetische „Diagrammattribute“ verwenden. Diagrammattribute werden innerhalb des chart definiert und zum Anpassen von Wiedergabeoptionen verwendet. Möglicherweise finden Sie es hilfreich, sich auf die erklärende Grafik von FusionCharts zu beziehen, wenn Sie diese wichtigsten konfigurierbaren Attribute überprüfen:

paletteColors definiert die Farbe der Datendiagramme. Wenn Sie hier eine einzige Farbe angeben, haben alle Spalten diese Farbe. Wenn Sie mehrere Farben angeben, nimmt die erste Spalte den ersten Wert, die zweite Spalte den zweiten Wert und so weiter.
plotSpacePercent steuert den Abstand zwischen den Spalten. Der Standardwert dafür ist 20 (der Wert ist ein Int, aber die Einheit ist ein Prozentsatz) und der zulässige Bereich ist 0-80. Ein Wert von 0 bewirkt, dass sich die Spalten bündeln und aneinander haften.
baseFont definiert die Schriftfamilie des Diagramms. Sie können jede beliebige Schriftart verwenden; Ich habe Googles Open Sans in meinem Diagramm verwendet. Binden Sie die externe Schriftdatei einfach in Ihre HTML-Seite ein, um sie in Ihrem Diagramm zu verwenden.
plotToolText können Sie die QuickInfos anpassen. Durch die Verwendung von Makros wie $label und * $dataValue können Sie spezifische Informationen zu einem bestimmten Datenplot innerhalb eines <div> anzeigen und dieses <div> dann mit Inline-CSS formatieren. Folgendes habe ich in unserem Beispiel getan:

 "plotToolText": "<div>$label: $dataValue</div>"

theme ermöglicht es Ihnen, Ihre Diagrammattribute in einer anderen Datei zu definieren und sie hier einmal anzuwenden, anstatt Ihr Diagrammobjekt mit zahlreichen Diagrammattributen zu überladen. Sie finden die Designdatei für dieses Tutorial – toptal.js – im JS-Ordner des GitHub-Repos des Projekts.

Das ist alles, was ich behandeln werde, aber es gibt mehr als hundert Attribute für ein Diagramm. Wenn Sie also weiter nachforschen möchten, besuchen Sie bitte die Seite mit den Diagrammattributen von FusionCharts und suchen Sie nach Ihrem speziellen Diagrammtyp.

Weitere FusionCharts- und jQuery-Ressourcen

Obwohl ich die wichtigsten Elemente zum Erstellen eines Drilldown-Diagramms mit jQuery behandelt habe, besteht eine gute Chance, dass Sie etwas Hilfe benötigen, wenn Sie versuchen, es selbst zu tun. Für diesen Moment sind hier einige zusätzliche Ressourcen:

jQuery-Diagramm-Plugin: Besuchen Sie zur Inspiration die offizielle jQuery-Diagramm-Plugin-Seite, um einige Live-Beispiele zu sehen.
Dokumentation: Wenn Sie etwas nicht herausfinden können, ist die Dokumentation der erste Ort, an dem Sie nachsehen sollten. Hier sind praktische Links für das jQuery-Plugin und das Drilldown-Diagramm (auch bekannt als verknüpfte Diagramme).
Demos: Jede Diagrammbibliothek bietet Live-Beispiele, um ihre Fähigkeiten zu demonstrieren, und FusionCharts ist nicht anders. Besuchen Sie die Demo-Galerie mit mehr als 800 Live-Beispielen, mit vollständigem Quellcode, wenn Sie Ideen brauchen. Es besteht eine gute Chance, dass alles, was Sie zu machen versuchen, bereits verfügbar ist. Sie müssen nicht bei Null anfangen; Gabeln Sie einfach die Geige und fahren Sie von dort fort!
Weitere Erweiterungen: Wenn Sie kein Vanilla-JavaScript oder jQuery verwenden, können Sie auf dieser Seite weitere von FusionCharts angebotene Plugins und Wrapper erkunden. Sie haben dedizierte Plugins für eine Vielzahl von Bibliotheken und Frameworks wie Angular, React, Java, ASP.NET usw.

PS: Ich werde mich unten in den Kommentaren aufhalten, also zögern Sie nicht, Fragen zu meinem Artikel zu posten. Ich helfe gerne!

Siehe auch: Data Mining für die prädiktive Analyse sozialer Netzwerke