Übersicht
Eine visuelle Darstellung einer Datenstruktur, bei der jeder Knoten null oder mehr untergeordnete und ein übergeordnetes Element haben kann (außer dem Stamm, der keine übergeordneten Elemente hat). Jeder Knoten wird als Rechteck angezeigt. Die Größe und Farbe entsprechen den von Ihnen zugewiesenen Werten. Größen und Farben werden relativ zu allen anderen Knoten im Diagramm bewertet. Sie können angeben, wie viele Ebenen gleichzeitig angezeigt werden sollen, und optional auch tiefere Ebenen mit Hinweisen einblenden lassen. Wenn ein Knoten ein Blattknoten ist, können Sie eine Größe und Farbe angeben. Ist es kein Blattknoten, wird er als Begrenzungsrahmen für Blattknoten angezeigt. Das Standardverhalten besteht darin, sich in der Baumstruktur nach unten zu bewegen, wenn ein Nutzer mit der linken Maustaste auf einen Knoten klickt, und wieder nach oben, wenn ein Nutzer mit der rechten Maustaste auf die Grafik klickt.
Die Gesamtgröße der Grafik wird durch die Größe des enthaltenden Elements bestimmt, das Sie in Ihre Seite einfügen. Wenn Blattknoten mit zu langen Namen zum Anzeigen vorhanden sind, wird der Name mit Auslassungspunkten (...) 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, die in diesem Fall verwendet werden sollen. Um die Hervorhebung zu aktivieren, lege highlightOnMouseOver:true (ab Version 49) oder enableHighlight: true (ab Version 50) fest. Anschließend kannst du mit den 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 Kurzinfos zur Strukturkarte einfach und enthalten das Label der Zelle mit Strukturkarte. Dies ist nützlich, wenn die Zellen zu klein für die Beschriftungen sind. Sie können sie jedoch wie in diesem Abschnitt beschrieben weiter anpassen.
Kurzinfos zu Strukturkarten werden anders als andere Diagramme angepasst: 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 namens showStaticTooltip, die einfach einen String mit HTML-Code zurückgibt, der angezeigt werden soll, wenn der Nutzer den Mauszeiger auf eine Strukturkartenzelle bewegt. Jetzt testen Der zu generierende Code lautet:
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>';
}
Für die generateTooltip-Funktion kann ein beliebiger JavaScript-Code verwendet werden. Normalerweise sind Kurzinfos erforderlich, die je nach Datenwerten variieren. Das folgende Beispiel zeigt, wie Sie auf die einzelnen Felder in der Datentabelle zugreifen.
Wenn Sie den Mauszeiger auf die Zellen in der obigen Strukturkarte bewegen, wird für jede Zelle eine andere Kurzinfo angezeigt. Die Funktionen für die Kurzinfo zur Strukturkarte verwenden alle drei Werte: row, size und value.
row: die Zeile der Zelle aus der Datentabellesize: die Summe des Werts (Spalte 3) dieser Zelle und aller untergeordneten Zellenvalue: die Farbe der Zelle, ausgedrückt als Zahl von 0 bis 1
In showFullTooltip wird ein HTML-Feld mit fünf Zeilen zurückgegeben:
- Zeile 1 zeigt die entsprechende Zeile aus der Datentabelle, wobei
data.getValuefrei genutzt wird. - Zeile 2 gibt an, um welche Zeile es sich handelt. Dabei handelt es sich lediglich um den Parameter
row. - Zeile 3 enthält Informationen aus Spalte 3 der Datentabelle: die Summe des Werts von Spalte 3 aus dieser Zeile plus die Werte aus Nachfolgerelementen.
- Zeile 4 enthält Informationen aus Spalte 4 der Datentabelle. Es ist der Wert, wird jedoch 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 „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. Größe und Farbe der einzelnen Knoten werden entsprechend ihren Werten relativ zu den anderen derzeit angezeigten Knoten angepasst.
Die Datentabelle sollte vier Spalten im folgenden Format haben:
- Spalte 0: [string] Eine ID für diesen Knoten. Er kann ein beliebiger gültiger JavaScript-String sein, einschließlich Leerzeichen, und eine beliebige Länge, die ein String enthalten kann. Dieser Wert wird als Knotenheader angezeigt.
- Spalte 1: [String]: Die 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: [Zahl]: Die Größe des Knotens. Jeder positive Wert ist zulässig. Dieser Wert bestimmt die Größe des Knotens, berechnet relativ zu allen anderen derzeit angezeigten Knoten. Bei Nicht-Blattknoten wird dieser Wert ignoriert und aus der Größe aller untergeordneten Knoten berechnet.
- Spalte 3: [optional, Zahl]: Ein optionaler Wert, mit dem eine Farbe für diesen Knoten berechnet wird. Jeder Wert, ob positiv oder negativ, ist zulässig.
Der Farbwert wird zuerst anhand einer Skala von
minColorValuebismaxColorValueneu berechnet und dann wird dem Knoten eine Farbe aus dem Farbverlauf zwischenminColorundmaxColorzugewiesen.
Konfigurationsoptionen
| Name | |
|---|---|
| EnableHighlight (für Version 50 und höher) |
Legt fest, ob für Elemente hervorgehobene Effekte angezeigt werden sollen. Der Standardtrigger wird ausgelöst, wenn die Maus darüber bewegt wird.
Der Trigger kann mit Typ: Boolesch
Standard: false
|
| eventConfig (für Version 50 und höher) |
Die Ereigniskonfiguration zum Auslösen von Baumkarteninteraktionen. 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 sind bis zu vier optionale Tastenmodifikatoren möglich.
Beispiel, wie Sie mit Strg + Umschalttaste + Rechtsklick in der Baumstruktur nach oben gehen:
{ rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] }Typ:Objekt
Standard:
{
highlight: ['mouseover'],
unhighlight: ['mouseout'],
rollup: ['contextmenu'], // right-click
drilldown: ['click']
}
|
| fontColor |
Die Textfarbe. Geben Sie einen HTML-Farbwert an. Typ: String
Standard: #ffffff
|
| fontFamily |
Die Schriftfamilie, die für den gesamten Text verwendet werden soll. Typ: String
Standard:automatisch
|
| fontSize |
Die Schriftgröße des gesamten Textes in Punkten. Typ:Zahl
Standard: 12
|
| forceIFrame |
Zeichnet das Diagramm in einem Inline-Frame. (Beachten Sie, dass diese Option in IE8 ignoriert wird; alle IE8-Diagramme werden in iFrames gezeichnet.) Typ: Boolesch
Standard: false
|
| headerColor |
Die Farbe des Headerbereichs für jeden Knoten. Geben Sie einen HTML-Farbwert an. Typ: String
Standard: #988f86
|
| headerHeight |
Die Höhe des Kopfzeilenbereichs für jeden Knoten in Pixeln (kann null sein). Typ: Zahl
Standard: 0
|
| headerHighlightColor |
Die Farbe des Headers eines Knotens, über den der Mauszeiger bewegt wird. Geben Sie einen HTML-Farbwert oder null an. Wenn dieser Wert null ist, wird dieser Wert Typ: String
Standard:null
|
| highlightOnMouseOver (eingestellt für Version 50 und höher) |
Eingestellt für v50 und höher. Verwenden Sie für v50 und höher Typ: Boolesch
Standard: false
|
| hintOpacity |
Wenn Typ:Zahl
Standard: 0,0
|
| maxColor |
Die Farbe für ein Rechteck mit dem Wert Typ: String
Standard: #00dd00
|
| maxDepth |
Die maximale Anzahl der Knotenebenen, die in der aktuellen Ansicht angezeigt werden. Die Ebenen werden auf die aktuelle Ebene reduziert. Wenn Ihr Baum mehr Ebenen hat, müssen Sie nach oben oder unten gehen, um sie zu sehen. Darüber hinaus werden darunter Typ:Zahl
Standard: 1
|
| maxHighlightColor |
Die Hervorhebungsfarbe, die für den Knoten mit dem größten Wert in Spalte 3 verwendet werden soll. Geben Sie einen HTML-Farbwert oder null an. Wenn der Wert null ist, ist dieser Wert der um 35 % aufgehellte Wert von Typ: String
Standard:null
|
| maxPostDepth |
Legt fest, wie viele Knotenebenen ab Typ:Zahl
Standard: 0
|
| maxColorValue |
Der in Spalte 3 zulässige Höchstwert. Alle größeren Werte werden auf diesen Wert gekürzt. Wenn der Wert auf null gesetzt ist, wird er auf den Maximalwert in der Spalte gesetzt. Typ:Zahl
Standard:null
|
| midColor |
Die Farbe für ein Rechteck mit einem Wert aus Spalte 3 in der Mitte zwischen Typ: String
Standard: #000000
|
| midHighlightColor |
Die Hervorhebungsfarbe, die für den Knoten mit einem Wert aus Spalte 3 nahe dem Medianwert von Typ: String
Standard:null
|
| minColor |
Die Farbe für ein Rechteck mit dem Wert aus Spalte 3 von Typ: String
Standard: #dd0000
|
| minHighlightColor |
Die Hervorhebungsfarbe, die für den Knoten verwendet werden soll, wobei der Wert in Spalte 3 dem Wert Typ: String
Standard:null
|
| minColorValue |
Der in Spalte 3 zulässige Mindestwert Alle Werte, die darunter liegen, werden auf diesen Wert gekürzt. Wenn dieser Wert auf null gesetzt ist, wird er als Minimalwert in der Spalte berechnet. Typ:Zahl
Standard:null
|
| noColor |
Die Farbe, die für ein Rechteck verwendet werden soll, wenn ein Knoten keinen Wert für Spalte 3 hat und dieser Knoten 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 hervorgehobenes Rechteck mit der Farbe „Nein“ verwendet werden soll. Geben Sie einen HTML-Farbwert oder null an. Wenn dieser Wert null ist, ist dies der um 35 % aufgehellte Wert von Typ: String
Standard:null
|
| showScale |
Gibt an, ob oben im Diagramm ein Farbverlauf von Typ: Boolesch
Standard: false
|
| showTooltips |
Gibt an, ob Kurzinfos angezeigt werden. Typ: Boolesch
Standardeinstellung:true
|
| textStyle |
Ein Objekt, das den Textstil bei bestimmten Diagrammen mit Text im Inhaltsbereich angibt, z. B. in der Strukturkarte. Das Objekt hat folgendes Format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Typ:Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| Titel |
Text, der über dem Diagramm angezeigt werden soll. Typ: String
Standard: kein Titel
|
| titleTextStyle |
Ein Objekt, das den Textstil für den Titel angibt. Das Objekt hat folgendes Format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Typ:Objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| useWeightedAverageForAggregation |
Gibt an, ob für die Aggregation gewichtete Durchschnittswerte verwendet werden sollen. Typ: Boolesch
Standard: false
|
Methoden
| Methode | |
|---|---|
draw(data, options) |
Zeichnet das Diagramm. Return Type: Kein
|
getEventsConfig() (for v50+) |
Gibt die aktuelle Interaktionskonfiguration zurück. Damit 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 von Rückgabetyp:Array von Auswahlelementen
|
setSelection() |
Standardimplementierung von Return Type: Kein
|
goUpAndDraw() |
Bewegen Sie den Baum um eine Ebene nach oben und zeichnen Sie ihn neu. Gibt keinen Fehler aus, wenn der Knoten der Stammknoten ist. Dieses Ereignis wird automatisch ausgelöst, wenn der Nutzer mit der rechten Maustaste auf einen Knoten klickt. Return Type: Kein
|
getMaxPossibleDepth() |
Gibt die maximal mögliche Tiefe für die aktuelle Ansicht zurück. Rückgabetyp: Zahl
|
clearChart() |
Löscht das Diagramm und gibt alle zugewiesenen Ressourcen frei. Return Type: Kein
|
Ereignisse
eventsConfig.| Name | |
|---|---|
onmouseover |
Wird ausgelöst, wenn der Nutzer den Mauszeiger auf einen Knoten bewegt. Dem Event-Handler wird der Zeilenindex des entsprechenden Eintrags in der Datentabelle übergeben. Eigenschaften: Zeile
|
highlight (for v50+) |
Wird ausgelöst, wenn der Nutzer einen Knoten markiert. Der Standardtrigger ist „Mouseover“.
Er kann ab Version 50 mit Eigenschaften: Zeile
|
onmouseout |
Wird ausgelöst, wenn der Nutzer den Mauszeiger aus einem Knoten herausbewegt. Dem Event-Handler wird der Zeilenindex des entsprechenden Eintrags in der Datentabelle übergeben. Eigenschaften: Zeile
|
unhighlight (for v50+) |
Wird ausgelöst, wenn der Nutzer die Markierung eines Knotens entfernt. Der Standardtrigger ist „Mouseout“.
Er kann ab Version 50 mit Eigenschaften: Zeile
|
ready |
Wird ausgelöst, wenn das Diagramm für Aufrufe externer Methoden bereit ist Wenn Sie mit dem Diagramm interagieren und Methoden aufrufen möchten, nachdem Sie es gezeichnet haben, sollten Sie vor dem Aufruf der Methode Eigenschaften: Keine
|
rollup |
Wird ausgelöst, wenn der Nutzer in der Baumstruktur wieder nach oben navigiert Der Standardtrigger ist der Rechtsklick.
Sie kann für Version 50 und höher mit Eigenschaften: Zeile
|
select |
Wird ausgelöst, wenn der Nutzer eine Aufschlüsselung oder ein Rollup eines Knotens durchführt. Wird auch ausgelöst, wenn die Methode Properties:keine
|
drilldown (for v50+) |
Wird ausgelöst, wenn der Nutzer in die Baumstruktur geht Der Standardtrigger ist „Klick“.
Er kann ab Version 50 mit Properties:keine
|
Datenrichtlinie
Sämtlicher Code und alle Daten werden im Browser verarbeitet und gerendert. Es werden keine Daten an einen Server gesendet.