Jump to content

Erweiterung:Graph

Issue-Tracker: #Graphs
From mediawiki.org
This page is a translated version of the page Extension:Graph and the translation is 98% complete.
Outdated translations are marked like this.
Languages:
MediaWiki-Erweiterungen
Graph
Freigabestatus: ohne Wartung
Einbindung Tag , ContentHandler
Beschreibung Datenvisualisierung
Autor(en)
MediaWiki >= 1.43
Lizenz MIT-Lizenz
Herunterladen
Erweiterung herunterladen
Git [?]:
Parameter
  • $wgGraphDefaultVegaVer
  • $wgGraphAllowHttp
  • $wgGraphAllowedDomains
Verwendete Hooks
Quarterly downloads 32 (Ranked 108th)
Public wikis using 884 (Ranked 281st)
Übersetze die Graph-Erweiterung, wenn sie auf translatewiki.net verfügbar ist
Probleme Offene Aufgaben · Einen Fehler melden

Mit der Graph-Erweiterung kann ein ‎<graph>-Tag Datenvisualisierungen wie Balken- oder Tortendiagramme sowie Zeitleisten und Histogramme (demo) in einem JSON-Format beschreiben, welches ein Vega-basiertes Diagramm wiedergibt.

Allgemeine Information

Die Graph Erweiterung ermöglicht es, Vega-basierte Graphen zu Wiki-Seiten hinzugefügt zu werden. Graphen können interaktiv sein.

Die einfachste Möglichkeit, einen Graphen hinzuzufügen, ist eine bereitgestellte Vorlage, wie beispielsweise {{Graph:Chart}} zu nutzen. Diese Vorlagen verstecken alle Vega-Komplexitäten. Power-Nutzer können die Graph Sandbox benutzen, um Graphen zu entwickeln. Die Graph Sandbox gestattet Wiki-Vorlagen-Syntax sowie JSON. Durch die integration der Erweiterung mit VisualEditor wird ein simples Tool bereitgestellt, welches simple Graphen durch Eingabe der Werte direkt im Editor generiert.

  • Vega 2-Dokumentation – Vega 2 Dokumentationsseiten auf nyurik/vega/wiki wiederhergestellt.
  • Guide - Allgemeine Empfehlungen zur Nutzung von Graphen im Wiki
  • Interactive Tutorial - Schritt-für-Schritt-Anleitung zur Gestaltung eines interaktiven Graphen
  • Demo page - Für viele Beispiele und Nutzungstricks.
  • TechTalk Video - eine Diskussion bei einem WMF Tech-Talk über die Graph Erweiterung, inklusive einer großartigen Demonstration des Lyra editor (zusätchlich on labs installiert).
  • Möglicherweise fänden Sie folgende Informationen über einige der Vega future capabilities nützlich (Schlüsselpunkt von Jeffrey Heer).
  • Vega for devs - Der bester Ort für alle Vega-Ressourcen

Installation

  • Benötigt die Erweiterung JsonConfig
  • Die Erweiterung herunterladen und die Datei(en) in ein Verzeichnis namens Graph im Ordner extensions/ ablegen.
    Entwickler und Code-Beitragende sollten stattdessen die Erweiterung von Git installieren, mit:cd extensions/
    git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/Graph
  • Folgenden Code am Ende deiner LocalSettings.php -Datei einfügen: 
    wfLoadExtension( 'Graph' );
  • Yes Erledigt – Navigiere zu Special:Version in deinem Wiki, um zu überprüfen, ob die Erweiterung erfolgreich installiert wurde.


Vagrant-Installation:

  • Wird Vagrant benutzt, ist mit vagrant roles enable graph --provision zu installieren

Zusätzliche Konfigurationseinstellungen

Falls Sie eine Produktionsumgebung wie de.wiki replizieren möchten, müssen sie folgenden Schritten folgen:

Debuggen von Graphen und Übersetzen von Graphen von Vega 2 nach Vega 5

Eine Sandbox, ähnlich dem Vega graph editor in der Funktionsweise, wird bei Special:GraphSandbox bereitgestellt. Das MediaWiki-Tool enthält Kompatibilitätscode der ältere Vega-Schemata auf die zurzeit Aktivierte Version abbildet. Das Einfügen eines alten Schemas im Haupttextbereich gibt ein modifiziertes und modernisiertes Schema unterhalb des Graphen überall wo möglich wieder.

