Ta strona została przetłumaczona przez Cloud Translation API.

Oś czasu z adnotacjami

Overview
Przykład
Wczytuję
Format danych
Opcje konfiguracji
Metody
Zdarzenia
Zasady dotyczące danych
Notes

Omówienie

Interaktywny wykres liniowy serii czasowej z opcjonalnymi adnotacjami.

Oś czasu z adnotacjami automatycznie korzysta teraz z wykresów z adnotacjami.

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':['annotatedtimeline']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sold Pencils');
        data.addColumn('string', 'title1');
        data.addColumn('string', 'text1');
        data.addColumn('number', 'Sold Pens');
        data.addColumn('string', 'title2');
        data.addColumn('string', 'text2');
        data.addRows([
          [new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],
          [new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],
          [new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined],
          [new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'],
          [new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined],
          [new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined]
        ]);

        var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
        chart.draw(data, {displayAnnotations: true});
      }
    </script>
  </head>

  <body>
    // Note how you must specify the size of the container element explicitly!
    <div id='chart_div' style='width: 700px; height: 240px;'></div>
  </body>
</html>

Ważne: aby skorzystać z tej wizualizacji, musisz wyraźnie określić wysokość i szerokość elementu kontenera na stronie. Na przykład: <div id="chart_div" style="width:400; height:250"></div>.

Wczytuję

Nazwa pakietu google.charts.load to "annotatedtimeline"

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

