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 (...).
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 danych
size: suma wartości (kolumny 3) tej komórki i jej elementów podrzędnych
value: 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.
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 minColorValue do maxColorValue, a następnie do węzła przypisywany jest kolor z gradientu między minColor a maxColor.
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ą eventsConfig. Jeśli ma wartość true, wyróżnienie różnych elementów można określić za pomocą różnych opcji highlightColor.
Typ: wartość logiczna
Wartość domyślna: false
eventsConfig (wersja 50 i nowsze)
Konfiguracja zdarzenia w celu wywołania interakcji z mapą drzewa.
Format:
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.
Obsługiwane interakcje:
wyróżnić, odznaczyć, podsumowanie, przeanalizować
Obsługiwane zdarzenia myszy:
'click', 'contextmenu', 'dblclick', 'mouseout', 'mouseover'. Parametr 'contextmenu' odpowiada kliknięciu prawym przyciskiem.
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 headerColor zmniejszona o 35%.
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 enableHighlight.
Określa, czy po najechaniu kursorem elementy powinny wykazywać wyróżnione efekty. Jeśli ma wartość true, wyróżnienie różnych elementów można określić za pomocą różnych opcji highlightColor.
Typ: wartość logiczna
Wartość domyślna: false
WskazówkaOpacity
Gdy parametr maxPostDepth jest większy niż 1, co powoduje wyświetlanie węzłów poniżej bieżącej głębi, hintOpacity określa jego przezroczystość. Wartość powinna mieścić się w zakresie od 0 do 1. Im wyższa wartość, tym węższy węzeł.
Typ: liczba
Wartość domyślna: 0,0
maks.kolor
Kolor prostokąta z wartością kolumny 3 w kolumnie maxColorValue. Określ wartość koloru HTML.
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 maxPostDepth poziomów jako zacienione prostokąty w tych węzłach.
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ść maxColor zostanie zmniejszona o 35%.
Typ: ciąg znaków
Domyślne:null
maksPostDepth
Liczba poziomów węzłów poza maxDepth, które mają wyświetlać się w sposób podpowiedź.
Węzły zablokowane są wyświetlane jako zacienione prostokąty w węźle nieprzekraczającym limitu maxDepth.
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 maxColorValue a minColorValue. Podaj wartość koloru HTML.
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 minColorValue i maxColorValue. Podaj wartość koloru HTML lub wartość null. Jeśli wartość to null, wartość midColor zostanie zmniejszona o 35%.
Typ: ciąg znaków
Domyślne: null
minColor
Kolor prostokąta z wartością w kolumnie 3 w postaci minColorValue. Określ wartość koloru HTML.
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 minColorValue. Określ wartość koloru HTML lub wartość null. Jeśli wartość to null, będzie to wartość minColor jasna o 35%.
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ść noColor zostanie rozjaśniona o 35%.
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 minColor do maxColor. Określ wartość „true”, aby wyświetlać wagę.
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:
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 eventsConfig
Typ zwrotu: obiekt
{ // An empty array (i.e. []) means the interaction is disabled.
highlight: string[],
unhighlight: string[],
rollup: string[],
drilldown: string[] }
getSelection()
Standardowa implementacja getSelection(). Wybrane elementy to węzły. Możesz wybrać tylko jeden węzeł naraz.
Typ zwrotu: tablica elementów wyboru.
setSelection()
Standardowa implementacja setSelection(). Wybrane elementy to węzły. Możesz wybrać tylko jeden węzeł naraz.
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
Aby skonfigurować aktywatory zdarzeń, użyj 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 eventsConfig w wersji 50 lub nowszej. Moduł obsługi zdarzeń przekazuje indeks wiersza odpowiedniego wpisu w tabeli danych.
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 eventsConfig w wersji 50 lub nowszej. Moduł obsługi zdarzeń przekazuje indeks wiersza odpowiedniego wpisu w tabeli danych.
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 draw i wywołanie ich dopiero po uruchomieniu zdarzenia.
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 eventsConfig w wersji 50 lub nowszej. Właściwość wiersza przekazywana do modułu obsługi zdarzeń to wiersz węzła, z którego korzysta użytkownik, z , a nie wiersz, do którego przechodzi użytkownik.
Właściwości: wiersz
select
Uruchamiane, gdy użytkownik zawęzi lub wywoła węzeł. Uruchamiany też przy wywołaniu metody setSelection() lub goUpAndDraw().
Aby dowiedzieć się, który węzeł został wybrany, wywołaj getSelection().
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 eventsConfig w wersji 50 lub nowszej. Aby dowiedzieć się, który węzeł został kliknięty, wywołaj metodę getSelection().
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.