Übersicht
Eine visuelle Darstellung einer Datenstruktur, in der jeder Knoten null oder mehr untergeordnete Elemente und ein übergeordnetes Element haben kann (mit Ausnahme des Stamms, das keine übergeordneten Elemente hat). Jeder Knoten wird als Rechteck dargestellt, dessen Größe und Farbe den von Ihnen zugewiesenen Werten entsprechen. Größen und Farben werden relativ zu allen anderen Knoten im Diagramm bewertet. Sie können angeben, wie viele Ebenen gleichzeitig und optional auch tiefer liegende Ebenen angezeigt werden sollen. Wenn ein Knoten ein Blattknoten ist, können Sie eine Größe und Farbe angeben. Wenn er kein Blatt ist, wird er als Begrenzungsrahmen für Blattknoten angezeigt. Standardmäßig wird der Baum nach unten verschoben, wenn ein Nutzer auf einen Knoten mit der linken Maustaste klickt, und wieder nach oben, wenn ein Nutzer mit der rechten Maustaste auf das Diagramm klickt.
Die Gesamtgröße des Diagramms wird durch die Größe des beinhaltenden Elements bestimmt, das Sie auf Ihrer Seite einfügen. Wenn Sie Blattknoten haben, deren Namen zu lang sind, um sie anzuzeigen, wird der Name durch eine Ellipse (...) abgeschnitten.
Beispiel
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['treemap']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
['Global', null, 0, 0],
['America', 'Global', 0, 0],
['Europe', 'Global', 0, 0],
['Asia', 'Global', 0, 0],
['Australia', 'Global', 0, 0],
['Africa', 'Global', 0, 0],
['Brazil', 'America', 11, 10],
['USA', 'America', 52, 31],
['Mexico', 'America', 24, 12],
['Canada', 'America', 16, -23],
['France', 'Europe', 42, -11],
['Germany', 'Europe', 31, -2],
['Sweden', 'Europe', 22, -13],
['Italy', 'Europe', 17, 4],
['UK', 'Europe', 21, -5],
['China', 'Asia', 36, 4],
['Japan', 'Asia', 20, -12],
['India', 'Asia', 40, 63],
['Laos', 'Asia', 4, 34],
['Mongolia', 'Asia', 1, -5],
['Israel', 'Asia', 12, 24],
['Iran', 'Asia', 18, 13],
['Pakistan', 'Asia', 11, -52],
['Egypt', 'Africa', 21, 0],
['S. Africa', 'Africa', 30, 43],
['Sudan', 'Africa', 12, 2],
['Congo', 'Africa', 10, 12],
['Zaire', 'Africa', 8, 10]
]);
tree = new google.visualization.TreeMap(document.getElementById('chart_div'));
tree.draw(data, {
minColor: '#f00',
midColor: '#ddd',
maxColor: '#0d0',
headerHeight: 15,
fontColor: 'black',
showScale: true
});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Wichtige Informationen
Sie können angeben, ob Elemente hervorgehoben werden sollen, und bestimmte Farben festlegen, damit bestimmte Elemente in diesem Fall verwendet werden. Um die Hervorhebung zu aktivieren, legen Sie highlightOnMouseOver:true (für Version 49 oder niedriger) oder enableHighlight: true (für Version 50 oder höher) fest.
Dort können Sie mithilfe der verschiedenen HighlightColor-Optionen die Farben festlegen, die zum Hervorheben von Elementen verwendet werden sollen.
var options = { // For v49 or before
highlightOnMouseOver: true,
maxDepth: 1,
maxPostDepth: 2,
minHighlightColor: '#8c6bb1',
midHighlightColor: '#9ebcda',
maxHighlightColor: '#edf8fb',
minColor: '#009688',
midColor: '#f7f7f7',
maxColor: '#ee8100',
headerHeight: 15,
showScale: true,
height: 500,
useWeightedAverageForAggregation: true
};
var optionsV50 = { // For v50+
enableHighlight: true,
maxDepth: 1,
maxPostDepth: 2,
minHighlightColor: '#8c6bb1',
midHighlightColor: '#9ebcda',
maxHighlightColor: '#edf8fb',
minColor: '#009688',
midColor: '#f7f7f7',
maxColor: '#ee8100',
headerHeight: 15,
showScale: true,
height: 500,
useWeightedAverageForAggregation: true,
// Use click to highlight and double-click to drill down.
eventsConfig: {
highlight: ['click'],
unhighlight: ['mouseout'],
rollup: ['contextmenu'],
drilldown: ['dblclick'],
}
};
Kurzinfos
Standardmäßig sind die Strukturkarten-Kurzinfos einfach und zeigen das Label der Strukturkarte. Dies ist nützlich, wenn die Zellen zu klein sind, um die Labels zu enthalten. Sie können sie jedoch wie in diesem Abschnitt beschrieben weiter anpassen.
Kurzinfos zur Strukturkarte werden anders angepasst als andere Diagramme: Sie definieren eine Funktion und legen dann die Option generateTooltip auf diese Funktion fest. Hier ein einfaches Beispiel:
Im obigen Diagramm definieren wir eine Funktion mit dem Namen showStaticTooltip, die einfach einen String mit dem HTML-Code zurückgibt, der angezeigt werden soll, wenn der Nutzer den Mauszeiger auf eine Strukturkarte bewegt. Testen! Der zu generierende Code lautet so:
var options = {
minColor: '#e7711c',
midColor: '#fff',
maxColor: '#4374e0',
showScale: true,
generateTooltip: showStaticTooltip
};
tree.draw(data, options);
function showStaticTooltip(row, size, value) {
return '<div style="background:#fd9; padding:10px; border-style:solid">' +
'Read more about the <a href="http://en.wikipedia.org/wiki/Kingdom_(biology)">kingdoms of life</a>.</div>';
}
Die generateTooltip-Funktion kann ein beliebiger JavaScript-Code sein. Normalerweise sind Kurzinfos erforderlich, die sich je nach Datenwerten unterscheiden. Das folgende Beispiel zeigt, wie Sie auf jedes Feld in der Datentabelle zugreifen können.
Wenn Sie den Mauszeiger auf die Zellen in der obigen Strukturkarte bewegen, wird für jede Zelle eine andere Kurzinfo angezeigt. Die Kurzinfo zur Strukturübersicht enthält drei Werte: row, size und value.
row: Zeile der Zelle aus der Datentabellesize: die Summe des Werts (Spalte 3) dieser Zelle und aller ihrer untergeordneten Elementevalue: die Farbe der Zelle, ausgedrückt als Zahl von 0 bis 1
In showFullTooltip ist der String ein HTML-Feld mit fünf Zeilen:
- Zeile 1 zeigt die entsprechende Zeile aus der Datentabelle, wobei
data.getValueverwendet wird. - Zeile 2 teilt Ihnen mit, welche Zeile dies ist, d. h. nur der Parameter
row. - Zeile 3 enthält Informationen aus Spalte 3 der Datentabelle: die Summe aus dem Wert von Spalte 3 aus dieser Zeile und die Werte aus Nachfolgerelementen.
- Zeile 4 enthält Informationen aus Spalte 4 der Datentabelle. Es ist der Wert, wird aber als Zahl zwischen 0 und 1 ausgedrückt, die der Farbe der Zelle entspricht.
var options = {
minColor: '#e7711c',
midColor: '#fff',
maxColor: '#4374e0',
showScale: true,
generateTooltip: showFullTooltip
};
tree.draw(data, options);
function showFullTooltip(row, size, value) {
return '<div style="background:#fd9; padding:10px; border-style:solid">' +
'<span style="font-family:Courier"><b>' + data.getValue(row, 0) +
'</b>, ' + data.getValue(row, 1) + ', ' + data.getValue(row, 2) +
', ' + data.getValue(row, 3) + '</span><br>' +
'Datatable row: ' + row + '<br>' +
data.getColumnLabel(2) +
' (total value of this cell and its children): ' + size + '<br>' +
data.getColumnLabel(3) + ': ' + value + ' </div>';
}
}
Wird geladen
Der Paketname von google.charts.load lautet "treemap".
google.charts.load("current", {packages: ["treemap"]});
Der Klassenname der Visualisierung lautet google.visualization.TreeMap.
var visualization = new google.visualization.TreeMap(container);
Datenformat
Jede Zeile in der Datentabelle beschreibt einen Knoten (ein Rechteck im Diagramm). Jeder Knoten (außer dem Stammknoten) hat einen übergeordneten Knoten. Jeder Knoten wird in seiner Größe und in seiner Farbe gemäß den anderen aktuell angezeigten Knoten eingefärbt.
Die Datentabelle sollte vier Spalten im folgenden Format haben:
- Spalte 0: [string] Eine ID für diesen Knoten. Es kann ein beliebiger gültiger JavaScript-String sein, einschließlich Leerzeichen, und beliebiger Länge. Dieser Wert wird als Knotenheader angezeigt.
- Spalte 1: [String] – ID des übergeordneten Knotens Wenn dies ein Root-Knoten ist, lassen Sie dieses Feld leer. Pro Strukturkarte ist nur ein Stamm zulässig.
- Spalte 2: [Nummer] – Größe des Knotens Jeder positive Wert ist zulässig. Dieser Wert bestimmt die Größe des Knotens und wird relativ zu allen anderen aktuell angezeigten Knoten berechnet. Bei Nicht-Blattknoten wird dieser Wert ignoriert und aus der Größe aller untergeordneten Elemente berechnet.
- Spalte 3 – [optional, Zahl] – ein optionaler Wert, der zum Berechnen einer Farbe für diesen Knoten verwendet wird. Alle Werte (positiv oder negativ) sind zulässig.
Der Farbwert wird zuerst auf einer Skala von
minColorValuebismaxColorValueneu berechnet. Dann wird dem Knoten eine Farbe aus dem Farbverlauf zwischenminColorundmaxColorzugewiesen.
Konfigurationsoptionen
| Name | |
|---|---|
| enableHighlight (für v50+) |
Legt fest, ob Elemente hervorgehobene Effekte anzeigen sollen. Der Standardtrigger ist ein Mouseover.
Der Trigger kann mit Typ: Boolesch
Standard: false
|
| eventsConfig (für v50+) |
Die Ereigniskonfiguration zum Auslösen von Interaktionen mit Strukturkarten. Format zum Konfigurieren von Interaktionen:
eventsConfig: {
interaction1: undefined, // or missing
interaction2: [], // disable
interaction3: [
'mouse_event',
'optional_key1',
'optional_key2',
'optional_key3',
'optional_key4'
],
...,
}
Wenn das Konfigurationsarray für eine Interaktion nicht definiert ist oder fehlt, wird default verwendet.
Wenn die Konfiguration ein leeres Array ist, wird die Interaktion deaktiviert.
Für eine gültige Konfiguration ist
mouse_event erforderlich und muss ein unterstütztes Mausereignis sein. Dann können Sie bis zu vier optionale Schlüsselmodifikatoren verwenden.
Beispiel für das Drücken der Tastenkombination Strg + Umschalttaste + Rechtsklick:
{ rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] }Type: Objekt
Standard:
{
highlight: ['mouseover'],
unhighlight: ['mouseout'],
rollup: ['contextmenu'], // right-click
drilldown: ['click']
}
|
| Schriftfarbe |
Die Textfarbe. Geben Sie einen HTML-Farbwert an. Typ: String
Standard: #ffffff
|
| Schriftfamilie |
Die für den gesamten Text zu verwendende Schriftfamilie. Typ: String
Standard: automatisch
|
| Schriftgröße |
Die Schriftgröße für den gesamten Text in Punkten. Typ:Zahl
Standard: 12
|
| forceIFrame |
Zeichnet das Diagramm innerhalb eines Inline-Frames. Beachten Sie, dass diese Option im IE8 ignoriert wird. Alle IE8-Diagramme werden in iFrames gezeichnet. Typ: Boolesch
Standard: false
|
| Kopfzeilenfarbe |
Die Farbe des Abschnitts „Header“ für jeden Knoten. Geben Sie einen HTML-Farbwert an. Typ: String
Standard: #988f86
|
| KopfzeileHöhe |
Höhe des Kopfzeilenabschnitts für jeden Knoten in Pixeln (kann null sein). Typnummer
Standard: 0
|
| headerHighlightFarbe |
Die Farbe des Headers eines Knotens, über den der Mauszeiger bewegt wird. Geben Sie einen HTML-Farbwert oder null an; bei Null wird dieser Wert Typ: String
Standard: null
|
| Hervorheben von Mouseover (ab Version 50 eingestellt) |
Veraltet ab Version 50. Verwenden Sie Version 50 und höher Typ: Boolesch
Standard: false
|
| Hinweis: Deckkraft |
Wenn Typ:Zahl
Standard: 0,0
|
| maxColor (Max. Farbe) |
Die Farbe eines Rechtecks mit dem Wert in Spalte 3 von Typ: String
Standard: #00dd00
|
| maxTiefe |
Die maximale Anzahl von Knotenebenen, die in der aktuellen Ansicht angezeigt werden sollen. Ebenen werden in der aktuellen Ebene vereinfacht. Wenn Ihr Baum mehr Level hat, müssen Sie ihn nach oben oder unten verschieben. Darüber hinaus werden Typ:Zahl
Standard: 1
|
| maxHighlightFarbe |
Die für den Knoten mit dem größten Wert in Spalte 3 zu verwendende Markierungsfarbe. Geben Sie einen HTML-Farbwert oder null an. Wenn dieser Wert null ist, wird der Wert von Typ: String
Standard: null
|
| maxPostTiefe |
Die Anzahl der Knotenebenen außerhalb von Typ:Zahl
Standard: 0
|
| maxColorValue (Wert für maximale Farbe) |
Der in Spalte 3 zulässige Höchstwert. Alle höheren Werte werden auf diesen Wert gekürzt. Wenn dieser Wert auf null gesetzt ist, wird er auf den Maximalwert in der Spalte gesetzt. Typ:Zahl
Standard: null
|
| MidColor |
Die Farbe eines Rechtecks mit einem Wert in Spalte 3 zwischen Typ: String
Standard: #000000
|
| MidHighlightColor |
Die für den Knoten zu verwendende Markierungsfarbe mit einem Wert in Spalte 3 nahe dem Medianwert von Typ: String
Standard: null
|
| Min. Farbe |
Die Farbe eines Rechtecks mit dem Wert in Spalte 3 von Typ: String
Standard: #dd0000
|
| HighlightHighlight |
Die für den Knoten zu verwendende Markierungsfarbe mit einem Wert in Spalte 3, der Typ: String
Standard: null
|
| minColorValue (Min.Wert) |
Der in Spalte 3 zulässige Mindestwert. Alle niedrigeren Werte werden auf diesen Wert gekürzt. Wenn der Wert auf null gesetzt ist, wird er als Mindestwert in der Spalte berechnet. Typ: Zahl
Standard: null
|
| keine Farbe |
Die Farbe, die für ein Rechteck verwendet werden soll, wenn ein Knoten keinen Wert für Spalte 3 hat und dieser Blatt ein Blatt ist oder nur Blätter enthält. Geben Sie einen HTML-Farbwert an. Typ: String
Standard: #000000
|
| noHighlightColor |
Die Farbe, die für ein Rechteck verwendet wird, dessen Farbe „no“ lautet. Gib einen HTML-Farbwert oder null an. Bei Null ist dies der Wert von Typ: String
Standard: null
|
| Skalieren |
Gibt an, ob oben im Diagramm ein Farbverlauf von Typ: Boolesch
Standard: false
|
| Kurzinfos anzeigen |
Gibt an, ob Kurzinfos angezeigt werden sollen. Typ: Boolesch
Standard: true
|
| textStyle |
Ein Objekt, das den Textstil für bestimmte Diagramme mit Text im Inhaltsbereich angibt, z. B. die Strukturkarte. Das Objekt hat folgendes Format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Type: Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| title |
Text, der über dem Diagramm angezeigt werden soll. Typ: String
Standard:kein Titel
|
| Titeltextstil |
Ein Objekt, das den Stil des Titeltexts angibt. Das Objekt hat folgendes Format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Type: Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| useWeightedAverageForAggregation |
Gibt an, ob gewichtete Durchschnittswerte für die Aggregation verwendet werden sollen. Typ: Boolesch
Standard: false
|
Methoden
| Methode | |
|---|---|
draw(data, options) |
Zeichnet das Diagramm. Rückgabetyp: Keine
|
getEventsConfig() (for v50+) |
Gibt die aktuelle Interaktionskonfiguration zurück. Hiermit kann die Konfigurationsoption Rückgabetyp: Objekt
{ // An empty array (i.e. []) means the interaction is disabled.
highlight: string[],
unhighlight: string[],
rollup: string[],
drilldown: string[] }
|
getSelection() |
Standardimplementierung für Rückgabetyp: Array von Auswahlelementen
|
setSelection() |
Standardimplementierung für Rückgabetyp: Keine
|
goUpAndDraw() |
Erhöhen Sie den Baum um eine Ebene und zeichnen Sie ihn noch einmal. Gibt keinen Fehler aus, wenn der Knoten der Stammknoten ist. Dies wird automatisch ausgelöst, wenn der Nutzer mit der rechten Maustaste auf einen Knoten klickt. Rückgabetyp: Keine
|
getMaxPossibleDepth() |
Gibt die maximal mögliche Tiefe für die aktuelle Ansicht zurück. Rückgabetyp: Nummer
|
clearChart() |
Löscht das Diagramm und gibt alle zugehörigen Ressourcen frei. Rückgabetyp: Keine
|
Ereignisse
eventsConfig finden Sie konfigurierbare Ereignistrigger.| Name | |
|---|---|
onmouseover |
Wird ausgelöst, wenn der Nutzer den Mauszeiger auf einen Knoten bewegt Dem Ereignis-Handler wird der Zeilenindex des entsprechenden Eintrags in der Datentabelle übergeben. Attribute: Zeile
|
highlight (for v50+) |
Wird ausgelöst, wenn der Nutzer einen Knoten markiert. Der Standardtrigger ist Mouseover.
Er kann mit Attribute: Zeile
|
onmouseout |
Wird ausgelöst, wenn der Nutzer die Maus aus einem Knoten hinausbewegt Dem Ereignis-Handler wird der Zeilenindex des entsprechenden Eintrags in der Datentabelle übergeben. Attribute: Zeile
|
unhighlight (for v50+) |
Wird ausgelöst, wenn der Nutzer einen Knoten abhebt Der Standard-Trigger ist Mouseout.
Er kann mit Attribute: Zeile
|
ready |
Wird ausgelöst, wenn das Diagramm für Aufrufe externer Methoden bereit ist. Wenn Sie nach dem Zeichnen mit dem Diagramm und Aufrufmethoden interagieren möchten, sollten Sie einen Listener für dieses Ereignis einrichten, bevor Sie die Methode Eigenschaften:Keine
|
rollup |
Wird ausgelöst, wenn der Nutzer wieder nach oben durch den Baum navigiert Der Standardtrigger ist der Rechtsklick.
Er kann mit Attribute: Zeile
|
select |
Wird ausgelöst, wenn der Nutzer einen Drilldown oder einen Knoten durchführt. Wird auch ausgelöst, wenn die Methode Eigenschaften:Keine
|
drilldown (for v50+) |
Wird ausgelöst, wenn der Nutzer tiefer in den Baum navigiert Der Standardtrigger ist der Klick.
Sie kann mit Eigenschaften:Keine
|
Datenrichtlinie
Der gesamte Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet.