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
lubdatetime
i określa wartość X punktu na wykresie. Jeśli ta kolumna zawiera typdate
(a niedatetime
), 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 ustawiszallowHtml
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
|
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:
|
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 ta opcja jest określona, opcja |
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 wyświetlasz więcej niż 1 skalę, zalecamy ustawienie w polu |
typ skali | tekst | „stały” | Określa wartości maksymalne i minimalne widoczne na osi Y. Dostępne są te opcje:
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 . |
|
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.