Wykres adnotacji

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 date lub datetime i określa wartość X punktu na wykresie. Jeśli ta kolumna jest typu date (a nie datetime), 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 displayAnnotations ma 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 displayAnnotations na „true”. Jeśli ustawisz allowHtml na true, 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 scaleType.

Jest podobny do maxValue na wykresach podstawowych.

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 scaleType.

Jest podobny do minValue na wykresach podstawowych.

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 nie zostanie określony, używany będzie wzorzec formatu domyślnego.
  • Jeśli określony jest pojedynczy wzorzec ciągu znaków, jest on używany dla wszystkich wartości.
  • Jeśli mapa jest określona, klucze są indeksami serii (liczonymi od zera), a wartości to wzorce używane do formatowania określonej serii.

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

Jeśli podasz tę opcję, opcja displayExactValues będzie ignorowana.

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 określisz pustą tablicę, wartości Y na wykresie nie pojawią się obok znaczników.
  • Jeśli podasz jedną wartość, skala tej serii będzie wyświetlana po prawej stronie wykresu.
  • Jeśli określisz 2 wartości, po prawej stronie wykresu zostanie dodana skala drugiej serii.
  • Jeśli podasz 3 wartości, na środku wykresu zostanie dodana skala trzeciej serii.
  • Wszelkie wartości po trzeciej trzeciej wartości w tablicy zostaną zignorowane.

Jeśli wyświetlasz więcej niż 1 skalę, zalecamy ustawienie opcji scaleType na „allfixed” lub „allmaximized”.

Typ: tablica liczb
Wartość domyślna: automatycznie
scaleFormat

Format liczb na etykiety znaczników osi. Wartość domyślna pola '#' jest liczbą całkowitą.

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:

  • „zmaksymalizowane” – oś Y obejmuje wartości od minimalnej do maksymalnej w serii. Jeśli masz więcej niż 1 serię, użyj maksymalizacji.
  • „Stała” [wartość domyślna] – oś Y różni się w zależności od wartości danych:
    • Jeśli wszystkie wartości są większe od 0, oś Y będzie obejmowała zakres od 0 do maksymalnej wartości danych.
    • Jeśli wszystkie wartości są mniejsze niż 0, oś Y będzie obejmowała zakres od 0 do minimalnej wartości danych.
    • Jeśli wartości są zarówno dodatnie, jak i ujemne, oś Y mieści się w zakresie od maksymalnej do minimalnej wartości w serii.
      W przypadku wielu serii użyj ustawienia „allfixed”.
  • „allmaximized” – to samo co „zmaksymalizowane”, ale używane, gdy wyświetlanych jest kilka skal. Oba wykresy są zmaksymalizowane w ramach tej samej skali, co oznacza, że na osi Y zostanie podany mylący, ale po najechaniu kursorem na każdą serię wyświetli się ich prawdziwa wartość.
  • „allfixed” – tak samo jak „fixed”, ale używana, gdy wyświetlanych jest kilka skal. To ustawienie dostosowuje każdą skalę do serii, do której ma zastosowanie (w połączeniu z zasadą scaleColumns).

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ść true, odwraca kolejność tabeli adnotacji i wyświetla je w kolejności rosnącej.

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 getSelection(). Wybrane elementy są elementami komórek. Użytkownik może zaznaczyć tylko jedną komórkę naraz.

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

Zwraca obiekt z właściwościami start i end, z których każda jest obiektem Date, reprezentującym bieżący wybór czasu.

Typ zwrotu: obiekt z właściwościami start i end
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 Date, które reprezentują pierwszy i ostatni czas wybranego widocznego zakresu. Ustaw wartość start na null, by uwzględnić wszystko od najwcześniejszej daty do daty end. Dla parametru end ustaw wartość null, by uwzględnić wszystko od start do ostatniej daty.

Return Type: brak
showDataColumns(columnIndexes)

Pokazuje określone serie danych z wykresu po ich ukryciu za pomocą metody hideDataColumns. Akceptuje jeden parametr, który może być liczbą lub tablicą liczb, gdzie 0 oznacza pierwszą serię danych itd.

Return Type: 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 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 draw i wywołaj je dopiero po wywołaniu 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 na żaden serwer.