Diagramy

  1. Overview
  2. Przykład
  3. Najważniejsze dane
  4. Podpowiedzi
  5. Wczytuję
  6. Format danych
  7. Opcje konfiguracji
  8. Metody
  9. Zdarzenia
  10. Zasady dotyczące danych

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ędnych
  • value: 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 minColorValue do maxColorValue, a potem do węzła jest przypisywany kolor z gradientu między minColor a maxColor.

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 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: 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.
Obsługiwane interakcje:
wyróżnianie, usuwanie wyróżnienia, rozwijanie, przejście do bardziej szczegółowego widoku
Obsługiwane zdarzenia myszy:
'click', 'contextmenu', 'dblclick', 'mouseout', 'mouseover'. W przypadku wartości „contextmenu” odpowiada kliknięcie prawym przyciskiem myszy.
Obsługiwane klawisze modyfikujące zdarzenia myszy:
„altKey”, „ctrlKey”, „metaKey”, „shiftKey”.
Pobierz bieżącą konfigurację:
Metoda wywołania getEventsConfig().
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ść headerColor zostanie zmniejszona o 35%.

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 enableHighlight. Określa, czy po najechaniu kursorem myszy na elementy powinny być widoczne podświetlone 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: fałsz.
hintOpacity

Jeśli maxPostDepth ma wartość większą niż 1, co powoduje wyświetlanie węzłów poniżej obecnej głębokości, hintOpacity określa przezroczystość. Powinna mieścić się w zakresie od 0 do 1. Im wyższa wartość, tym jaśniejszy węzeł.

Typ: liczba
Wartość domyślna: 0,0
maxColor

Kolor prostokąta z kolumną 3 o wartości maxColorValue. Podaj wartość koloru HTML.

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 (maxPostDepth) w tych węzłach.

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ą maxColor porozjaśnioną o 35%.

Typ: ciąg znaków
Wartość domyślna:null
maxPostDepth

Liczba poziomów węzłów powyżej maxDepth, które mają być wyświetlane w sposób z podpowiedzią. Węzły z podpowiedzią są wyświetlane jako zacienione prostokąty wewnątrz węzła, który nie przekracza limitu maxDepth.

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 maxColorValue a minColorValue. Określ wartość koloru HTML.

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 minColorValue i maxColorValue. Podaj wartość koloru HTML lub null. Jeśli wartość jest null, będzie to wartość midColor rozjaśniona o 35%.

Typ: ciąg znaków
Wartość domyślna:null
minColor

Kolor prostokąta z wartością w kolumnie 3 równą minColorValue. Podaj wartość koloru HTML.

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 minColorValue. Określ wartość koloru HTML lub null. Jeśli wartość jest null, będzie ona wartością minColor rozjaśnioną o 35%.

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ść noColor rozjaśniona o 35%.

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 minColor do maxColor. Wybierz „true”, aby wyświetlić skalę.

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> }

color może być dowolnym ciągiem znaków HTML koloru, na przykład 'red' lub '#00cc00'. Zobacz też fontName i fontSize.

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> }

color może być dowolnym ciągiem znaków HTML koloru, na przykład 'red' lub '#00cc00'. Zobacz też fontName i fontSize.

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 eventsConfig

Typ zwrotu: Object
{ // An empty array (i.e. []) means the interaction is disabled.
  highlight: string[],
  unhighlight: string[],
  rollup: string[],
  drilldown: string[] }
getSelection()

Implementacja standardowa getSelection(). Wybrane elementy są węzłami. Można wybrać tylko 1 węzeł naraz.

Return Type: tablica elementów zaznaczenia.
setSelection()

Implementacja standardowa setSelection(). Wybrane elementy są węzłami. Można wybrać tylko 1 węzeł naraz.

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

Więcej informacji o konfigurowalnych aktywatorach zdarzeń: 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ą eventsConfig w wersji 50 i nowszych. Moduł obsługi zdarzeń jest przekazywany do indeksu wiersza odpowiedniego wpisu w tabeli danych.

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ą eventsConfig w wersji 50 i nowszych. Moduł obsługi zdarzeń jest przekazywany do indeksu wiersza odpowiedniego wpisu w tabeli danych.

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 draw i wywołaj je dopiero po wywołaniu zdarzenia.

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ą eventsConfig w wersji 50 i nowszych. Właściwość wiersza przekazywana do modułu obsługi zdarzeń to wiersz węzła, z którego przekierowuje się użytkownik, a nie wiersz, do którego przekierowuje się użytkownik.

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 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 przejdzie w głąb drzewa. Domyślna reguła to kliknięcie. Można go skonfigurować za pomocą eventsConfig w wersji 50 i nowszych. Aby dowiedzieć się, który węzeł został kliknięty, wywołaj 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 na żaden serwer.