Nazwa klasy wizualizacji to google.visualization.AnnotatedTimeLine

  var visualization = new google.visualization.AnnotatedTimeLine(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	Typ	Domyślne	Opis
allowHtml	boolean	false	Jeśli ma wartość Prawda, każdy tekst adnotacji zawierający tagi HTML jest renderowany jako HTML.
allowRedraw	boolean	false	Włącza wydajniejszą metodę ponownego rysowania przy drugim i późniejszym wywołaniu w tej wizualizacji funkcji `draw()`. Powoduje jedynie ponowne zaznaczenie obszaru wykresu. Aby korzystać z tej opcji, musisz spełniać te wymagania: allowRedraw musi mieć wartość prawda displayAdnotacje muszą mieć wartość false (fałsz), co oznacza, że nie można wyświetlać adnotacji. musisz przekazać te same opcje i wartości (z wyjątkiem allowRedraw i displayAdnotacje) co w pierwszym wywołaniu `draw()`.
allValuesSuffix	string,	brak	Przyrostek, który należy dodać do wszystkich wartości na skalach i w legendzie.
annotationsWidth	Liczba	25	Szerokość obszaru adnotacji (w procentach) w stosunku do całego obszaru wykresu. Musi być liczbą z zakresu od 5 do 80.
kolory	Tablica ciągów	Kolory domyślne	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”.
dateFormat	string,	W zależności od typu pierwszej kolumny (data lub data i godzina) może to być „MMMM dd, rrrr” lub „HH:mm MMMM dd, rrrr”.	Format używany do wyświetlania informacji o dacie w prawym górnym rogu. Format tego pola jest określony w klasie java SimpleDateFormat.
displayAnnotations	boolean	false	Jeśli ma wartość Prawda, na wykresie wyświetlają się adnotacje nad wybranymi wartościami. 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.
displayAnnotationsFilter	boolean	false	Jeśli ma wartość Prawda, na wykresie wyświetlana jest kontrolka filtra do filtrowania adnotacji. Użyj tej opcji, jeśli istnieje wiele adnotacji.
displayDateBarSeparator	boolean	prawda	Określa, czy wyświetlać mały separator słupkowy ( \| ) między wartościami serii a datą w legendzie, gdzie „prawda” oznacza „tak”.
displayExactValues	boolean	false	Określa, czy u góry wykresu ma być wyświetlana skrócona, zaokrąglona wersja wartości, aby zaoszczędzić miejsce. Wartość fałsz oznacza, że może być wyświetlana.Na przykład w przypadku ustawienia fałsz 56123.45 może być wyświetlane jako 56,12 tys.
displayLegendDots	boolean	prawda	Określa, czy kropki mają być wyświetlane obok wartości w legendzie, gdzie „true” oznacza „tak”.
displayLegendValues	boolean	prawda	Określa, czy wyróżnione wartości mają być wyświetlane w legendzie, gdzie „prawda” oznacza „tak”.
displayRangeSelector	boolean	prawda	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 ostatniej serii na wykresie w skali logarytmicznej, przeskalowana tak, by pasowała do wysokości selektora powiększenia.
displayZoomButtons	boolean	prawda	Określa, czy linki powiększenia mają być wyświetlane („1d 5d 1m” itd.), gdzie „fałsz” oznacza „nie”.
fill	Liczba	0	Liczba z zakresu od 0 do 100 (włącznie) określająca poziom alfa wypełnienia poniżej każdej linii na wykresie liniowym. Wartość 100 oznacza 100% nieprzejrzystości wypełnienia, 0 oznacza całkowity brak wypełnienia. Kolor wypełnienia jest taki sam jak kolor linii nad nim.
highlightDot	string,	„najbliższe”	Którą kropkę w serii chcesz wyróżnić i odpowiadające jej wartości, które mają być widoczne w legendzie. Wybierz jedną z tych wartości: „najbliższe” – wartości najbliższe myszy na osi X. „ostatni” – następny zbiór wartości po lewej stronie kursora myszy.
legendPosition	string,	„sameRow”	Określa, czy kolorowa legenda ma zostać umieszczona w tym samym wierszu z przyciskami powiększenia i datą („sameRow”) czy w nowym wierszu („newRow”).
maksimum	Liczba	automatyczna	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, aby wyświetlać następny główny znacznik wyboru powyżej maksymalnego punktu danych. Ma ona pierwszeństwo przed maksymalną osią Y określoną przez `scaleType`.
min	Liczba	automatyczna	Minimalna wartość wyświetlana na osi Y. Jeśli minimalny punkt danych jest mniejszy niż ta wartość, to ustawienie zostanie zignorowane, a wykres zostanie dostosowany tak, aby 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`.
numberFormats	Ciąg znaków lub mapa par liczba:ciąg znaków	automatyczna	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.
scaleColumns	Tablica liczb	Automatyczny	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ą indeks ciągu (liczony od zera), który ma być używany 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ę, na wykresie nie pojawią się wartości Y obok znaczników. Jeśli podasz jedną wartość, skala tej serii będzie wyświetlana po prawej stronie wykresu. Jeśli podasz 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”.
scaleType	string,	„Naprawiono”	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 maksimum. „stała” [wartość domyślna] – oś Y zmienia się w zależności od wartości danych: Jeśli wszystkie wartości mają wartość >=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 liczby 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 jeden z nich zostanie wyświetlony w odniesieniu do osi Y, ale po najechaniu kursorem na każdą serie wyświetli się jego 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.
grubość	Liczba	0	Liczba z zakresu od 0 do 10 (włącznie) określająca grubość linii (0 to najcieńsza linia).
Wmode	string,	„okno”	Parametr Tryb okna (wmode) wykresu Flash. Dostępne wartości to „opaque”, „window” i „transparent”.
zoomEndTime	Data	brak	Ustawia datę i godzinę zakończenia wybranego zakresu powiększenia.
zoomStartTime	Data	brak	Ustawia datę i godzinę rozpoczęcia wybranego zakresu powiększenia.

Metody

Metoda	Typ zwracanej wartości	Opis
`draw(data, options)`	brak	Rysuje wykres. Korzystając z właściwości allowRedraw, możesz skrócić czas odpowiedzi drugiego i późniejszego wywołania `draw()`.
`getSelection()`	Tablica elementów zaznaczenia	Implementacja standardowa `getSelection()`. Wybrane elementy są elementami komórek. Użytkownik może zaznaczyć tylko jedną komórkę naraz.
`getVisibleChartRange()`	Obiekt z właściwościami `start` i `end`	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.
`hideDataColumns(columnIndexes)`	brak	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.
`setVisibleChartRange(start, end)`	brak	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.
`showDataColumns(columnIndexes)`	brak	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.

Zdarzenia

Nazwa	Opis	Właściwości
zmiana zakresu	Zakres powiększenia został zmieniony. Uruchamiane po zmodyfikowaniu przez użytkownika widocznego zakresu czasowego, ale nie po wywołaniu metody `setVisibleChartRange`. Uwaga: nie zalecamy używania właściwości zdarzenia, tylko wywoływanie metody `getVisibleChartRange`.	`start`: data. Godzina rozpoczęcia zakresu powiększenia. `end`: data. Czas zakończenia zakresu powiększenia.
gotowa	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	Brak
wybierz	Gdy użytkownik kliknie flagę adnotacji (znacznik), w tabeli danych zostanie wybrana odpowiednia komórka. Następnie wizualizacja uruchamia to zdarzenie.	Brak

Uwaga: ze względu na pewne ograniczenia zdarzenia mogą nie być wywoływane, gdy otwierasz stronę w przeglądarce jako plik (np. „file://”), a nie z serwera (np. "http://www").

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.

Uwagi

Ze względu na ustawienia zabezpieczeń Flash to (wraz ze wszystkimi wizualizacjami opartymi na Flash) może nie działać prawidłowo, gdy otworzysz plik z lokalizacji pliku w przeglądarce (np. file:///c:/webhost/myhost/myviz.html), a nie z adresu URL serwera WWW (np. http://www.mojhost.com/myviz.html). Zazwyczaj jest to problem związany tylko z testami. Możesz rozwiązać ten problem w sposób opisany w witrynie Macromedia.