Hilfe:Graph/VisualEditor

aus Wikipedia, der freien Enzyklopädie
Logo
icon Bilder und Medien
icon Vorlage
icon Tabelle
icon Mehr
icon Bilder und Medien
icon Vorlage
icon Tabelle
icon Kommentar
icon Hieroglyphen
icon Notenschrift
icon Deine Unterschrift
icon Galerie
icon Chemische Formel
icon Math-Formel
icon Karte
icon Codeblock
icon Diagramm
icon Einzelnachweisliste
icon Weniger

Diese Seite beschreibt, wie Diagramme mit der Bearbeitungsumgebung VisualEditor in den Seitentext eingefügt oder bearbeitet werden können.[1]

Diagramme einbinden

Das Bearbeitungswerkzeug bietet im Bearbeitungsmodus zu einer Seite einen Menüpunkt Einfügen Elemente einfügen. In dessen Drop-Down-Bereich befindet sich ein Unterpunkt icon Diagramm, der sichtbar wird, wenn du das Menü über die Option icon Mehr weiter ausklappst.

Das Anklicken des Menüpunktes öffnet ein neues Dialogfenster.

i Info: Beachte bitte, dass diese Art der Diagrammerstellung nicht innerhalb des Artikelnamensraums verwendet werden sollte, da sie sehr viel Syntax im Seitenquelltext erzeugt, die diesen bei der Bearbeitung mit dem Quelltexteditor sehr unübersichtlich werden lässt. Verwende für die Einbindung stattdessen geeignete Vorlagen.

Diagrammerstellung

Logo
Allgemeine Einstellung
Abbrechen
Diagramm bearbeiten
Einfügen

VisualEditor icon parameter-ltr-progressive.svg
Allgemein
Diagrammtyp
 Flächendiagramm 0 OOjs UI icon downTriangle.svg
⧼graph-ve-dialog-edit-size-fieldset⧽

400 0 × 200 0 px

⧼graph-ve-dialog-edit-padding-fieldset⧽
Automatische Auffüllung Häkchen
 
 
 
 
VisualEditor icon parameter-ltr.svg Daten
OOjs UI icon code.svg Rohdaten
 
Über die allgemeinen Einstellungen kannst du zunächst den Diagrammtyp auswählen und einstellen welche Abmessungen das Diagramm haben soll. Voreingestellt ist die Auswahl Flächendiagramm in einer Größe von 400 × 200 Pixeln. Zusätzlich gibt es ein Auswahlkästchen, das die Möglichkeit freischaltet einen Randabstand zu definieren, dieser Wert ist mit 30 vorbelegt, wenn das Häkchen entfernt wird.
Abbrechen
Diagramm bearbeiten
Einfügen

VisualEditor icon parameter-ltr-progressive.svg
Allgemein
Diagrammtyp
 Flächendiagramm 0 OOjs UI icon downTriangle.svg
 Balkendiagramm
 Flächendiagramm
 Kurvendiagramm
⧼graph-ve-dialog-edit-size-fieldset⧽

400 0 × 200 0 px

⧼graph-ve-dialog-edit-padding-fieldset⧽
Automatische Auffüllung 0
30
30
30
30
VisualEditor icon parameter-ltr.svg Daten
OOjs UI icon code.svg Rohdaten
 
Bereich für die Dateneingabe
Der Bereich für die Dateneingabe ist eine Tabelle, in der die Werte für die X- und Y-Achse paarweise eingegeben werden können. Diese ist mit einigen Beispielwerten vorbelegt und lässt sich durch zusätzliche Eingabe in die leeren Felder erweitern. Klicken auf die Mülleimersymbole ⧼graph-ve-dialog-edit-table-row-delete⧽ entfernt ein Wertepaar oder eine komplette Zeile.
Abbrechen
Diagramm bearbeiten
Einfügen

VisualEditor icon parameter-ltr.svg
Allgemein
  x   y  
  0   1
OOjs UI icon trash-destructive.svg
  1   3
OOjs UI icon trash-destructive.svg
  2   2
OOjs UI icon trash-destructive.svg
  3   4
OOjs UI icon trash-destructive.svg
 
VisualEditor icon parameter-ltr-progressive.svg Daten
OOjs UI icon code.svg Rohdaten
 
Das entfernen aller Beispielwerte oder eine Grafik ohne Inhaltsdaten kann nicht erzeugt werden.
Leere Grafik
PokeyNorth.png
icon Diagramm
Bearbeiten
Bereich Rohdatenanzeige
In diesem Bereich wird die Syntax aufgelistet, die für die grafische Umsetzung der Daten benötigt wird.[2] Das Dialogfenster stellt dir eine Demoversion bereit.
Abbrechen
Diagramm bearbeiten
Einfügen

