Omówienie
Wykresy adnotacji to interaktywne wykresy liniowe ciągów czasowych, które obsługują adnotacje. Pamiętaj, że oś czasu z adnotacjami automatycznie używa teraz wykresu adnotacji.
Alert dotyczący pomyłek: obecnie wykres adnotacji Google różni się od adnotacji, które obsługują inne wykresy Google (obecnie warstwowe, słupkowe, kolumnowe, kombi, liniowe i punktowe). Na tych wykresach adnotacje są określone w osobnej kolumnie z tabelą danych i wyświetlane jako krótkie fragmenty tekstu, które użytkownicy mogą najechać kursorem, aby zobaczyć pełny tekst adnotacji. W przeciwieństwie do tego wykres adnotacji po prawej stronie wyświetla pełne adnotacje, tak jak pokazano 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świetlić jedną lub więcej linii. Każdy wiersz reprezentuje pozycję na osi X na wykresie, czyli określony czas. Każda linia jest opisana przez zestaw od 1 do 3 kolumn.
- Pierwsza kolumna jest typu datelubdatetimei określa wartość X punktu na wykresie. Jeśli ta kolumna jest typudate(a niedatetime), najniższa rozdzielczość czasu na osi X wynosi 1 dzień.
- Każdy wiersz danych jest opisany za pomocą zestawu od 1 do 3 dodatkowych kolumn, jak opisano poniżej:- Wartość Y – [wymagana, liczba] Pierwsza kolumna w każdym zestawie opisuje wartość wiersza w odpowiednim momencie z pierwszej kolumny. Etykieta kolumny jest wyświetlana na wykresie jako tytuł linii.
- Tytuł adnotacji – [opcjonalny, ciąg znaków] Jeśli kolumna z ciągami znaków znajduje się po kolumnie wartości, a opcja displayAnnotationsma wartość true (prawda), ta kolumna zawiera krótki tytuł opisujący ten punkt. Jeśli na przykład ta linia przedstawia temperaturę w Brazylii, a ten punkt jest bardzo wysoką liczbą, tytuł może brzmieć „Najbardziej wartościowy dzień w historii”.
- Tekst adnotacji – [opcjonalny ciąg znaków], jeśli dla serii istnieje druga kolumna z ciągami znaków, wartość komórki zostanie użyta jako dodatkowy opis w tym punkcie. Aby korzystać z tej kolumny, musisz ustawić wartość opcji displayAnnotationsna „true”. Jeśli ustawiszallowHtmlnatrue, możesz użyć tagów HTML. W zasadzie nie ma limitu rozmiaru, ale pamiętaj, że zbyt długie wpisy mogą wychodzić poza sekcję wyświetlania. Nie musisz mieć tej kolumny, nawet jeśli masz do tego miejsca kolumnę z tytułem adnotacji. Etykieta kolumny nie jest używana przez wykres. Jeśli na przykład jest to najgorętszy dzień w rekordzie, możesz powiedzieć na przykład „Następny najbliższy dzień był o 10 stopni chłodniej”.
 
Opcje konfiguracji
| Nazwa | |
|---|---|
| allowHtml | Jeśli ma wartość Prawda, każdy tekst adnotacji zawierający tagi HTML jest renderowany jako HTML. Typ: wartość logiczna Wartość domyślna: fałsz. | 
| allValuesSuffix | Sufiks, który należy dodać do wszystkich wartości w legendzie i etykiet znaczników na osiach pionowych. Typ: ciąg znaków Wartość domyślna: brak | 
| annotationsWidth | Szerokość obszaru adnotacji (w procentach) w stosunku do całego obszaru wykresu. Musi być liczbą z zakresu od 5 do 80. Typ: liczba Wartość domyślna: 25 | 
| kolory | Kolory linii i etykiet wykresu. Tablica ciągów. Każdy element jest ciągiem znaków w prawidłowym formacie koloru HTML. Na przykład „czerwony” lub „#00cc00”. Typ: tablica ciągów znaków Domyślne:kolory domyślne. | 
| dateFormat | Format używany 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ślnie: „MMMM dd, yyyy” lub „HH:mm MMMM dd, yyyy” w zależności od typu pierwszej kolumny (odpowiednio data lub data i godzina).
       | 
