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
lubdatetime
i 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
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 ustawiszallowHtml
natrue
, 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
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 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.