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 Kurzinfotext, Datenpunkte oder Unsicherheitsindikatoren beschreiben. Die meisten Spaltenrollen gelten für die der Spalte „data“ vorangehende Spaltenrollen, unabhängig davon, ob sie sich direkt vor oder vor der ersten einer aufeinanderfolgenden Gruppe von Rollenspalten befindet. Sie könnten beispielsweise zwei Spalten haben, die auf die Spalte „Daten“ folgen, eine für „Kurzinfo“ und eine für „Anmerkung“. Gemäß der Spalte „Domain“ sind jedoch auch die Spaltenrollen „annotation“ und „annotationText“ zulässig.
Hinweis: Wenn Sie den Inhalt der Kurzinfos steuern möchten, die angezeigt werden, wenn der Nutzer den Mauszeiger auf ein Diagramm bewegt, finden Sie weitere Informationen unter Kurzinfos.
Ursprünglich gab es nur zwei Rollen für eine Spalte: „Domain“, das die Werte der Hauptachse angibt, und „data“, das Balkenhöhen, Kreissegmentbreiten usw. angibt. Diese Rollen wurden implizit basierend auf der Reihenfolge und dem Typ 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 bieten.
Wenn Sie die Rolle einer Spalte nicht explizit zuweisen, wird ihre Rolle aus der Reihenfolge der Spalte in der Tabelle gemäß der Datenformatspezifikation des Diagramms abgeleitet. Auf dieser Seite erfahren Sie, welche Rollen Sie explizit zuweisen können und wie Sie sie zuweisen können.
Im Folgenden finden Sie einen Vergleich davon, was Sie mit einem Liniendiagramm nur mit den abgeleiteten Standardrollen tun können, mit zusätzlichen, explizit zugewiesenen Rollen.
Format der Datentabelle für Liniendiagramme:
| Spalte 0 | Spalte 1 | ... | Spalte N | |
|---|---|---|---|---|
| Zweck |
|
Werte für Zeile 1 | ... | Werte für Zeile N |
| Datentyp |
|
number | ... | number |
| Rolle | Domain | Daten | ... | Daten |
| Optional unterstützte Spaltenrollen |
|
|
... |
|
| Diagramm ohne explizite Spaltenrollen | Diagramm mit expliziten Spaltenrollen |
|---|---|
|
|
|
In diesem Diagramm werden Rollen nicht explizit zugewiesen. Daher kann nur das oben gezeigte grundlegende Spaltenlayout für Daten und Domains 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 hat optionale Spalten für die Rollen Annotation, AnnotationText, Intervall und Sicherheit.
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 von Google Charts unterstützten Rollen aufgeführt. Nicht alle Rollen werden von allen Diagrammtypen unterstützt. In der Dokumentation zu jedem Diagramm wird beschrieben, welche Rollen verfügbar sind und wo sie platziert werden. Rollen werden für unterschiedliche Diagrammtypen unterschiedlich gerendert.
| Rolle | Beschreibung | Beispiel |
|---|---|---|
| Anmerkung | Text, der im Diagramm in der Nähe des zugehörigen Datenpunkts angezeigt wird. Der Text wird ohne Nutzerinteraktion angezeigt. Annotationen und Anmerkungstext können sowohl Datenpunkten als auch Kategorien (Achsenbeschriftungen) zugewiesen werden. Es gibt zwei Stile für Anmerkungen: Punkt (Standard), mit dem der Anmerkungstext in der Nähe des angegebenen Punkts gezeichnet wird, und Linie, mit dem der Anmerkungstext auf einer Linie gezeichnet wird, die den Diagrammbereich schneidet. Sie können den Linienstil festlegen, indem Sie die folgende Diagrammoption festlegen: Datentyp: String Standardeinstellung: Leerer String |
Daten: label: 'Jahr', 'Verkäufe', null, null, 'Ausgaben', null, null
Rolle: Domain, Daten, Anmerkung, Anmerkungstext, Daten, Anmerkung, Anmerkungstext
'2004', 1000, null, null, 400, null, null
'2005', 1170, null, null '2005', 1170, null, null '0'0'46
'A' und 'B' in diesem Diagramm sind Anmerkungen. Bewegen Sie den Mauszeiger auf die Anmerkung, um den Text der Anmerkung zu sehen. Damit der Wert „annotationText“ angezeigt wird, müssen Sie den Mauszeiger auf die Anmerkung bewegen und nicht auf den Datenpunkt, auf den sie angewendet wurde. Nullwerte werden sowohl für Annotations- als auch für AnnotationText-Zellen akzeptiert. Wenn Sie jedoch einen „annotationText“-Wert haben, muss diesem auch ein Annotationswert zugewiesen sein. |
| annotationText | 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 (Achsenbeschriftungen) zugewiesen werden. Wenn Sie eine Anmerkungsspalte haben, benötigen Sie auch eine Anmerkungsspalte. Die Kurzinfo wird dagegen angezeigt, wenn der Nutzer den Mauszeiger auf den zugehörigen Datenpunkt im Diagramm bewegt. Datentyp: String Standardeinstellung: Leerer String |
|
| Sicherheit | Gibt an, ob ein Datenpunkt sicher ist oder nicht. Wie dies dargestellt wird, hängt vom Diagrammtyp ab. Es kann beispielsweise durch gestrichelte Linien oder eine gestreifte Füllung dargestellt sein. 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“ ist nicht sicher. Standardeinstellung: true |
|
| Betonung | Hebt angegebene Diagrammdatenpunkte 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 werden. 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, das durch Spalte drei, Zeilen eins und zwei gekennzeichnet wird. Die Reihe „Ausgaben“ hat zwei hervorgehobene Segmente, die durch die fünfte Spalte gekennzeichnet werden, und zwar die Zeilen zwei, drei und vier. Beachten Sie, wie die Betonung erfordert, dass beide Begrenzungspunkte betont werden. |
| Intervall | Gibt einen potenziellen Datenbereich für einen bestimmten Punkt an. Intervalle werden normalerweise als I-Balken-Stilbereichsindikatoren dargestellt. Intervallspalten sind numerische Spalten. Fügen Sie Intervallspalten paarweise hinzu und markieren Sie den niedrigsten und den höchsten Wert des Balkens. Intervallwerte sollten mit zunehmendem Wert von links nach rechts hinzugefügt werden. Datentyp: Zahl Standard: 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 Doppelstrich um die Punkte. Die Werte steigen von links nach rechts. Das höchste und niedrigste Intervall um einen Punkt kennzeichnet den oberen und unteren Rand des Balkens. Hinweis: Weitere Informationen zu Intervallen finden Sie unter Intervalle. |
| Umfang | Gibt an, ob ein Punkt im Geltungsbereich oder außerhalb des Geltungsbereichs liegt. Wenn ein Punkt außerhalb des Umfangs liegt, wird er visuell weniger hervorgehoben. Bei Linien- und Flächendiagrammen gilt das Segment zwischen zwei Datenpunkten, wenn beide Endpunkte berücksichtigt werden. Datentyp: Boolesch, wobei "true" für den Umfang bedeutet. 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 Umfangsspalte bezieht sich auf die Datenspalte „Verkäufe“ links daneben. Das erste Segment wird außerhalb des Umfangs gerendert, da beide Begrenzungspunkte außerhalb des Umfangs liegen. Die zweite Bereichsspalte bezieht sich auf die Datenspalte „Ausgaben“ auf der linken Seite. Das erste Segment ist als im Projektumfang enthalten markiert, weil einer seiner Grenzpunkte im Umfang liegt. Der Rest der Linie ist außerhalb des Umfangs, da alle anderen Punkte als außerhalb des Umfangs markiert sind. |
| Stil |
Hier können Sie bestimmte Eigenschaften verschiedener Aspekte Ihrer Daten gestalten. Diese Werte sind:
Datentyp: String, wobei 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 mit der Spaltenrolle Hinweis: Weitere Informationen zum Anpassen des Stils von Punkten, Linien und Balken finden Sie an anderer Stelle. Sehen Sie sich auch die Optionen für jeden Diagrammtyp an, bei denen Stile für andere Arten von Entitäten wie Flächen, Text und Felder angegeben werden können. |
| Kurzinfo |
Text, der angezeigt wird, wenn der Nutzer den Mauszeiger auf den mit dieser Zeile verknüpften Datenpunkt bewegt. Hinweis: Dies wird von der Visualisierung Blasendiagramm nicht unterstützt. Der Inhalt der HTML-Kurzinfos für das 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 die Kurzinfo aufzurufen. Kurzinfo-Daten werden allen Punkten in beiden Linien in den Spalten 3 und 5 zugewiesen. Hinweis: Weitere Informationen zum Anpassen von Kurzinfos finden Sie unter Kurzinfos. |
| Domain | Sie sollten diese Rolle nur dann explizit zuweisen, wenn Sie ein Diagramm mit mehreren Domains erstellen (siehe hier). Durch das Grundformat der Datentabelle kann die Diagramm-Engine ableiten, welche Spalten Domainspalten sind. Sie sollten jedoch wissen, welche Spalten Domainspalten sind, damit Sie wissen, welche anderen Spalten sie ändern können. Domainspalten geben Labels entlang der Hauptachse des Diagramms an. Manchmal werden mehrere Domainspalten verwendet, um mehrere Skalen innerhalb desselben Diagramms zu unterstützen. Datentyp: Normalerweise String, gelegentlich aber 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. In den ersten beiden Datenspalten wird die erste Domain („Quartal 2009“) und in den letzten beiden Datenspalten die zweite Domain („Quartal 2008“) angepasst. Beide Domänen befinden sich auf derselben Achsenskalierung. |
| Daten | Sie sollten diese Rolle nicht explizit zuweisen müssen. Durch das Grundformat der Datentabelle kann die Diagramm-Engine ableiten, welche Spalten Domainspalten sind. Sie sollten jedoch wissen, welche Spalten Datenspalten sind, damit Sie wissen, welche anderen Spalten sie ändern können. Datenrollenspalten geben die Datenreihendaten an, die im Diagramm gerendert werden sollen. Bei den meisten Diagrammen entspricht eine Spalte einer Reihe, dies kann jedoch je nach Diagrammtyp variieren. Für Streudiagramme sind beispielsweise zwei Datenspalten für die erste Reihe und eine zusätzliche für jede zusätzliche Reihe erforderlich. Für Kerzendiagramme sind vier Datenspalten pro Reihe erforderlich. Datentyp: Zahl |
Rollenhierarchie und Assoziativität
Das folgende Diagramm zeigt, welche Rollenspalten auf welche anderen Rollenspalten angewendet werden können. Alle Spalten mit Ausnahme von Domainspalten gelten für den nächsten linken Nachbarn, auf den sie angewendet werden kann.
So wird beispielsweise eine Spalte scope auf die nächstgelegene data-Spalte auf der linken Seite angewendet, die annotationText-Spalte auf die nächstgelegene annotation-Spalte auf der linken Seite und eine annotation auf die nächstgelegene data- oder domain-Spalte links davon.
Rollen zuweisen
Rollen werden als Eigenschaft der Spalte in einem DataTable-Objekt zugewiesen. Es gibt mehrere Möglichkeiten, eine Rollenspalte zu erstellen. Hier sind die gängigsten:
Mit den ersten beiden Verfahren wird das folgende Diagramm gezeichnet:
Methode „DataTable.addColumn“
Im folgenden Beispiel wird ein Balkendiagramm mit einer Intervallmarkierung für drei der Balken erstellt. Die Intervallmarkierungen werden durch die dritte und vierte Spalte mithilfe 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 das Attribut p 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 Tabellenerstellung 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.setColumns-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().