| displayAnnotations | Jeśli zasada ma wartość Fałsz, tabela na wykresie jest ukrywana, a adnotacje i AdnotacjeText nie są widoczne (tabela adnotacji nie będzie też wyświetlana, jeśli w danych nie ma adnotacji, niezależnie od tej opcji). Jeśli ta opcja ma wartość Prawda, po każdej kolumnie liczbowej można dodać 2 opcjonalne kolumny z ciągami adnotacji: jedną dla tytułu adnotacji i jedną dla jej tekstu. Typ: wartość logiczna Wartość domyślna:true (prawda) | 
| displayAnnotationsFilter | Jeśli ma wartość Prawda, na wykresie wyświetlają się opcje filtra umożliwiające filtrowanie adnotacji. Użyj tej opcji, jeśli istnieje wiele adnotacji. Typ: wartość logiczna Wartość domyślna: fałsz. | 
| displayDateBarSeparator | Określa, czy wyświetlać mały separator słupkowy ( | ) między wartościami serii a datą w legendzie, gdzie „prawda” oznacza „tak”. Typ: wartość logiczna Wartość domyślna:true (prawda) | 
| displayExactValues | Określa, czy u góry wykresu ma być wyświetlana skrócona, zaokrąglona wersja wartości, aby zaoszczędzić miejsce. Wartość false oznacza, że może być wyświetlana.Na przykład w przypadku ustawienia false (fałsz) wartość 56123.45 może być wyświetlana jako 56,12 tys. Typ: wartość logiczna Wartość domyślna: fałsz. | 
| displayLegendDots | Określa, czy kropki mają być wyświetlane obok wartości w legendzie, gdzie „true” oznacza „tak”. Typ: wartość logiczna Wartość domyślna:true (prawda) | 
| displayLegendValues | Określa, czy zaznaczone wartości mają być wyświetlane w legendzie. Wartość „prawda” oznacza „tak”. Typ: wartość logiczna Wartość domyślna:true (prawda) | 
| displayRangeSelector | Określa, czy wyświetlać obszar wyboru zakresu powiększenia (obszar na dole wykresu), gdzie „fałsz” oznacza „nie”. Kontur w selektorze powiększenia to wersja pierwszej serii na wykresie w skali logarytmicznej, przeskalowana tak, by pasowała do wysokości selektora powiększenia. Typ: wartość logiczna Wartość domyślna:true (prawda) | 
| displayZoomButtons | Określa, czy mają być wyświetlane przyciski powiększenia („1d 5d 1m” itd.), gdzie false oznacza nie. Typ: wartość logiczna Wartość domyślna:true (prawda) | 
| fill | Liczba z zakresu od 0 do 100 (włącznie) określająca poziom alfa wypełnienia poniżej każdej linii na wykresie liniowym. 100 oznacza 100% nieprzejrzystości, a 0 oznacza brak wypełnienia. Kolor wypełnienia jest taki sam jak kolor linii nad nim. Typ: liczba Wartość domyślna: 0 | 
| legendPosition | Określa, czy kolorowa legenda ma zostać umieszczona w tym samym wierszu z przyciskami powiększenia i datą („sameRow”) czy w nowym wierszu („newRow”). Typ: ciąg znaków Domyślnie: „sameRow” | 
| maksimum | 
        Maksymalna wartość do wyświetlania na osi Y. Jeśli maksymalny punkt danych przekroczy tę wartość, to ustawienie zostanie zignorowane, a wykres zostanie dostosowany tak, by pokazywać następny główny znacznik wyboru powyżej maksymalnego punktu danych. Ma ona pierwszeństwo przed maksymalną osią Y określoną przez  Jest podobny do  Typ: liczba Domyślne:automatyczne | 
| min | 
        Minimalna wartość wyświetlana na osi Y. Jeśli minimalny punkt danych jest mniejszy od tej wartości, to ustawienie zostanie zignorowane, a wykres zostanie dostosowany tak, by wyświetlać następny duży znacznik wyboru pod minimalnym punktem danych. Ta wartość będzie mieć pierwszeństwo przed minimalną wartością na osi Y określoną przez  Jest podobny do  Typ: liczba Domyślne:automatyczne | 
