Omówienie
Wizualne przedstawienie drzewa danych, w którym każdy węzeł może mieć 0 lub więcej obiektów podrzędnych i 1 nadrzędny element (z wyjątkiem elementu głównego, który nie ma obiektów nadrzędnych). Każdy węzeł jest wyświetlany jako prostokąt, rozmiar i kolor zgodnie z przypisanymi przez Ciebie wartościami. Rozmiary i kolory są wyceniane w stosunku do wszystkich innych węzłów na wykresie. Możesz określić liczbę wyświetlanych poziomów jednocześnie, a także opcjonalnie wyświetlić bardziej szczegółowe poziomy. Jeśli węzeł jest węzłem liścia, możesz określić rozmiar i kolor. Jeśli nie jest to liść, będzie on 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ł po lewej stronie, oraz przejście z powrotem w górę, gdy użytkownik kliknie wykres prawym przyciskiem myszy.
Całkowity rozmiar wykresu zależy od rozmiaru elementu zawierającego stronę, który wstawisz na stronie. Jeśli masz węzły liścia z nazwami, które są zbyt długie, obcinamy wielokropek (...).
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>
Najciekawsze
Możesz określić, czy elementy mają być podświetlone, i ustawić konkretne kolory, których mają one używać. Aby włączyć wyróżnianie, ustaw highlightOnMouseOver:true (w wersji 49 lub starszej) lub enableHighlight: true (w wersji 50 lub nowszej).
Następnie możesz ustawić kolory do wyróżniania elementów za pomocą różnych opcji HighlightColor.
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 drzewa są podstawowe, wyświetlając etykietę komórki mapy drzewa. Jest to przydatne, gdy komórki są za małe, aby zmieścić się na etykietach, ale możesz je dostosować zgodnie z opisem w tej sekcji.
Etykietki drzewa są dostosowane w inny sposób niż inne wykresy: definiujesz funkcję, a następnie ustawiasz w niej opcję generateTooltip. Oto prosty przykład:
Na powyższym wykresie definiujemy funkcję o nazwie showStaticTooltip, która po prostu zwraca ciąg znaków z kodem HTML, który ma być wyświetlany, gdy użytkownik najedzie kursorem na komórkę mapy drzewa. Wypróbuj Kod do wygenerowania:
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>';
}
Funkcją generateTooltip może być dowolny kod JavaScript. Zwykle potrzebne są różne podpowiedzi w zależności od wartości danych. Poniższy przykład pokazuje, jak uzyskać dostęp do każdego pola w tabeli danych.
Gdy najedziesz kursorem na komórki w powyższej mapie drzewa, zobaczysz dla każdej z nich inną etykietkę. Funkcje etykietki drzewa korzystają z trzech wartości: row, size i value.
row: wiersz komórki z tabeli danychsize: suma wartości (kolumny 3) tej komórki i jej elementów podrzędnychvalue: kolor komórki wyrażony jako liczba od 0 do 1
W ciągu showFullTooltip zwracany ciąg znaków to pole HTML z 5 wierszami:
- Wiersz 1 zawiera odpowiedni wiersz z tabeli danych, zapewniając swobodę użycia
data.getValue. - Wiersz 2 informuje, który wiersz to tylko parametr
row. - Wiersz 3 zawiera informacje z kolumny 3 tabeli danych: suma wartości 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ść, ale 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. Każdy węzeł ma rozmiar i kolor zgodny z jego wartościami względem innych wyświetlonych obecnie węzłów.
Tabela danych powinna zawierać 4 kolumny w tym formacie:
- Kolumna 0 – [ciąg znaków] – identyfikator tego węzła. Może to być dowolny prawidłowy ciąg JavaScript, włącznie ze spacjami i dowolną długością ciągu znaków. 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 katalog główny na mapę drzewa.
- Kolumna 2 – [liczba] – rozmiar węzła. Dowolna wartość dodatnia jest dozwolona. Ta wartość określa rozmiar węzła, obliczony w porównaniu do wszystkich innych wyświetlonych obecnie węzłów. W przypadku węzłów innych niż liść ta wartość jest ignorowana i obliczana na podstawie rozmiaru wszystkich jej elementów podrzędnych.
- Kolumna 3 – [opcjonalna, liczba] – opcjonalna wartość używana do obliczania koloru tego węzła. Dopuszczalna jest każda wartość dodatnia lub ujemna.
Wartość koloru jest najpierw ponownie obliczana na skali od
minColorValuedomaxColorValue, a następnie do węzła przypisywany jest kolor z gradientu międzyminColoramaxColor.
Opcje konfiguracji
| Nazwa | |
|---|---|
| enablehighlight (w wersji 50 lub nowszej) |
Określa, czy elementy powinny wyświetlać wyróżnione efekty. Domyślną regułą jest przesunięcie kursora myszy.
Aktywator można skonfigurować za pomocą Typ: wartość logiczna
Wartość domyślna: false
|
| eventsConfig (wersja 50 i nowsze) |
Konfiguracja zdarzenia w celu wywołania interakcji z mapą drzewa. Format:
eventsConfig: {
interaction1: undefined, // or missing
interaction2: [], // disable
interaction3: [
'mouse_event',
'optional_key1',
'optional_key2',
'optional_key3',
'optional_key4'
],
...,
}
Jeśli w danej interakcji brakuje wartości „config” lub jest ona niezdefiniowana, zostanie użyta wartość default.
Jeśli konfiguracja to pusta tablica, interakcja zostanie wyłączona.
Aby konfiguracja była prawidłowa, pole
mouse_event jest wymagane i musi być obsługiwanym zdarzeniem myszy. Możesz mieć maksymalnie 4 opcjonalne modyfikatory klawiszy.
Przykład w celu przejścia na drzewo za pomocą kombinacji klawiszy Control + Shift + prawy_kliknięcie:
{ rollup: ['contextmenu', 'ctrlKey', 'shiftKey'] }Typ: obiekt
Domyślnie:
{
highlight: ['mouseover'],
unhighlight: ['mouseout'],
rollup: ['contextmenu'], // right-click
drilldown: ['click']
}
|
| czcionka |
Kolor tekstu. Podaj wartość koloru HTML. Typ: ciąg znaków
Wartość domyślna: #EmailAddress
|
| rodzina czcionek |
Rodzina czcionek, która ma być używana w przypadku całego tekstu. Typ: ciąg znaków
Ustawienie domyślne: automatyczne
|
| rozmiar czcionki |
Rozmiar czcionki całego tekstu w punktach. Typ: liczba
Wartość domyślna: 12
|
| forceIFrame |
Rysuje wykres wewnątrz wbudowanej ramki. (Pamiętaj, że ta opcja jest ignorowana w IE8 – wszystkie wykresy IE8 są ujęte w ramki iFrame). Typ: wartość logiczna
Wartość domyślna: false
|
| Kolor nagłówka |
Kolor sekcji nagłówka dla każdego węzła. Podaj wartość koloru HTML. Typ: ciąg znaków
Domyślne: #988f86
|
| wysokośćWysokość |
Wysokość sekcji nagłówka dla każdego węzła w pikselach (może wynosić zero). Numer typu
Wartość domyślna: 0
|
| KolorNagłówka |
Kolor nagłówka węzła, nad którym znajduje się wskaźnik myszy. Podaj wartość koloru HTML lub wartość null.
Jeśli wartość null będzie Typ: ciąg znaków
Domyślne: null
|
| highlightOnMyOver (wycofane dla wersji 50+) |
Wycofane w wersji 50 i nowszych. W wersji 50 i nowszych użyj Typ: wartość logiczna
Wartość domyślna: false
|
| WskazówkaOpacity |
Gdy parametr Typ: liczba
Wartość domyślna: 0,0
|
| maks.kolor |
Kolor prostokąta z wartością kolumny 3 w kolumnie Typ: ciąg znaków
Domyślne: #00dd00
|
| głębokość maks. |
Maksymalna liczba poziomów węzłów wyświetlanych w bieżącym widoku. Poziomy zostaną wyrównane do bieżącej platformy. Jeśli drzewo ma więcej poziomów, będzie trzeba je podnieść, aby je zobaczyć. Możesz też zobaczyć poniżej Typ: liczba
Wartość domyślna: 1
|
| maksymalna wartość koloru |
Kolor zaznaczenia używany w węźle z największą wartością w kolumnie 3. Określ wartość koloru HTML lub wartość null. Jeśli wartość to null, wartość Typ: ciąg znaków
Domyślne:null
|
| maksPostDepth |
Liczba poziomów węzłów poza Typ: liczba
Wartość domyślna: 0
|
| wartość maksymalna koloru |
Maksymalna wartość dozwolona w kolumnie 3. Wszystkie większe wartości zostaną przycięte do tej wartości. Jeśli zasada ma wartość null, zostaje ustawiona na wartość maksymalną. Typ: liczba
Domyślne:null
|
| środek koloru |
Kolor prostokąta z wartością w kolumnie 3 w połowie między Typ: ciąg znaków
Domyślne: #000000
|
| środek zaznaczenia |
Kolor zaznaczenia dla węzła z wartością kolumny 3 w pobliżu mediany Typ: ciąg znaków
Domyślne: null
|
| minColor |
Kolor prostokąta z wartością w kolumnie 3 w postaci Typ: ciąg znaków
Domyślne: #dd0000
|
| minHighlightColor |
Kolor zaznaczenia węzła, którego wartość w kolumnie 3 jest najbliższa wartości Typ: ciąg znaków
Domyślne:null
|
| minColorValue |
Minimalna wartość dopuszczalna w kolumnie 3. Wszystkie wartości mniejsze niż ta zostaną przycięte do tej wartości. Jeśli zasada ma wartość null, jest obliczana jako minimalna wartość w kolumnie. Typ: liczba
Domyślne:null
|
| brak koloru |
Kolor prostokąta używany, gdy węzeł nie ma wartości w kolumnie 3 i jest to liść (lub zawiera tylko liście). Podaj wartość koloru HTML. Typ: ciąg znaków
Domyślne: #000000
|
| brakWyróżnijKolor |
Kolor tła prostokąta na „nie” (podświetlony). Określ wartość koloru HTML lub wartość null. Jeśli wartość to null, wartość Typ: ciąg znaków
Domyślne:null
|
| showScale |
Określa, czy w górnej części wykresu ma być wyświetlana skala gradientu kolorów od Typ: wartość logiczna
Wartość domyślna: false
|
| wskazówki dotyczące narzędzi |
Określa, czy mają być wyświetlane podpowiedzi. Typ: wartość logiczna
Wartość domyślna: true
|
| Styl tekstu |
Obiekt, który określa styl tekstu dla niektórych wykresów zawierających tekst w obszarze treści, np. drzewo drzewa. Obiekt ma taki 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.
|
| stylTextTextStyle |
Obiekt określający styl tekstu tytułu. Obiekt ma taki 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>}
|
| użyj średniej wagi dla agregacji |
Określa, czy chcesz używać średnich wartości ważonych na potrzeby agregacji. Typ: wartość logiczna
Wartość domyślna: false
|
Metody
| Metoda | |
|---|---|
draw(data, options) |
Rysuje wykres. Typ zwrotu: brak
|
getEventsConfig() (for v50+) |
Zwraca bieżącą konfigurację interakcji. Można go użyć do zweryfikowania opcji konfiguracji Typ zwrotu: obiekt
{ // An empty array (i.e. []) means the interaction is disabled.
highlight: string[],
unhighlight: string[],
rollup: string[],
drilldown: string[] }
|
getSelection() |
Standardowa implementacja Typ zwrotu: tablica elementów wyboru.
|
setSelection() |
Standardowa implementacja Typ zwrotu: brak
|
goUpAndDraw() |
Przesuń drzewo w górę o jeden poziom i rysuj je ponownie. Nie powoduje 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. Typ zwrotu: brak
|
getMaxPossibleDepth() |
Zwraca maksymalną możliwą głębokość dla bieżącego widoku. Typ zwrotu: numer
|
clearChart() |
Czyści wykres i usuwa wszystkie przydzielone zasoby. Typ zwrotu: 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ślną regułą jest najechanie kursorem myszy.
Można ją skonfigurować w wersji Właściwości: wiersz
|
onmouseout |
Uruchamiane, gdy użytkownik opuści 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ślnym aktywatorem jest ruch kursora myszy.
Można ją skonfigurować w wersji Właściwości: wiersz
|
ready |
Uruchamiane, gdy wykres jest gotowy do wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywoływania po narysowaniu, musisz skonfigurować odbiornik tego zdarzenia przed wywołaniem metody Właściwości: brak
|
rollup |
Uruchamiane, gdy użytkownik cofnie się do drzewa. Reguła domyślna to kliknięcie prawym przyciskiem myszy.
Można ją skonfigurować w wersji Właściwości: wiersz
|
select |
Uruchamiane, gdy użytkownik zawęzi lub wywoła węzeł. Uruchamiany też przy wywołaniu metody Właściwości: brak
|
drilldown (for v50+) |
Uruchamiane, gdy użytkownik zagłębi się w drzewo. Domyślną regułą jest kliknięcie.
Można ją skonfigurować w środowisku 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 do żadnego serwera.