Oś czasu z adnotacjami

  1. Overview
  2. Przykład
  3. Wczytuję
  4. Format danych
  5. Opcje konfiguracji
  6. Metody
  7. Zdarzenia
  8. Zasady dotyczące danych
  9. 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.