Ähnlich wie bei vega.github.io/editor, ist es möglich das Vega-Objekt über die VEGA_DEBUG JavaScript-Globale zu inspizieren. Besuchen Sie Vega's Debugging-Anweisung für weitere Nutzungsinformationen.

Migrieren von Schemata von älteren Vega-Versionen

Früher unterstützte die Graph Erweiterung Vega 2. Sie können den JSON-Code Ihrer Graphen in http://vega.github.io/vega-editor/?mode=vega einfügen, um zu sehen wie sie früher gerendert wurden, im Vergleich mit Vega 5.

Special:GraphSandbox (für den neuesten Code, siehe die Beta-Cluster Version der Sandbox) kann benutzt werden um alte Schemata auf neue abzubilden. Kopieren Sie das alte Schema in den Haupttextbereich und das überarbeitete Schema wird im Textbereich unterhalb des Graphen erscheinen. Kopieren Sie das neue Schema in Ihren Code.

Graphenbeispiele

Siehe Demo page für viele Beispiele und Nutzungstricks.


Nutzerdefinierter Fallback

Wenn client-side Rendering genutzt wird, ist es möglich, Wikimedia Commons zu nutzen um ein statisches Fallback-Bild den noscript-Nutzern zu bieten. Dies ist eine temporäre Lösung bis ein neuer Service aufgesetzt wird um server-side Rendering zu ermöglichen.

Der Nutzer muss zuvor seinen statischen Graphen auf Wikimedia Commons hochladen.

Fallback-Illustrationen haben zwei Variablen, fallback und fallbackWidth.

fallback ist abhängig von einem Wikimedia Commons Dateinamen.

fallbackWidth ist die Breite der Fallback-Illustration in Pixeln.

Diese Variablen passieren den Graphen auf die folgene Art und Weise: 

<graph fallback="Graph test seddon.png" fallbackWidth=450>

Wo Lua-Module wie Module:Graph genutzt werden, dann können diese Variablen über die Tag-Funktion bereitgestellt werden. Falls Template:Graph:Chart adaptiert würde, sähe es so aus: 

{{safesubst:#tag:graph|{{safesubst:#invoke:Graph|chartWrapper}} | fallback = {{{fallback|''}}} |  fallbackWidth= {{{fallbackWidth|''}}} }}

Es würde dann in einer Vorlage wie folgt genutzt: 

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y
 |type=rect|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9|fallback=Graph test seddon.png|fallbackWidth=450}}

Falls eine fallbackWidth (Fallbackbreite) nicht angegeben wird, aber ein Bild definiert ist, extrahiert die Erweiterung die Breite aus der angegeben Graphenbreite. Der Grund hierfür ist, dass es oft einen Unterschied in der Breite des gerenderten Bildes und der Breite des tatsächlichen Bildes gibt. 

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y
 |type=rect|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9|fallback=Graph test seddon.png}}


Externe Daten

Das HTTP(S)-Protokoll kann nicht genutzt werden um Daten für den Graphen einzuholen. Stattdessen, nutzen Sie eines der benutzerdefinierten Wiki-Protokolle wie wikiraw:, wikiapi: und andere.

Die Graph Erweiterung nutzt die Einstellung GraphAllowedDomains um zu kontrollieren wie diese Protokolle aufgelöst werden: Da Abfragen auf der Struktur von Wikibase-Artikeln basieren, können sie möglicherweise plötzlich aufhören zu funktionieren, falls die darunterliegenden Daten bearbeitet und verändert werden, da diese nun unvollständige, leere oder ungültige Daten, die nicht zur Erstellung eines Graphen geeignet sind, zurückgeben könnten. In solchen Fällen wird der Graph leer enden. (Siehe phab:T168601). 

$wgGraphAllowedDomains = [
    # Http + Https Schlüssel listet alle der für externen Datenzugriff zugelassenen Domänen auf.
    # Jede hier aufgezählte Domäne qualifiziert automatisch auch alle Unterdomänen.
    # Benutzerdefinierte Protokolle wie 'wikiraw', nutzen Sie es um festzustellen welches Protokoll Sie nutzen sollten.
    # So wird wikiraw://en.wikipedia.org/Page eine API-Anfrage an https://en.wikipedia.org/w/api.php?action=query&titles=Page&...
    'https' => [ 'wikipedia.org', 'wikimedia.org', ... ],
    'http' => [ 'wmflabs.org', ... ],
    
    # Liste der für wikirawupload zugelassenen Domänen: Protokollzugriff.
    # Nur exakte Treffer, keine Unterdomänen.
    'wikirawupload' => [ 'upload.wikimedia.org' ],
    
    # gleich wie wikirawupload, aber für Wikidata Sparql-Abfragen
    'wikidatasparql' => [ 'query.wikidata.org' ],
];