VisualEditor icon parameter-ltr.svg
Allgemein
Unverarbeitete JSON-Spezifikation
  {
00 "version": 2,
00 "width": 400,
00 "height": 200,
00 "data": [
00
VisualEditor icon parameter-ltr.svg Daten
OOjs UI icon code-progressive.svg Rohdaten
 

Abbrechen – Bearbeitung abbrechen schließt das Dialogfenster.
Einfügen – übernimmt die Formel aus dem Vorschaubereich in die Seitenansicht.
Beispieldiagramme in verkleinerter Darstellung.

Balkendiagramm Vorlage:Graph:Chart Flächendiagramm Vorlage:Graph:Chart Kurvendiagramm Vorlage:Graph:Chart

Diagrammbearbeitung

i Info: Falls du auf ein Diagramm klickst, dass nicht zu den Balken-, Flächen- oder Liniendiagrammen gehört, erscheint im Dialogfenster der Eintrag Unbekannter Diagrammtyp und eine entsprechende Warnmeldung. Du könntest nun die Daten innerhalb des Eingabefeldes für Rohdaten verändern, was aber teilweise zu Fehlern beim Rendern verursachen kann.

Logo
Diagramme bearbeiten

Vorlage:Graph:Chart

PokeyNorth.png
icon Diagramm
Bearbeiten

Klicke auf das Diagramm, das du bearbeiten möchtest. Das Dialogfeld entspricht in Aussehen und Funktion dem oben beschriebenen Dialogfenster. Einzig die Schaltfläche Einfügen heißt nun Fertig . Es lassen sich auch die Angaben im Bereich der Rohdaten ändern, klicke dafür in das Eingabefeld und passe die Angaben an.
Bearbeiten – öffnet das Dialogfenster zur Bearbeitung.
Fertig – übernimmt die Änderung in die Seitenansicht.

Unbekannter Diagrammtyp

Logo
Nicht unterstützte Diagrammtypen
Auch nicht unterstützte Diagrammtypen, die über <graph>-Tags in Seiten eingebunden wurden, können bearbeitet werden.[3] Da in der deutschsprachigen Wikipedia innerhalb des Artikelnamensraumes große Syntaxblöcke unerwünscht sind, sollten derartige Diagramme besser über Vorlagen erstellt und eingebunden werden.
Abbrechen
Diagramm bearbeiten
Fertig

VisualEditor icon parameter-ltr-progressive.svg
Allgemein
Diagrammtyp
 Unbekannter Diagrammtyp 0 OOjs UI icon downTriangle.svg
Der Typ dieses Diagramms wird nicht unterstützt und Veränderungen am Diagramm zerstören die Anzeige. Bitte bearbeite das Diagramm mithilfe der Rohdatenangabe in der Registerkarte „Rohdaten“.
⧼graph-ve-dialog-edit-size-fieldset⧽

400 0 × 200 0 px

⧼graph-ve-dialog-edit-padding-fieldset⧽
Automatische Auffüllung Häkchen
 
 
 
 
VisualEditor icon parameter-ltr.svg Daten
OOjs UI icon code.svg Rohdaten
 
Vega hat einen Fehler beim Rendern dieses Diagramms entdeckt
PokeyNorth.png
icon Diagramm
Bearbeiten

Vega konnte dieses Diagramm nicht darstellen

PokeyNorth.png
icon Diagramm
Bearbeiten

Fertig – übernimmt die Änderung in die Seitenansicht.
Bearbeiten – öffnet das Dialogfenster zur erneuten Bearbeitung.

Weitere Informationen[Bearbeiten | Quelltext bearbeiten]

  • Hilfe:Graph – technische Beschreibung der Funktionen zur Diagrammerstellung.
  • Hilfe:Tags – technische Erklärungsseite zur Verwendung und Funktion von Tags.

Anmerkungen[Bearbeiten | Quelltext bearbeiten]

  1. Bisher ist es nur möglich die drei Grundformen von Diagrammen mit diesem Editor zu erstellen oder zu bearbeiten, komplexere Diagramme werden nicht unterstützt und Änderungen müssen im Quelltext vorgenommen werden (Stand März 2017).
  2. Derartige Syntaxkomplexe sollten möglichst nicht in einen Artikel eingefügt werden. Besser ist es vorhandene Vorlagen einzusetzen, um den Quelltext übersichtlicher zu gestalten.
  3. Es kann auch passieren, dass sich ein Diagramm nicht zur Bearbeitung öffnen lässt, dann musst du zum Quelltexteditor wechseln, wenn du etwas anpassen möchtest.