| numberFormats | Określa wzorce formatu liczb, które mają być używane do formatowania wartości na górze wykresu. Wzorce powinny mieć format określony w klasie java DecimalFormat. 
 Jeśli podasz tę opcję, opcja  Typ: ciąg znaków lub mapa par typu liczba:ciąg znaków Domyślne:automatyczne | 
| scaleColumns | Określa, które wartości mają być wyświetlane na osiach Y na wykresie. Domyślnie po prawej stronie znajduje się 1 skala, która dotyczy obu serii. Możesz jednak skalować różne strony wykresu w zależności od wartości serii. Ta opcja pobiera tablicę zawierającą od 0 do 3 liczb, które określają (liczony od zera) indeks ciągu, który ma zostać użyty jako wartość skali. To, gdzie wyświetlają się te wartości, zależy od liczby wartości uwzględnionych w tablicy: 
 
        Jeśli wyświetlasz więcej niż 1 skalę, zalecamy ustawienie opcji  Typ: tablica liczb Wartość domyślna: automatycznie | 
| scaleFormat | 
        Format liczb na etykiety znaczników osi. Wartość domyślna pola  Typ: ciąg znaków Domyślnie: „#”. | 
| scaleType | Określa maksymalne i minimalne wartości wyświetlane na osi Y. Dostępne są te opcje: 
 Jeśli określisz opcje minimalną lub maksymalną, będą one miały pierwszeństwo przed wartością minimalną i maksymalną określoną przez typ skali. Typ: ciąg znaków Domyślny: „fixed” | 
| stół | Zawiera opcje odnoszące się do 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 Wartość domyślna:null | 
| table.sortAscending | 
        Jeśli ma wartość  Typ: wartość logiczna Wartość domyślna: fałsz. | 
| table.sortColumn | Indeks kolumny tabeli adnotacji, w której adnotacje będą sortowane. Indeks musi wynosić 0 w przypadku kolumny etykiety adnotacji lub 1 w przypadku kolumny z tekstem adnotacji. Typ: liczba Wartość domyślna: 0 | 
| grubość | Liczba z zakresu od 0 do 10 (włącznie) określająca grubość linii. 0 to najcieńsza linia. Typ: liczba Wartość domyślna: 0 | 
| zoomEndTime | Ustawia datę i godzinę zakończenia wybranego zakresu powiększenia. Typ: Data Wartość domyślna: brak | 
| zoomStartTime | Ustawia datę i godzinę rozpoczęcia wybranego zakresu powiększenia. Typ: Data Wartość domyślna: brak | 
Metody
| Metoda | |
|---|---|
| clearChart() | Czyści wykres i zwalnia wszystkie przydzielone Ci zasoby. Return Type: brak | 
| draw(data, options, state) | Rysuje wykres. Return Type: brak | 
| getContainer() | Pobiera uchwyt do elementu kontenera zawierającego wykres adnotacji. Return Type: uchwyt do elementu DOM. | 
| getSelection() | 
        Implementacja standardowa  Return Type: tablica elementów zaznaczenia. | 
| getVisibleChartRange() | 
        Zwraca obiekt z właściwościami  
        Typ zwrotu: obiekt z właściwościami  startiend | 
| hideDataColumns(columnIndexes) | Ukrywa określoną serię danych na wykresie. Akceptuje jeden parametr, który może być liczbą lub tablicą liczb, gdzie 0 oznacza pierwszą serię danych itd. Return Type: brak | 
| setVisibleChartRange(start, end) | 
        Ustawia widoczny zakres (powiększenie) na określony zakres. Akceptuje 2 parametry typu  Return Type: brak | 
| showDataColumns(columnIndexes) | 
        Pokazuje określone serie danych z wykresu po ich ukryciu za pomocą metody  Return Type: brak | 
Zdarzenia
| Nazwa | |
|---|---|
| rangechange | 
        Uruchamiane, gdy użytkownik zmieni suwak zakresu. Nowe punkty końcowe zakresu będą dostępne jako  
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 obsługi wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywołań po jego narysowaniu, skonfiguruj detektor tego zdarzenia przed wywołaniem metody  Właściwości: brak | 
| select | 
      Uruchamiane, gdy użytkownik kliknie element wizualny. Aby dowiedzieć się, co zostało wybrane, zadzwoń pod numer  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.