Inneres

Während dem Parsing expandiert alle Parameter/Ausdrücke der Vorlage, und speichert die kompletten Graphdefinitionen in der ParserOutput, für IDs werden Graphhashes verwendet.

Die Graph Erweiterung fügt HTML der Seite bei, auf der Graphen erscheinen sollen, ein ‎<div> mit einem graph-id als Attribut. Beispiel: 

<div class="mw-graph" data-graph-id="72edc224f0a10b343c1e84f63dbfc97cac9bc957">
</div>

Die Graph Erweiterung ergänzt zur Seite ein ext.graph ResourceLoader JavaScript-Modul, welches die Vega Library umfängt, und den JSON-Code der Graphdefinitionen in eine JavaScript mediawiki.config Variable namens wgGraphSpecs packt. Sobald der Client dieses Modul geladen hat, ersetzt die Vega JavaScript Library das statische Bild in allen ‎<div>s mit einem HTML canvas und zeichnet auf diesen dann die Graphen ab.

Sicherheitsfeatures

‎<graph> kann konfiguriert werden sodass unbeglaubigte Datenquellen verboten werden (Bsp. erlaubt Wikimedia nur Daten aus den Wikimedia-Seiten).

Lizenz

Die Vega Library wird under einer modified BSD license verbreitet, unter uns akzeptabel zur Nutzung.

“ Dies erscheint eine Kopie der BSD license zu sein, mit kleinen (akzeptablen) Modifikationen. Für uns ist es kein Problem sie zu nutzen, allerdings würden sie idealerweise keine derartigen veränderungen an der Lizenz vornehmen. Es ist besser, wenn man solche Änderungen an seiner Lizenz nicht vornimmt, um Verwirrung (wie hier) über die Sicherheit der Lizenz für Open-Source-Nutzung vorzubeugen. ”

—Stephen LaPorte

Konfiguration

wgGraphAllowedDomains

Siehe den Abschnitt zu externen Daten.

VisualEditor-Modul

Seit Sommer 2015 bringt die Graph Erweiterung auch ein Modul (ext.graph.VisualEditor) mit sich, welches Graphenbearbeitung innerhalb des VisualEditors ermöglicht.

Dieses Modul war ein Resultat eines Google Summer of Code 2015 Projekts. Siehe phab:T89287 für weitere Details.

Dieses Modul ermöglicht es Nutzern Graphen innerhalb des VisualEditors zu sehen, im Gegensatz zu Alien Extension Nodes. Ferner können Nutzer einen Dialog aufrufen um den Typ eines Graphen zu verändern, sowie Daten und Padding. Das User-Interface (UI) bietet eine Möglichkeit die rohen JSON Spezifikationen eines Graphen innerhalb des VEs zu bearbeiten ohne zum klassischen Wikitext-Editor wechseln zu müssen, falls weiter fortgeschrittene Nutzer Einstellungen die nicht von der UI unterstützt werden verändern möchten.

Der erste Schritt dient als Anfang für viele Möglichkeiten mit Graphbearbeitung innerhalb des VisualEditors und es gibt viele Möglichkeiten um das Modul zu verbessern und zu erweitern.

Problembehandlung dysfunktionaler Graphen

Errata mit Graphen werden in der Entwicklerkonsole geloggt.

Fehler: Bad constructor arguments (phab:T277906)

Lösung: Ersetzen SIe filepath:Earthmap1000x500compac.jpg durch filepath:Earthmap1000x500.jpg.

Beispiel.

TypeError: undefined is not an object (evaluating 'datum.firstYear.value')

Lösung: Stellen Sie sicher, dass sie nicht default als null gesetzt haben.

Beispiel.

Siehe auch

Retrieved from "https://www.mediawiki.org/w/index.php?title=Extension:Graph/de&oldid=6783566"