Wykres adnotacji

  1. Przegląd
  2. Przykład
  3. Wczytuję
  4. Format danych
  5. Opcje konfiguracji
  6. Metody
  7. Zdarzenia
  8. Zasady dotyczące danych
  9. Uwagi

Omówienie

Wykresy adnotacji to interaktywne wykresy liniowe serii czasowej, które obsługują adnotacje. Zwróć uwagę, że oś czasu z adnotacjami automatycznie korzysta z wykresu adnotacji.

Alert pomyłek: obecnie wykres adnotacji Google różni się od adnotacji obsługiwanych przez inne wykresy Google (obecnie: wykres warstwowy, słupkowy, kolumnowy, mieszany, wiersz i punktowy). Na tych wykresach adnotacje są określane w osobnej kolumnie tabeli danych i wyświetlane jako krótkie fragmenty tekstu, które użytkownicy mogą najeżdżać kursorem, aby zobaczyć cały tekst adnotacji. Z kolei na wykresie po prawej stronie wyświetlane są pełne adnotacje, tak jak poniżej.

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':['annotationchart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Kepler-22b mission');
        data.addColumn('string', 'Kepler title');
        data.addColumn('string', 'Kepler text');
        data.addColumn('number', 'Gliese 163 mission');
        data.addColumn('string', 'Gliese title');
        data.addColumn('string', 'Gliese text');
        data.addRows([
          [new Date(2314, 2, 15), 12400, undefined, undefined,
                                  10645, undefined, undefined],
          [new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter',
                                  12374, undefined, undefined],
          [new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall',
                                  15766, 'Gallantors', 'First Encounter'],
          [new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!',
                                  34334, 'Gallantors', 'Statement of shared principles'],
          [new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties',
                                  66467, 'Gallantors', 'Mysteries revealed'],
          [new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost',
                                  79463, 'Gallantors', 'Omniscience achieved']
        ]);

        var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));

        var options = {
          displayAnnotations: true
        };

        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <div id='chart_div' style='width: 900px; height: 600px;'></div>
  </body>
</html>

Wczytuję

Nazwa pakietu google.charts.load to "annotationchart".

  google.charts.load("current", {packages: ['annotationchart']});

Nazwa klasy wizualizacji to google.visualization.AnnotationChart.

  var visualization = new google.visualization.AnnotationChart(container);

Format danych

Na wykresie możesz wyświetlać jedną lub więcej linii. Każdy wiersz reprezentuje X na wykresie – to określony czas. Każdy wiersz jest określany w zbiorze od 1 do 3 kolumn.

  • Pierwsza kolumna zawiera typ date lub datetime i określa wartość X punktu na wykresie. Jeśli ta kolumna zawiera typ date (a nie datetime), najmniejsza rozdzielczość na osi X to 1 dzień.
  • Każdy wiersz danych jest następnie opisywany przez zestaw od 1 do 3 dodatkowych kolumn w sposób opisany poniżej:
    • Wartość Y – [wymagany, liczba]: pierwsza kolumna w każdym zestawie opisuje wartość wiersza w odpowiednim czasie od pierwszej kolumny. Etykieta kolumny jest wyświetlana na wykresie jako tytuł tego wiersza.
    • Tytuł adnotacji – [opcjonalny, ciąg znaków] jeśli kolumna ciągu zawiera kolumnę z wartością, a opcja displayAnnotations zawiera wartość „prawda”, kolumna zawiera krótki tytuł opisujący ten punkt. Jeśli na przykład linia ta wskazuje temperaturę w Brazylii, która ma bardzo dużą wartość, tytuł może brzmieć „Gorący dzień”.
    • Tekst adnotacji – [opcjonalny ciąg znaków] Jeśli w przypadku tej serii istnieje druga kolumna, w tym miejscu będzie używana wartość komórki jako dodatkowy tekst opisu. Aby użyć tej kolumny, musisz ustawić wartość displayAnnotations na wartość prawda. Możesz używać tagów HTML, jeśli ustawisz allowHtml na wartość true. W zasadzie nie ma limitu rozmiaru, ale zbyt długie wpisy mogą przekraczać sekcję wyświetlaną. Nie musisz mieć tej kolumny, nawet jeśli masz w tym przypadku kolumnę z adnotacjami. Etykieta kolumny nie jest używana na wykresie. Jeśli na przykład był to najgorętszy dzień z rekordu, możesz powiedzieć „Następny dzień był o 10 stopni chłodniej!”.

