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

Oś czasu z adnotacjami

Przegląd
Przykład
Wczytuję
Format danych
Opcje konfiguracji
Metody
Zdarzenia
Zasady dotyczące danych
Uwagi

Omówienie

Interaktywny wykres liniowy serii czasowych z opcjonalnymi adnotacjami.

Oś czasu z adnotacjami automatycznie używa teraz wykresów adnotacji.

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 korzystać z tej wizualizacji, musisz określić wysokość i szerokość elementu kontenera wyraźnie na stronie. 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świetlać jedną lub więcej linii. Każdy wiersz reprezentuje X na wykresie, czyli 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	Typ	Domyślna	Opis
allowHTML	wartość logiczna	fałsz	Jeśli ma wartość Prawda, każdy tekst adnotacji, który zawiera tagi HTML, będzie renderowany jako HTML.
allowRedraw	wartość logiczna	fałsz	Umożliwia sprawniejszą redagowanie drugiej i kolejnych wywołań metody `draw()` w tej wizualizacji. Zmniejsza to jedynie obszar wykresu. Aby korzystać z tej opcji, musisz spełniać te wymagania: allowRedraw musi mieć wartość prawda Wyświetlane adnotacje muszą mieć wartość fałsz (co oznacza, że nie można ich wyświetlać) musisz przekazać te same opcje i wartości (z wyjątkiem allowRedraw i displayAnnotations) przy pierwszym wywołaniu `draw()`.
Sufiks allValues	tekst	brak	Sufiks, który należy dodać do wszystkich wartości w wagi i legendy.
Szerokość adnotacji	liczba	25	Szerokość (w procentach) obszaru adnotacji z całego obszaru wykresu. Musi być liczbą z zakresu 5–80.
kolory	Tablica ciągów znaków	Kolory domyślne	Kolory linii i etykiet wykresu. Tablica ciągów znaków. Każdy element jest ciągiem w prawidłowym formacie koloru HTML. Na przykład „czerwony” lub „#00cc00”.
dataFormat	tekst	„MMMM dd, rrrr” lub „GG:mm dd, rrrr”, zależnie od typu pierwszej kolumny (odpowiednio data lub data i godzina).	Format służący do wyświetlania informacji o dacie w prawym górnym rogu. Format tego pola jest określany przez klasę JavaDateDate.
wyświetl adnotacje	wartość logiczna	fałsz	Jeśli ma wartość Prawda, na wykresie będą wyświetlane adnotacje z wybranymi wartościami. Jeśli ta opcja ma wartość Prawda, po każdej kolumnie liczbowej można dodać 2 opcjonalne kolumny z tekstami adnotacji – po jednej dla tytułu adnotacji i jedną dla tekstu adnotacji.
displayAdnotacjeFiltr	wartość logiczna	fałsz	Jeśli ma wartość Prawda, na wykresie pojawi się kontener filtra umożliwiający filtrowanie adnotacji. Użyj tej opcji, jeśli jest wiele adnotacji.
displayDateBarSeparator,	wartość logiczna	prawda	Określa, czy między wartościami serii i datą w legendzie ma być wyświetlany mały separator słupkowy ( \| ), gdzie „prawda” oznacza tak.
displayExactValues	wartość logiczna	fałsz	Określa, czy u góry wykresu jest wyświetlana skrócona, zaokrąglona wersja wartości. Ma to na celu zaoszczędzenie miejsca. Wartość „fałsz” wskazuje, że tak może być. Jeśli ustawiona jest wartość fałsz, 56123.45 może wyświetlać się jako 56.12 tys.
LegendLegendDots	wartość logiczna	prawda	Określa, czy mają być wyświetlane kropki obok wartości w legendzie, gdzie „prawda” oznacza „tak”.
displayLegendValues	wartość logiczna	prawda	Określa, czy zaznaczone wartości mają być wyświetlane w legendzie, gdzie prawda oznacza tak.
Selektor selektora wyświetlania	wartość logiczna	prawda	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 ze skalą logu ostatniej serii na wykresie, przeskalowana tak, aby pasowała do wysokości selektora powiększenia.
PrzyciskiZoomZoom	wartość logiczna	prawda	Określa, czy linki do powiększenia („1d 5d 1m” itd.) mają wartość „false” (nie).
fill	liczba	0	Liczba od 0 do 100 (włącznie) określająca alfa wypełnienie pod każdą linią na wykresie liniowym. 100 oznacza nieprzezroczyste wypełnienie, 0 oznacza brak wypełnienia. Kolor wypełnienia jest taki sam jak kolor nad nim.
wyróżniona kropka	tekst	„najbliższe”	Kropka na serii, która zostanie wyróżniona, i odpowiednie wartości w legendzie. Wybierz jedną z tych wartości: „najbliższe” – wartości najbliższe myszy na osi X. „last” – kolejny zestaw wartości po lewej stronie myszy.
legendPosition	tekst	„sameRow”	Określa, czy kolorowa legenda zostanie umieszczona w tym samym wierszu z przyciskami powiększenia i datą („sameRow”) lub w nowym wierszu („newRow”).
maks.	liczba	automatycznie	Maksymalna wartość wyświetlana na osi Y. Jeśli maksymalna wartość punktu danych przekracza tę wartość, to ustawienie zostanie zignorowane, a na wykresie zostanie dostosowany następny znak zaznaczenia powyżej maksymalnego punktu danych. Ta wartość ma pierwszeństwo przed maksymalną osią Y określoną przez `scaleType`.
minuta	liczba	automatycznie	Minimalna wartość wyświetlana na osi Y. Jeśli minimalna wartość danych jest mniejsza od tej wartości, to ustawienie będzie ignorowane, a na wykresie zostanie dostosowany następny symbol zaznaczenia poniżej minimalnego punktu danych. To ma pierwszeństwo przed osią Y określoną przez zasadę `scaleType`.
Formaty liczbowe	Ciąg lub mapa liczby:pary ciągów	automatycznie	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ą języka 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 uwzględniać 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.
Kolumny wagi	Tablica liczb	Automatyczne	Określa, które wartości na osi Y mają być widoczne na wykresie. Domyślnie po prawej stronie znajduje się pojedyncza skala, która dotyczy obu serii, ale możesz mieć różne strony wykresu, aby skalować je do różnych wartości serii. Ta opcja przyjmuje tablicę od 0 do 3 wartości, która wskazuje indeks (oparty na zerach) do użycia 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, z prawej strony 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 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 skali	tekst	„stały”	Określa wartości maksymalne i minimalne widoczne na osi Y. Dostępne są te opcje: „maksymalizacja” – oś Y będzie rozciągać się od wartości minimalnej do serii. Jeśli masz więcej niż jedną serię, użyj tekstu uniwersalnego. „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 minimalnej wartości danych. 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 używana, gdy wyświetla się wiele skal. Oba wykresy zostaną zmaksymalizowane w tej samej skali, co oznacza, że jeden z nich będzie fałszywy względem 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.
grubość	liczba	0	Liczba od 0 do 10 (włącznie) określająca grubość linii, gdzie 0 to grubość.
Wmode	tekst	„window” (okno)	Parametr Tryb okna (wmode) wykresu Flash. Dostępne wartości to „opaque”, „window” lub „transparent”.
ZoomEndTime	Data	brak	Ustawia datę i godzinę zakończenia wybranego zakresu powiększenia.
Powiększ czas rozpoczęcia	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. Za pomocą właściwości allowRedraw możesz przyspieszyć czas odpowiedzi na drugie i późniejsze wywołania `draw()`.
`getSelection()`	Tablica elementów wyboru	Standardowa implementacja `getSelection()`. Wybrane elementy to elementy 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żdy jest obiektem `Date`, który reprezentuje wybrany czas.
`hideDataColumns(columnIndexes)`	brak	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.
`setVisibleChartRange(start, end)`	brak	Ustawia widoczny zakres (powiększenie) na określony zakres. Akceptuje 2 parametry typu `Date`, które odpowiadają pierwszym i ostatnim czasom wybranego wybranego zakresu. Ustaw start na null, aby uwzględnić wszystko od najwcześniejszej daty do end. Ustaw end na null, aby uwzględnić wszystko od start do ostatniej daty.
`showDataColumns(columnIndexes)`	brak	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.

