Omówienie
Wizualna reprezentacja drzewa danych, w którym każdy węzeł może mieć 0 lub więcej elementów podrzędnych oraz 1 element nadrzędny (z wyjątkiem węzła nadrzędnego, który nie ma elementów nadrzędnych). Każdy węzeł jest wyświetlany jako prostokąt o rozmiarze i kolorze zgodnie z przypisanymi przez Ciebie wartościami. Rozmiary i kolory są określone w odniesieniu do wszystkich innych węzłów na wykresie. Możesz określić liczbę poziomów, które mają być wyświetlane jednocześnie, a opcjonalnie wyświetlać kolejne poziomy z użyciem podpowiedzi. Jeśli węzeł jest węzłem liściowym, możesz określić rozmiar i kolor. Jeśli nie jest to liść, będzie wyświetlany jako ramka ograniczająca węzły liścia. Domyślnym zachowaniem jest przesunięcie drzewa w dół, gdy użytkownik kliknie węzeł lewym przyciskiem myszy, oraz przejście z powrotem w górę drzewa, gdy użytkownik kliknie wykres prawym przyciskiem myszy.
Całkowity rozmiar wykresu zależy od rozmiaru zawierającego go elementu, który wstawisz na stronie. Jeśli masz węzły liściowe o nazwach, które są zbyt długie do wyświetlenia, nazwa zostanie obcięta wielokropkiem (...).
Przykład
<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>
Najważniejsze informacje
Możesz określić, czy elementy mają być wyróżniane, a także ustawić dla nich konkretne kolory, które będą używane w takim przypadku. Aby włączyć wyróżnianie, ustaw highlightOnMouseOver:true (wersja 49 i starsze) lub enableHighlight: true (wersja 50 i nowsze). Za pomocą różnych opcji HighlightColor możesz ustawić kolory do wyróżniania elementów.
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'],
}
};
Wskazówki
Domyślnie etykietki diagramu są podstawowe i wyświetlają etykietę komórki mapy. Jest to przydatne, gdy komórki są zbyt małe, aby zmieścić etykiety, ale możesz je dostosować w sposób opisany w tej sekcji.
Etykietki diagramów można dostosowywać w inny sposób niż inne wykresy – definiuje się funkcję, a następnie ustawiasz dla niej opcję generateTooltip. Oto prosty przykład:
Na powyższym wykresie definiujemy funkcję o nazwie showStaticTooltip, która zwraca ciąg znaków z kodem HTML, który jest wyświetlany, gdy użytkownik najedzie kursorem na komórkę diagramu. Wypróbuj Kod do wygenerowania, który będzie wyglądać tak:
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>';
}
Funkcja generateTooltip może być dowolnym JavaScriptem. Zwykle potrzebne są etykietki, które różnią się w zależności od wartości danych. Z przykładu poniżej dowiesz się, jak uzyskać dostęp do każdego pola w tabeli danych.
Po najechaniu kursorem na komórki na powyższym diagramie zobaczysz inną etykietkę dla każdej komórki. Funkcje etykietki mapy drzewa mają 3 wartości: row, size i value.
row: wiersz komórki z tabeli danych,size: suma wartości (kolumna 3) tej komórki i wszystkich jej elementów podrzędnychvalue: kolor komórki wyrażony za pomocą liczby od 0 do 1.
W polu showFullTooltip zwracany przez nas ciąg to pole HTML z pięcioma wierszami:
- Wiersz 1 pokazuje odpowiedni wiersz z tabeli danych, wykorzystując w pełni funkcję
data.getValue. - Wiersz 2 informuje o tym, który z nich jest parametrem
row. - Wiersz 3 zawiera informacje z kolumny 3 tabeli danych: suma wartości z kolumny 3 z tego wiersza oraz wartości z elementów podrzędnych.
- Wiersz 4 zawiera informacje z kolumny 4 tabeli danych. Jest to wartość wyrażona jako liczba z zakresu od 0 do 1 odpowiadająca kolorowi komórki.
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>';
}
}
Wczytuję
Nazwa pakietu google.charts.load to "treemap".
google.charts.load("current", {packages: ["treemap"]});
Nazwa klasy wizualizacji to google.visualization.TreeMap.
var visualization = new google.visualization.TreeMap(container);
Format danych
Każdy wiersz w tabeli danych opisuje jeden węzeł (prostokąt na wykresie). Każdy węzeł (z wyjątkiem węzła głównego) ma 1 węzeł nadrzędny. Rozmiar i kolor każdego węzła jest ustalane na podstawie jego wartości w odniesieniu do innych węzłów widocznych obecnie.
Tabela danych powinna mieć cztery kolumny w następującym formacie:
- Kolumna 0 – [ciąg znaków] identyfikator tego węzła. Może to być dowolny prawidłowy ciąg JavaScript (w tym spacje) i dowolna jego długość. Ta wartość jest wyświetlana jako nagłówek węzła.
- Kolumna 1 – [ciąg znaków] – identyfikator węzła nadrzędnego. Jeśli jest to węzeł główny, pozostaw to pole puste. Dozwolony jest tylko 1 poziom katalogu na diagramie.
- Kolumna 2 – [liczba] – rozmiar węzła. Dozwolone są wszystkie wartości dodatnie. Ta wartość określa rozmiar węzła obliczany w odniesieniu do wszystkich innych węzłów, które są aktualnie wyświetlane. W przypadku węzłów innych niż liście ta wartość jest ignorowana i obliczana na podstawie rozmiaru wszystkich jej elementów podrzędnych.
- Kolumna 3 – [opcjonalny, liczba] – opcjonalna wartość używana do obliczenia koloru dla tego węzła. Dozwolone są wszystkie wartości, zarówno dodatnie, jak i ujemne.
Wartość koloru jest najpierw obliczana ponownie na skali od
minColorValuedomaxColorValue, a potem do węzła jest przypisywany kolor z gradientu międzyminColoramaxColor.
Opcje konfiguracji
| Nazwa | |
|---|---|
| enabledWyróżnij (wersja 50 i nowsze) |
Określa, czy w elementach powinny być widoczne wyróżnione efekty. Domyślnym wyzwalaczem jest najechanie kursorem myszy na reklamę.
Aktywator można skonfigurować za pomocą parametru Typ: wartość logiczna
Wartość domyślna: fałsz.
|
| eventConfig (dla wersji 50 i nowszych) |
Konfiguracja zdarzenia aktywująca interakcje z mapą drzewa. Format do konfigurowania interakcji:
eventsConfig: {
interaction1: undefined, // or missing
interaction2: [], // disable
interaction3: [
'mouse_event',
'optional_key1',
'optional_key2',
'optional_key3',
'optional_key4'
],
...,
}
Jeśli tablica konfiguracji jest niezdefiniowana lub brakuje jej w przypadku interakcji, używana jest wartość default.
Jeśli konfiguracja jest pustą tablicą, interakcja zostanie wyłączona.
Prawidłowa konfiguracja wymaga parametru
mouse_event, który musi być obsługiwanym zdarzeniem myszy. Następnie możesz dodać maksymalnie 4 opcjonalne modyfikatory klawiszy.
Przykład użycia kombinacji klawiszy Control + Shift + Right_Click, aby przejść w górę drzewa:
{ rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] }Typ: obiekt
Domyślnie:
{
highlight: ['mouseover'],
unhighlight: ['mouseout'],
rollup: ['contextmenu'], // right-click
drilldown: ['click']
}
|
| fontColor |
Kolor tekstu. Określ wartość koloru HTML. Typ: ciąg znaków
Wartość domyślna: #####
|
| fontFamily |
Rodzina czcionek, która będzie używana w przypadku całego tekstu. Typ: ciąg znaków
Domyślnie automatycznie
|
| fontSize |
Rozmiar czcionki całego tekstu (w punktach). Typ: liczba
Wartość domyślna: 12
|
| forceIFrame |
Rysuje wykres wewnątrz ramki wbudowanej. (Pamiętaj, że w IE8 ta opcja jest ignorowana – wszystkie wykresy w IE8 są rysowane w ramkach i-frame). Typ: wartość logiczna
Wartość domyślna: fałsz.
|
| headerColor |
Kolor sekcji nagłówka każdego węzła. Określ wartość koloru HTML. Typ: ciąg znaków
Wartość domyślna: #988f86
|
| headerHeight |
Wysokość sekcji nagłówka każdego węzła w pikselach (może wynosić zero). Wpisz numer
Wartość domyślna: 0
|
| headerHighlightColor |
Kolor nagłówka węzła, na który najeżdżany kursorem. Określ wartość koloru HTML lub null. Jeśli ma wartość null, wartość Typ: ciąg znaków
Wartość domyślna:null
|
| wyróżnijOnMouseOver (wycofane w wersji 50 i nowszych) |
Wycofano w wersji 50 i nowszych. W wersji 50 i nowszych użyj Typ: wartość logiczna
Wartość domyślna: fałsz.
|
| hintOpacity |
Jeśli Typ: liczba
Wartość domyślna: 0,0
|
| maxColor |
Kolor prostokąta z kolumną 3 o wartości Typ: ciąg znaków
Wartość domyślna: #00dd00
|
| maxDepth |
Maksymalna liczba poziomów węzłów wyświetlanych w bieżącym widoku. Poziomy zostaną rozmieszczone na bieżącą płaszczyznę. Jeśli Twoje drzewo ma więcej poziomów, musisz przesuwać się w górę lub w dół, aby je zobaczyć. Pod nim mogą być dodatkowo widoczne zacienione prostokąty ( Typ: liczba
Wartość domyślna: 1
|
| maxHighlightColor |
Kolor wyróżnienia węzła z największą wartością w kolumnie 3. Określ wartość koloru HTML lub null. Jeśli ma wartość null, ta wartość będzie wartością Typ: ciąg znaków
Wartość domyślna:null
|
| maxPostDepth |
Liczba poziomów węzłów powyżej Typ: liczba
Wartość domyślna: 0
|
| maxColorValue |
Maksymalna wartość dozwolona w kolumnie 3. Wszystkie wartości większe od tej wartości zostaną skrócone do tej wartości. Jeśli ma wartość null, zostanie ustawiona maksymalna wartość w kolumnie. Typ: liczba
Wartość domyślna:null
|
| midColor |
Kolor prostokąta z wartością w kolumnie 3 pośrodku między Typ: ciąg znaków
Wartość domyślna: #000000
|
| midHighlightColor |
Kolor wyróżnienia używany w przypadku węzła z wartością kolumny 3 blisko mediany wartości Typ: ciąg znaków
Wartość domyślna:null
|
| minColor |
Kolor prostokąta z wartością w kolumnie 3 równą Typ: ciąg znaków
Wartość domyślna: #dd0000
|
| minHighlightColor |
Kolor wyróżnienia dla węzła, którego wartość w kolumnie 3 jest najbliższa wartości Typ: ciąg znaków
Wartość domyślna:null
|
| minColorValue |
Minimalna wartość dozwolona w kolumnie 3. Wszystkie wartości mniejsze od tego zostaną przycięte do tej wartości. Jeśli ma wartość null, jest ona obliczana jako minimalna wartość w kolumnie. Typ: liczba
Wartość domyślna:null
|
| noColor |
Kolor dla prostokąta, który ma być używany, gdy węzeł nie ma wartości w kolumnie 3, a ten węzeł jest liściem (lub zawiera tylko liście). Określ wartość koloru HTML. Typ: ciąg znaków
Wartość domyślna: #000000
|
| noHighlightColor |
Kolor używany w przypadku podświetlonego prostokąta z wartością „brak”. Podaj wartość koloru HTML lub pustą wartość null. Jeśli ma wartość null, będzie to wartość Typ: ciąg znaków
Wartość domyślna:null
|
| showScale |
Określa, czy u góry wykresu ma wyświetlać się skala gradientu kolorów od Typ: wartość logiczna
Wartość domyślna: fałsz.
|
| showTooltips |
Określa, czy etykietki mają być wyświetlane. Typ: wartość logiczna
Wartość domyślna:true (prawda)
|
| textStyle |
Obiekt określający styl tekstu w przypadku niektórych wykresów zawierających tekst, np. diagramu. Obiekt ma ten format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Typ: obiekt
Domyślnie:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| tytuł |
Tekst do wyświetlenia nad wykresem. Typ: ciąg znaków
Domyślnie bez tytułu.
|
| titleTextStyle |
Obiekt, który określa styl tekstu tytułu. Obiekt ma ten format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Typ: obiekt
Domyślnie:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| useWeightedAverageForAggregation |
Określa, czy do agregacji należy używać średnich ważonych. Typ: wartość logiczna
Wartość domyślna: fałsz.
|
Metody
| Metoda | |
|---|---|
draw(data, options) |
Rysuje wykres. Return Type: brak
|
getEventsConfig() (for v50+) |
Zwraca bieżącą konfigurację interakcji. Możesz go użyć do zweryfikowania opcji konfiguracji Typ zwrotu: Object
{ // An empty array (i.e. []) means the interaction is disabled.
highlight: string[],
unhighlight: string[],
rollup: string[],
drilldown: string[] }
|
getSelection() |
Implementacja standardowa Return Type: tablica elementów zaznaczenia.
|
setSelection() |
Implementacja standardowa Return Type: brak
|
goUpAndDraw() |
Przesuń drzewo o jeden poziom i narysuj je ponownie. Nie zgłasza błędu, jeśli węzeł jest węzłem głównym. Jest on uruchamiany automatycznie, gdy użytkownik kliknie węzeł prawym przyciskiem myszy. Return Type: brak
|
getMaxPossibleDepth() |
Zwraca maksymalną możliwą głębokość dla bieżącego widoku. Return Type: (Typ zwrotu): liczba
|
clearChart() |
Czyści wykres i zwalnia wszystkie przydzielone Ci zasoby. Return Type: brak
|
Zdarzenia
eventsConfig.| Nazwa | |
|---|---|
onmouseover |
Uruchamiane, gdy użytkownik najedzie kursorem na węzeł. Moduł obsługi zdarzeń przekazuje indeks wiersza odpowiedniego wpisu w tabeli danych. Właściwości: wiersz
|
highlight (for v50+) |
Uruchamiane, gdy użytkownik podświetli węzeł. Domyślna reguła to najechanie kursorem myszy.
Można ją skonfigurować za pomocą Właściwości: wiersz
|
onmouseout |
Uruchamiane, gdy użytkownik wyjedzie poza węzeł. Moduł obsługi zdarzeń przekazuje indeks wiersza odpowiedniego wpisu w tabeli danych. Właściwości: wiersz
|
unhighlight (for v50+) |
Uruchamiane, gdy użytkownik odznaczy węzeł. Domyślna reguła to wyjechanie kursorem poza reklamę.
Można ją skonfigurować za pomocą Właściwości: wiersz
|
ready |
Uruchamiane, gdy wykres jest gotowy do użycia w wywołaniach metod zewnętrznych. Jeśli po jego narysowaniu chcesz korzystać z wykresu i metod wywołań, skonfiguruj detektor tego zdarzenia przed wywołaniem metody Właściwości: brak
|
rollup |
Uruchamiane, gdy użytkownik przejdzie z powrotem w górę drzewa. Domyślna reguła to kliknięcie prawym przyciskiem myszy.
Można ją skonfigurować za pomocą Właściwości: wiersz
|
select |
Uruchamiane, gdy użytkownik przejdzie do bardziej szczegółowego widoku lub podniesie węzeł. Wywoływany również w przypadku wywołania metody Właściwości: brak
|
drilldown (for v50+) |
Uruchamiane, gdy użytkownik przejdzie w głąb drzewa. Domyślna reguła to kliknięcie.
Można go skonfigurować za pomocą Właściwości: brak
|
Zasady dotyczące danych
Cały kod i dane są przetwarzane i renderowane w przeglądarce. Żadne dane nie są wysyłane na żaden serwer.