Opcje konfiguracji

Nazwa
allowHTML

Jeśli ma wartość Prawda, tekst adnotacji zawierający tagi HTML jest renderowany jako HTML.

Typ: wartość logiczna
Wartość domyślna: false
Sufiks allValues

Sufiks, który należy dodać do wszystkich wartości w legendzie i umieścić znaczniki na osiach pionowych.

Typ: ciąg znaków
Wartość domyślna: brak
Szerokość adnotacji

Szerokość (w procentach) obszaru adnotacji z całego obszaru wykresu. Musi być liczbą z zakresu 5–80.

Typ: liczba
Wartość domyślna: 25
kolory

Kolory linii i etykiet wykresu. Tablica ciągów znaków. Każdy element jest ciągiem w prawidłowym formacie HTML. Na przykład „czerwony” lub „#00cc00”.

Typ: Tablica ciągów znaków
Domyślny: kolory domyślne.
dataFormat

Format służący do wyświetlania informacji o dacie w prawym górnym rogu. Format tego pola jest określony przez klasę java SimpleDateFormat.

Typ: ciąg znaków
Domyślny: „DD MMMM rrrr”, „HMM:MMMM dd, rrrr” w zależności od typu pierwszej kolumny (odpowiednio data lub data i godzina).
wyświetl adnotacje

Jeśli ma wartość Fałsz, wykres ukryje tabelę adnotacji, a adnotacje i adnotacje adnotacji nie będą widoczne (tabela adnotacji nie będzie również wyświetlana, jeśli w danych nie ma adnotacji, niezależnie od tej opcji). Gdy ta opcja ma wartość Prawda, po każdej kolumnie liczbowej można dodać 2 opcjonalne kolumny z ciągami adnotacji – po jednej dla tytułu adnotacji i jedną dla tekstu adnotacji.

Typ: wartość logiczna
Wartość domyślna: true
displayAdnotacjeFiltr

Jeśli ma wartość Prawda, na wykresie pojawi się opcja filtrowania adnotacji. Użyj tej opcji, jeśli jest wiele adnotacji.

Typ: wartość logiczna
Wartość domyślna: false
displayDateBarSeparator,

Określa, czy między wartościami serii i datą w legendzie ma być wyświetlany mały separator słupków ( | ), gdzie „prawda” oznacza tak.

Typ: wartość logiczna
Wartość domyślna: true
displayExactValues

Określa, czy w celu zaoszczędzenia miejsca na wykresie wyświetli się skrócona, zaokrąglona wersja wartości. Wartość „false” oznacza, że może to być możliwe. Jeśli na przykład ustawisz wartość false (fałsz), 56123.45 może mieć wartość 56.12k.

Typ: wartość logiczna
Wartość domyślna: false
LegendLegendDots

Określa, czy mają być wyświetlane kropki obok wartości w tekście legendy, gdzie prawda oznacza tak.

Typ: wartość logiczna
Wartość domyślna: true
displayLegendValues

Określa, czy zaznaczone wartości mają być wyświetlane w legendzie, gdzie prawda oznacza tak.

Typ: wartość logiczna
Wartość domyślna: true
Selektor selektora wyświetlania

Określa, czy wyświetlany jest obszar wyboru zakresu powiększenia (obszar wykresu u dołu wykresu), gdzie „fałsz” oznacza „nie”.

Konspekt w selektorze powiększenia to wersja skali logu pierwszej serii na wykresie, przeskalowana tak, aby pasowała do wysokości selektora powiększenia.

Typ: wartość logiczna
Wartość domyślna: true
PrzyciskiZoomZoom

Określa, czy przyciski powiększenia mają być widoczne („1d 5d 1m”, itd.), gdzie „false” oznacza „nie”.

Typ: wartość logiczna
Wartość domyślna: true
fill

Liczba od 0 do 100 (włącznie) określająca alfa wypełnienie pod każdą linią na wykresie liniowym. 100 oznacza 100% nieprzezroczystości, a 0 oznacza brak wypełnienia. Kolor wypełnienia jest taki sam jak kolor nad nim.

Typ: liczba
Wartość domyślna: 0
legendPosition

Określa, czy kolorowa legenda zostanie umieszczona w tym samym wierszu z przyciskami powiększenia i datą („sameRow”) lub w nowym wierszu („newRow”).