Zdarzenia

Nazwa	Opis	Usługi
zmiana zakresu	Zmieniono zakres powiększenia. Uruchamiane po zmodyfikowaniu zakresu czasu przez użytkownika, ale nie po wywołaniu metody `setVisibleChartRange`. Uwaga: nie zalecamy używania właściwości zdarzenia, ale można je uzyskać, wywołując metodę `getVisibleChartRange`.	`start`: data. Godzina rozpoczęcia zakresu powiększenia. `end`: data. Godzina zakończenia zakresu powiększenia.
gotowa	Wykres jest gotowy do wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywołań po jego narysowaniu, skonfiguruj odbiornik dla tego zdarzenia przed wywołaniem metody `draw` i wywołaj je dopiero po wywołaniu zdarzenia	Brak
wybierz	Gdy użytkownik kliknie flagę adnotacji, zostanie wybrana odpowiednia komórka w tabeli danych. Wizualizacja uruchamia to zdarzenie.	Brak

Uwaga: z powodu pewnych ograniczeń zdarzenie może nie zostać zgłoszone, gdy przeglądasz stronę w pliku jako plik (np. „file://”) zamiast 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 do żadnego serwera.

Uwagi

Ze względu na ustawienia zabezpieczeń Flash ten element (oraz wszystkie wizualizacje oparte na technologii Flash) może nie działać prawidłowo w przypadku uzyskania dostępu z lokalizacji pliku w przeglądarce (np. file:///c:/webhost/myhost/myviz.html), a nie z adresu URL serwera WWW (np. http://www.myhost.com/myviz.html). Jest to zwykle problem testowy. Możesz rozwiązać ten problem zgodnie z opisem na stronie Macromedia.