Auf dieser Seite werden das Konzept und die Verwendung von Rollen in Diagrammdatentabellen beschrieben.
Was sind Rollen?
Google DataTable- und DataView-Objekte unterstützen jetzt explizit zugewiesene Spaltenrollen. Eine Spaltenrolle beschreibt den Zweck der Daten in dieser Spalte. Eine Spalte kann beispielsweise Daten enthalten, die den Kurzinfotext, Datenpunktanmerkungen oder Indikatoren für die Unsicherheit beschreiben. Die meisten Spaltenrollen werden auf die vorangehende Datenspalte angewendet, unabhängig davon, ob sie unmittelbar davor oder vor der ersten Gruppe von aufeinanderfolgenden Rollenspalten liegt. Sie können beispielsweise zwei Spalten nach der Spalte „data“ haben, eine für „tooltip“ und eine für „annotation“. Nach der Spalte „Domain“ sind jedoch in der Regel auch die Spalten „Annotation“ und „AnnotationText“ zulässig.
Hinweis: Wie Sie den Inhalt der Kurzinfos steuern, die angezeigt werden, wenn der Nutzer den Mauszeiger auf ein Diagramm bewegt, wird unter Kurzinfo beschrieben.
Ursprünglich waren für eine Spalte nur zwei Rollen verfügbar: „Domain“ für die Werte der großen Achsen und „Daten“ für die Balkenhöhe, die Kreissegmentbreite usw. Diese Rollen wurden implizit anhand der Reihenfolge und des Typs der Spalten in der Tabelle zugewiesen. Mit der Möglichkeit, Spaltenrollen explizit zuzuweisen, können Sie jetzt optionale Spalten hinzufügen, die einem Diagramm neue, interessante Funktionen wie beliebige Anmerkungslabels, Hovertext und Unsicherheitsbalken hinzufügen.
Wenn Sie die Rolle einer Spalte nicht explizit zuweisen, wird ihre Rolle durch die Spaltenreihenfolge in der Tabelle gemäß der Datenformatspezifikation des Diagramms abgeleitet. Auf dieser Seite erfahren Sie, welche Rollen Sie explizit zuweisen können und wie sie zugewiesen werden.
Im Folgenden wird die Verwendung eines Liniendiagramms mit den standardmäßig abgeleiteten Rollen mit zusätzlichen explizit zugewiesenen Rollen verglichen.
Tabellenformat für Liniendiagramme:
| Spalte 0 | Spalte 1 | ... | Spalte N | |
|---|---|---|---|---|
| Zweck |
|
Werte für Zeile 1 | ... | Zeilen N-Werte |
| Datentyp |
|
Zahl | ... | Zahl |
| Rolle | Domain | Daten | ... | Daten |
| Optional unterstützte Spaltenrollen |
|
|
... |
|
| Diagramm ohne explizite Spaltenrollen | Diagramm mit expliziten Spaltenrollen |
|---|---|
|
|
|
In diesem Diagramm werden Rollen nicht explizit angewendet. Daher kann nur das oben dargestellte Layout der Spalten und grundlegenden Daten verwendet werden. Datentabelle: var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addRows([
['April',1000],
['May', 1170],
['June', 660],
['July', 1030]
]); |
In diesem Diagramm werden Rollen explizit zugewiesen, sodass die optionalen Spalten hinzugefügt werden können. Dieses Diagramm enthält optionale Spalten für Annotations-, AnnotationText-, Intervall- und Sicherheitsrollen.
Datentabelle: var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addColumn({type:'number', role:'interval'}); // interval role col.
data.addColumn({type:'number', role:'interval'}); // interval role col.
data.addColumn({type:'string', role:'annotation'}); // annotation role col.
data.addColumn({type:'string', role:'annotationText'}); // annotationText col.
data.addColumn({type:'boolean',role:'certainty'}); // certainty col.
data.addRows([
['April',1000, 900, 1100, 'A','Stolen data', true],
['May', 1170, 1000, 1200, 'B','Coffee spill', true],
['June', 660, 550, 800, 'C','Wumpus attack', true],
['July', 1030, null, null, null, null, false]
]); |
Welche Rollen sind verfügbar?
In der folgenden Tabelle sind alle Rollen aufgeführt, die von Google Charts unterstützt werden. Nicht alle Rollen werden von allen Diagrammtypen unterstützt. In der Dokumentation des jeweiligen Diagramms ist beschrieben, welche Rollen verfügbar sind und wo sie verwendet werden. Rollen werden für verschiedene Diagrammtypen unterschiedlich gerendert.
| Rolle | Beschreibung | Beispiel |
|---|---|---|
| Anmerkung | Text, der im Diagramm neben dem zugehörigen Datenpunkt angezeigt werden soll. Der Text wird ohne Nutzerinteraktion angezeigt. Annotationen und Anmerkungstext können sowohl Datenpunkten als auch Kategorien (Achsenlabels) zugewiesen werden. Es gibt zwei Arten von Anmerkungen: Punkt (Standard), der den Anmerkungstext in der Nähe des angegebenen Punkts zeichnet, und die Linie, die den Anmerkungstext auf einer Linie zeichnet, die den Diagrammbereich schneidet. Sie können den Linienstil angeben, indem Sie die folgende Diagrammoption festlegen: Datentyp: String Standard: Leerer String |
Daten: label: 'Year', 'Sales', null, null, 'Expenses', null, null
role: Domain, Daten, Annotation, AnnotationText, Daten, Annotation, AnnotationText
'2004', 1.000, null, null, 400, null, null, 0,0, 0,0, 0,0, 0,0, 0,0, 0;0
Das „A“ und das „B“ in diesem Diagramm sind Anmerkungen. Bewege den Mauszeiger auf die Anmerkung, um den Anmerkungstext anzuzeigen. Sie müssen den Mauszeiger auf die Anmerkung bewegen, nicht auf den Datenpunkt, auf den sie angewendet wird, um den Wert für den AnnotationText anzuzeigen. Nullwerte werden sowohl für Annotationstext als auch für AnnotationText-Zellen akzeptiert. Wenn Sie jedoch einen AnnotationText-Wert haben, muss ein Anmerkungswert verknüpft sein. |
| Anmerkungstext | Erweiterter Text, der angezeigt wird, wenn der Nutzer den Mauszeiger auf die verknüpfte Anmerkung bewegt. Annotationen und Anmerkungstext können sowohl Datenpunkten als auch Kategorien (Achsenlabels) zugewiesen werden. Wenn Sie eine Anmerkungstextspalte haben, müssen Sie auch eine Anmerkungsspalte haben. Der Kurzinfos wird dagegen angezeigt, wenn der Nutzer den Mauszeiger auf den zugehörigen Datenpunkt im Diagramm bewegt. Datentyp: String Standard: Leerer String |
|
| Sicherheit | Gibt an, ob ein Datenpunkt sicher ist oder nicht. Wie dies angezeigt wird, hängt vom Diagrammtyp ab. Es kann beispielsweise durch gestrichelte Linien oder eine gestreifte Füllung angezeigt werden. Bei Linien- und Flächendiagrammen ist das Segment zwischen zwei Datenpunkten nur dann sicher, wenn beide Datenpunkte sicher sind. Datentyp: Boolesch, wobei „wahr“ sicher ist, „falsch“ nicht sicher Standardeinstellung: true |
|
| Hervorhebung | Hebt die angegebenen Datenpunkte des Diagramms hervor. Wird als dicke Linie und/oder großer Punkt angezeigt. Bei Linien- und Flächendiagrammen wird das Segment zwischen zwei Datenpunkten nur dann hervorgehoben, wenn beide Datenpunkte hervorgehoben sind. Datentyp: Boolesch Standardeinstellung: false |
Daten: label: 'Year', 'Sales', null, 'Expenses', null
role: domain, data, emphasis, data, emphasis
'2004', 1000, true, 400, false
'2005', 1170, true, 460, true
'2006', 660, false, 1120, true
'2007', 1030, false, 540, true
In diesem Diagramm enthält die Reihe „Verkäufe“ ein hervorgehobenes Segment, gekennzeichnet durch die Spalten 3, 1 und 2. In der Reihe „Ausgaben“ sind zwei Segmente hervorgehoben, die in der fünften Spalte aufgeführt sind. Für die Hervorhebung müssen beide Markierungspunkte hervorgehoben werden. |
| Intervall | Gibt den möglichen Datenbereich für einen bestimmten Punkt an. Intervalle werden normalerweise als Indikatoren für den Bereich des Stils im I-Balken angezeigt. Intervallspalten sind numerische Spalten. Fügen Sie Intervallspalten paarweise hinzu und markieren Sie den niedrigen und hohen Wert des Balkens. Intervallwerte sollten immer höher, also von links nach rechts, hinzugefügt werden. Datentyp: number Standardeinstellung: Kein Intervall |
Daten: label: 'Day', 'Stock value', null, null
role: domain, data, interval, interval
'Mon', 38, 20, 45
'Tue', 55, 31, 66
'Wed', 77, 50, 80
'Thurs', 66, 50, 77
In diesem Diagramm definieren die Intervallwerte einen I-Balken, der die Punkte umgibt. Die Werte erhöhen sich von links nach rechts. Die höchsten und niedrigsten Intervalle um einen Punkt markieren den oberen und unteren Rand des Balkens. Hinweis: Weitere Informationen zu Intervallen finden Sie unter Intervalle. |
| Umfang | Gibt an, ob ein Punkt innerhalb oder außerhalb des Bereichs liegt. Wenn ein Punkt außerhalb des Geltungsbereichs liegt, wird er visuell herabgestuft. Bei Linien- und Flächendiagrammen liegt der Bereich zwischen zwei Datenpunkten im Geltungsbereich, wenn beide Endpunkte einbezogen sind. Datentyp: Boolesch, wobei "true" für den Geltungsbereich steht Standardeinstellung: true |
Daten: label: 'Year', 'Sales', null, 'Expenses', null
role: domain, data, scope, data, scope
'2004', 1000, false, 400, true
'2005', 1170, false, 460, false
'2006', 660, true, 1120, false
'2007', 1030, true, 540, false
Die erste Spalte für den Umfang gilt für die Datenspalte „Verkäufe“ links. Das erste Segment wird außer Acht gelassen, weil beide Grenzpunkte außerhalb des Geltungsbereichs liegen. Die zweite Spalte für den Umfang bezieht sich auf die Datenspalte „Ausgaben“ links. Das erste Segment wird als vom Geltungsbereich abgedeckt, da einer seiner Grenzpunkte innerhalb des Geltungsbereichs liegt. Der Rest der Linie liegt außerhalb des Gültigkeitsbereichs, da alle anderen Punkte außerhalb des Gültigkeitsbereichs liegen. |
| Stil |
Stile für bestimmte Eigenschaften verschiedener Aspekte Ihrer Daten Diese Werte sind:
Datentyp: String, bei dem mehrere Stile mit einer Standard: null |
Daten:
label: 'Character', 'Popularity', 'Style',
role: domain, data, style,
'Hulk', 50, 'color: green',
'Captain America', 75, 'color: #0000cf;' +
'stroke-color: #cf001d',
'Wolverine', 90, 'opacity: 0.5;' +
'stroke-width: 5;' +
'stroke-color: #01a0ff;' +
'fill-color: #fff600',
'Iron Man', 60, 'color: #db9500;' +
'stroke-width: 10;' +
'stroke-color: #a30300',
'Spider Man', 100, 'bar {' +
'fill-color: #c8001d;' +
'stroke-width: 3;' +
'stroke-color: #1800c8}'
In diesem Diagramm wird jeder Balken unabhängig von den anderen mithilfe der Spaltenrolle Hinweis: Weitere Informationen zum Anpassen des Stils von Punkten, Linien und Balken sind an anderer Stelle dokumentiert. Sehen Sie sich auch die Optionen für die einzelnen Diagrammtypen an, bei denen Stile für andere Arten von Elementen wie Bereiche, Text und Felder festgelegt werden können. |
| Kurzinfo |
Text, der angezeigt werden soll, wenn der Nutzer den Mauszeiger auf den Datenpunkt dieser Zeile bewegt Hinweis:Dies wird in der Visualisierung des Blasendiagramms nicht unterstützt. Der Inhalt von HTML-Kurzinfos zum Blasendiagramm kann nicht angepasst werden. Datentyp: String Standard: Datenpunktwert |
Daten: label: 'Year', 'Sales', null, 'Expenses', null
role: domain, data, tooltip, data, tooltip
'2004', 1000, '1M$ sales, 400, '$0.4M expenses
in 2004' in 2004'
'2005', 1170, '1.17M$ sales, 460, '$0.46M expenses
in 2005' in 2005'
'2006', 660, '.66$ sales, 1120, '$1.12M expenses
in 2006' in 2006'
'2007', 1030, '1.03M$ sales, 540, '$0.54M expenses
in 2007' in 2007'
Bewegen Sie den Mauszeiger auf die Datenpunkte, um den Kurzinfotext einzublenden. Die Kurzinfodaten werden allen Punkten in beiden Zeilen in den Spalten 3 und 5 zugewiesen. Hinweis: Weitere Informationen zum Anpassen von Kurzinfos finden Sie unter Kurzinfos. |
| Domain | Sie sollten diese Rolle nicht explizit zuweisen, es sei denn, Sie entwerfen ein Diagramm mit mehreren Domains (siehe hier). Das Grundformat der Datentabelle ermöglicht es dem Diagrammmodul, abzuleiten, welche Spalten Domaindomains sind. Beachten Sie jedoch, welche Spalten Domainspalten sind, damit Sie wissen, welche anderen Spalten sie ändern können. Domainspalten geben Labels entlang der Hauptachse des Diagramms an. Manchmal können mehrere Domainspalten verwendet werden, um mehrere Waagen innerhalb desselben Diagramms zu unterstützen. Datentyp: Normalerweise String, gelegentlich jedoch auch Zahl oder Datum |
Daten:
label: '2009, '2009, '2009, '2008, '2008 '2008
Quarter', Sales', Expenses', Quarter', Sales', Expenses'
role: domain, data, data, domain, data, data
'Q1/09', 1000, 400, 'Q1/08', 800, 300
'Q2/09', 1170, 460, 'Q2/08', 750, 400
'Q3/09', 660, 1120, 'Q3/08', 700, 540
'Q4/09', 1030, 540, 'Q4/08', 820, 620
Dieses Beispiel zeigt ein Diagramm mit mehreren Domains. Die ersten beiden Datenspalten ändern die erste Domain („2009 Quartal“), die letzten beiden Datenspalten die zweite Domain („2008 Quartal“). Beide Domains werden auf derselben Skala dargestellt. |
| Daten | Sie sollten diese Rolle nicht explizit zuweisen. Das Grundformat der Datentabelle ermöglicht es dem Diagrammmodul, abzuleiten, welche Spalten Domaindomains sind. Beachten Sie jedoch, welche Spalten Datenspalten sind, damit Sie wissen, welche anderen Spalten sie ändern können. In Datenrollenspalten werden Seriendaten angegeben, die im Diagramm gerendert werden sollen. Bei den meisten Diagrammen gilt eine Spalte = eine Datenreihe, die jedoch je nach Diagrammtyp variieren kann. Für Streudiagramme sind beispielsweise zwei Datenspalten für die erste Datenreihe und eine weitere für jede weitere Datenreihe erforderlich. Für Kerzendiagramme sind vier Datenspalten pro Reihe erforderlich. Datentyp: number |
Rollenhierarchie und -verknüpfung
Das folgende Diagramm zeigt, welche Rollenspalten auf welche anderen Rollen angewendet werden können. Alle Spalten außer Domainspalten gelten für den nächsten linken Nachbarn, auf den sie angewendet werden kann.
Eine scope-Spalte gilt also für die Spalte data auf der linken Seite, eine annotationText-Spalte für die nächstgelegene annotation-Spalte links und eine annotation-Spalte für die nächstgelegene data- oder domain-Spalte links.
Rollen zuweisen
Rollen werden als Attribut der Spalte in einem DataTable-Objekt zugewiesen. Es gibt mehrere Möglichkeiten, eine Rollenspalte zu erstellen. Hier sind die häufigsten:
Die ersten beiden Methoden zeichnen das folgende Diagramm:
DataTable.addColumn-Methode
Im folgenden Beispiel wird ein Balkendiagramm mit einer Intervallmarkierung auf drei Balken erstellt. Die Intervallmarkierungen werden in der dritten und vierten Spalte mit der Methode DataTable.addColumn() angegeben.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain column.
data.addColumn('number', 'Sales'); // Implicit data column.
data.addColumn({type:'number', role:'interval'});
data.addColumn({type:'number', role:'interval'});
data.addColumn('number', 'Expenses');
data.addRows([
['April',1000, 900, 1100, 400],
['May', 1170, 1000, 1200, 460],
['June', 660, 550, 800, 1120],
['July', 1030, , , 540]
]);
var chart = new google.visualization.BarChart(
document.getElementById('visualization'));
chart.draw(data,
{width: 800, height: 600, title: 'Company Performance'});
JavaScript Literal Notation
Im JSON-Literal müssen Sie eine p-Eigenschaft der Spalte mit dem Wert "role":"role-type" angeben.
Das folgende Beispiel zeigt, wie Rollen mithilfe der JavaScript-Literalschreibweise angegeben werden. Dies ist nur bei der Erstellung der Tabelle möglich.
{"cols":[
{"id":"","label":"Month","pattern":"","type":"string"},
{"id":"","label":"Sales","pattern":"","type":"number"},
{"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}},
{"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}},
{"id":"","label":"Expenses","pattern":"","type":"number"}],
"rows":[
{"c":[
{"v":"April","f":null},
{"v":1000,"f":null},
{"v":900,"f":null},
{"v":1100,"f":null},
{"v":400,"f":null}]},
{"c":[
{"v":"May","f":null},
{"v":1170,"f":null},
{"v":1000,"f":null},
{"v":1200,"f":null},
{"v":460,"f":null}]},
{"c":[{"v":"June","f":null},
{"v":660,"f":null},
{"v":550,"f":null},
{"v":800,"f":null},
{"v":1120,"f":null}]},
{"c":[
{"v":"July","f":null},
{"v":1030,"f":null},
{"v":null,"f":null},
{"v":null,"f":null},
{"v":540,"f":null}]}],
"p":null
}
DataView.setColumn-Methode
Beim Erstellen einer Ansicht können Sie die Rolle einer Spalte explizit festlegen. Dies ist nützlich, wenn Sie eine neue berechnete Spalte erstellen. Weitere Informationen finden Sie unter DataView.setColumns().