Typ: ciąg znaków
Wartość domyślna: „sameRow”
maks.

Maksymalna wartość wyświetlana na osi Y. Jeśli maksymalna wartość wskaźnika danych przekracza tę wartość, to ustawienie zostanie zignorowane, a na wykresie zostanie dostosowany następny znak zaznaczenia powyżej maksymalnego punktu danych. To ma pierwszeństwo przed maksymalną osią Y określoną przez scaleType.

Działa to podobnie do maxValue na wykresach podstawowych.

Typ: liczba
Domyślna:automatycznie.
minuta

Minimalna wartość wyświetlana na osi Y. Jeśli minimalna wartość danych jest mniejsza od tej wartości, to ustawienie zostanie zignorowane, a na wykresie zostanie dostosowany następny symbol zaznaczenia poniżej minimalnego punktu danych. Ta wartość ma pierwszeństwo przed minimalną osią Y określoną przez scaleType.

Działa to podobnie do minValue na wykresach podstawowych.

Typ: liczba
Domyślna:automatycznie.
Formaty liczbowe

Określa wzorce formatu liczb, które mają być używane do formatowania wartości u góry wykresu.

Wzorce powinny mieć format zgodny z klasą java DecimalFormat.

  • Jeśli nie określisz tego ustawienia, używany jest domyślny wzór formatu.
  • Jeśli podasz pojedynczy wzorzec ciągu, będzie on używany w przypadku wszystkich wartości.

  • Jeśli mapa jest określona, klucze to (oparte na zero) indeksy serii, a wartości to wzorce, które mają być użyte do formatowania określonej serii.

    Nie musisz podawać formatu każdej serii na wykresie. Wszystkie serie nieokreślone będą używać formatu domyślnego.

Jeśli ta opcja jest określona, opcja displayExactValues jest ignorowana.

Typ: ciąg znaków lub mapa liczby:pary ciągów znaków.
Domyślna: automatycznie.
Kolumny wagi

Określa, które wartości na osi Y mają być widoczne na wykresie. Domyślnie po prawej stronie znajduje się jedna skala, która odnosi się do obu serii, ale możesz poskalować różne strony wykresu do różnych wartości serii.

Ta opcja przyjmuje tablicę od 0 do 3 liczb, określając indeks (oparty na zera) do wykorzystania jako wartość skali. Gdzie wyświetlają się te wartości, zależą od liczby wartości w tablicy:

  • Jeśli określisz pustą tablicę, obok znaków zaznaczenia na wykresie nie będą wyświetlane wartości Y.
  • Jeśli określisz jedną wartość, po prawej stronie wykresu pojawi się skala podanej serii.
  • Jeśli określisz 2 wartości, po prawej stronie wykresu pojawi się skala drugiej serii.
  • Jeśli podasz 3 wartości, na środku wykresu zostanie dodana skala trzeciej serii.
  • Wszelkie wartości po trzeciej tablicy w tablicy będą ignorowane.

Jeśli wyświetlasz więcej niż 1 skalę, zalecamy ustawienie w polu scaleType wartości „allfixed” lub „allmaxized”.

Typ: tablica liczb
Domyślna:automatycznie.
SkalujFormat

Format liczb używany do etykiet osi czasu. Wartość domyślna '#' to liczba całkowita.

Typ: ciąg znaków
Domyślny: „#”
typ skali

Określa wartości maksymalne i minimalne widoczne na osi Y. Dostępne są te opcje:

  • „maksymalizacja” – oś Y będzie rozciągać się między wartościami minimalnymi a maksymalnymi wartościami serii. Jeśli masz więcej niż 1 serię, użyj wersji amaxmax.
  • „stałe” [wartość domyślna] – oś Y różni się w zależności od wartości danych:
    • Jeśli wszystkie wartości wynoszą >=0, oś Y będzie rozciągać się od zera do maksymalnej wartości danych.
    • Jeśli wszystkie wartości są mniejsze niż 0, oś Y będzie rozciągać się od zera do wartości minimalnej.
    • Jeśli wartości są zarówno dodatnie, jak i ujemne, oś Y będzie mieścić się w zakresie od wartości maksymalnej do serii.
      W przypadku wielu serii użyj „allfixed”.
  • „allmaximized” – taka sama jak opcja „maxmaxized”, ale stosowana w przypadku wyświetlania wielu wag. Oba wykresy zostaną zmaksymalizowane w tej samej skali, co oznacza, że pierwotny błąd zostanie zaprezentowany na osi Y, ale po najechaniu kursorem na każdy serial pojawi się prawdziwa wartość.
  • „allfixed” – tak samo jak „stały”, ale używane w przypadku wyświetlania wielu wag. To ustawienie dopasowuje każdą wagę do serii, do której ma zastosowanie (w połączeniu z ustawieniem scaleColumns).

Jeśli podasz opcje minimalnej i maksymalnej, będą one miały pierwszeństwo przed wartością minimalną i maksymalną określoną przez Twój typ wagi.

Typ: ciąg znaków
Domyślny: „stały”
tabela

Zawiera opcje dotyczące tabeli adnotacji. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu: 

var options: {
  table: {
    sortAscending: true,
    sortColumn: 1
  }
};
Typ: obiekt
Domyślne:null
tabela.sortowanie rosnąco

Jeśli zasada ma wartość true, odwraca kolejność tabel adnotacji i wyświetla je w kolejności rosnącej.

Typ: wartość logiczna
Wartość domyślna: false
tabela.sortowaniekolumn

Indeks kolumny tabeli adnotacji, dla której adnotacje zostaną posortowane. Wartość indeksu dla kolumny z adnotacjami musi wynosić 0 lub 1 w przypadku kolumny z adnotacjami.

Typ: liczba
Wartość domyślna: 0
grubość

Liczba od 0 do 10 (włącznie) określająca grubość linii, gdzie 0 to grubość.

Typ: liczba
Wartość domyślna: 0
ZoomEndTime

Ustawia datę i godzinę zakończenia wybranego zakresu powiększenia.

Typ: data
Wartość domyślna: brak
Powiększ czas rozpoczęcia

Ustawia datę i godzinę rozpoczęcia wybranego zakresu powiększenia.

Typ: data
Wartość domyślna: brak

Metody

Metoda
clearChart()

Czyści wykres i usuwa wszystkie przypisane zasoby.

Typ zwrotu: brak
draw(data, options, state)

Rysuje wykres.

Typ zwrotu: brak
getContainer()

Pobiera uchwyt do elementu kontenera zawierającego wykres adnotacji.

Typ zwrotu: wywołaj element DOM
getSelection()

Standardowa implementacja getSelection(). Wybrane elementy to komórki. Użytkownik może zaznaczyć tylko jedną komórkę naraz.

Typ zwrotu: tablica elementów wyboru.
getVisibleChartRange()

Zwraca obiekt z właściwościami start i end, z których każdy jest obiektem Date, który reprezentuje wybrany czas.

Typ zwrotu: obiekt z właściwościami start i end
hideDataColumns(columnIndexes)

Ukrywa określony ciąg danych na wykresie. Może być jednym parametrem, który może być liczbą lub tablicą liczb, gdzie 0 oznacza pierwszą serię danych itd.

Typ zwrotu: brak
setVisibleChartRange(start, end)

Ustawia widoczny zakres (powiększenie) na określony zakres. Akceptuje 2 parametry typu Date, które odpowiadają pierwszym i ostatnim czasom, dla którego chcesz zobaczyć wybrany zakres. Ustaw start na null, by uwzględnić wszystko od najwcześniejszej daty do end. Ustaw end na null, by uwzględnić wszystko od start do ostatniej daty.

Typ zwrotu: brak
showDataColumns(columnIndexes)

Pokazuje serie danych z wykresu, które zostały ukryte za pomocą metody hideDataColumns. Może być jednym parametrem, który może być liczbą lub tablicą liczb, gdzie 0 oznacza pierwszą serię danych itd.

Typ zwrotu: brak

Zdarzenia

Nazwa
rangechange

Uruchamiane, gdy użytkownik zmieni suwak zakresu. Nowe punkty końcowe zakresu będą dostępne jako event['start'] i event['end']: 

google.visualization.events.addListener(chart, 'rangechange', rangechange_handler);

function rangechange_handler(e) {
  console.log('You changed the range to ', e['start'], ' and ', e['end']);
}
Właściwości: start, end
ready

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
select

Uruchamiane, gdy użytkownik kliknie element wizualny. Aby dowiedzieć się, co zostało wybrane, zadzwoń pod numer 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.