Omówienie
Uwaga: kod JavaScript zlicza miesiące, które rozpoczynają się od zero: 0 stycznia to 0, luty 1, a grudzień 11 znaków. Jeśli wydaje Ci się, że wykres w Twoim kalendarzu wygląda na miesiąc, właśnie to jest przyczyną.
Wykres kalendarza przedstawia wizualizację aktywności na przestrzeni dłuższych okresów, takich jak miesiące lub lata. Są najbardziej przydatne, gdy chcesz zobaczyć, jak ilość zmienia się w zależności od dnia tygodnia lub trendów.
W przyszłych wersjach Kalendarza Google możemy znacznie zmodyfikować wykres.
Wykresy kalendarza są renderowane w przeglądarce przy użyciu SVG lub VML, w zależności od tego, która wersja jest odpowiednia dla przeglądarki użytkownika. Podobnie jak w przypadku wszystkich wykresów Google, wykresy aktywności użytkownika wyświetlają się, gdy użytkownik najedzie na nie kursorem. i miejsce, w którym należy im się towarzyszyć – wykres w kalendarzu powstał na podstawie wizualizacji kalendarza D3.
Prosty przykład
Załóżmy, że chcemy pokazać, jak frekwencja różnych drużyn się zmieniała w trakcie sezonu. Korzystając z wykresu w kalendarzu, możemy określać jasność za pomocą jasności i prezentować trendy w skrócie:
Możesz najechać kursorem na poszczególne dni, aby zobaczyć wartości danych.
Aby utworzyć wykres kalendarza, wczytaj pakiet calendar
, a następnie utwórz 2 kolumny – po jednej dla dat i jedną dla wartości. (W przyszłej wersji Listy przebojów Google wprowadzimy opcjonalną trzecią kolumnę).
Następnie wypełnij wiersze w postaci par data-wartość, tak jak pokazano poniżej.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["calendar"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'date', id: 'Date' }); dataTable.addColumn({ type: 'number', id: 'Won/Loss' }); dataTable.addRows([ [ new Date(2012, 3, 13), 37032 ], [ new Date(2012, 3, 14), 38024 ], [ new Date(2012, 3, 15), 38024 ], [ new Date(2012, 3, 16), 38108 ], [ new Date(2012, 3, 17), 38229 ], // Many rows omitted for brevity. [ new Date(2013, 9, 4), 38177 ], [ new Date(2013, 9, 5), 38705 ], [ new Date(2013, 9, 12), 38210 ], [ new Date(2013, 9, 13), 38029 ], [ new Date(2013, 9, 19), 38823 ], [ new Date(2013, 9, 23), 38345 ], [ new Date(2013, 9, 24), 38436 ], [ new Date(2013, 9, 30), 38447 ] ]); var chart = new google.visualization.Calendar(document.getElementById('calendar_basic')); var options = { title: "Red Sox Attendance", height: 350, }; chart.draw(dataTable, options); } </script> </head> <body> <div id="calendar_basic" style="width: 1000px; height: 350px;"></div> </body> </html>
Dni
Każdy kwadrat na wykresie kalendarzowym reprezentuje dzień. Obecnie nie można dostosować koloru komórek danych, ale zmieni się to w następnej wersji wykresów.
Jeżeli wartości danych są dodatnie, kolory mogą mieć od białego do niebieskiego, a najbliższy – z niebieskiego. Wartości ujemne będą wyświetlane na pomarańczowo (zgodnie z opisem poniżej).
Kod tego kalendarza jest podobny do pierwszego, z tą różnicą, że wiersze wyglądają tak:
[ new Date(2013, 9, 4), 10 ], [ new Date(2013, 9, 5), 3 ], [ new Date(2013, 9, 7), -1 ], [ new Date(2013, 9, 8), 2 ], [ new Date(2013, 9, 12), -1 ], [ new Date(2013, 9, 13), 1 ], [ new Date(2013, 9, 15), 1 ], [ new Date(2013, 9, 16), -4 ],
Rozmiar dni („komórki”) możesz zmienić za pomocą opcji calendar.cellSize
:
Zmieniliśmy tutaj calendar.cellSize
na 10, pomniejszając dni, a tym samym na cały wykres.
var options = { title: 'Red Sox Attendance', calendar: { cellSize: 10 }, };
Dni bez wartości danych można dostosować za pomocą opcji noDataPattern
:
Ustawimy tutaj kolor color
na jasnoniebieski, a backgroundColor
na trochę ciemniejszy:
var options = { title: "Red Sox Attendance", height: 350, noDataPattern: { backgroundColor: '#76a7fa', color: '#a0c3ff' } };
Za pomocą calendar.cellColor
możesz kontrolować kolor obramowania komórki, szerokość i przezroczystość obramowania:
Musisz wybrać kolor kreski, który będzie odróżniany od monthOutlineColor
, lub wybrać niską przezroczystość. Oto opcje z wykresu powyżej:
var options = { title: 'Red Sox Attendance', height: 350, calendar: { cellColor: { stroke: '#76a7fa', strokeOpacity: 0.5, strokeWidth: 1, } } };
Jeśli na powyższym wykresie wskażesz jeden dzień, obramowanie zostanie oznaczone na czerwono. Możesz kontrolować to zachowanie za pomocą opcji calendar.focusedCellColor
:
var options = { title: 'Red Sox Attendance', height: 350, calendar: { focusedCellColor: { stroke: '#d3362d', strokeOpacity: 1, strokeWidth: 1, } } };
Tygodnie
Domyślnie dni tygodnia są oznaczone pierwszymi literami od niedzieli do soboty.
Nie możesz zmienić kolejności dni, ale możesz zmienić kolejność liter, korzystając z opcji calendar.daysOfWeek
. Oprócz tego możesz dostosować dopełnienie między dniami tygodnia a wykresem za pomocą calendar.dayOfWeekRightSpace
. Możesz też dostosować styl tekstu za pomocą calendar.dayOfWeekLabel
:
Zmieniamy tutaj czcionkę etykiet tygodnia, dodajemy odstęp między nimi a danymi wykresu w odstępach 10 pikseli i zaczynamy tygodnie w poniedziałek.
var options = { title: 'Red Sox Attendance', height: 350, calendar: { dayOfWeekLabel: { fontName: 'Times-Roman', fontSize: 12, color: '#1a8763', bold: true, italic: true, }, dayOfWeekRightSpace: 10, daysOfWeek: 'DLMMJVS', } };
Miesiące
Domyślnie miesiące są oznaczone ciemnymi szarymi liniami. Możesz użyć opcji calendar.monthOutlineColor
, aby kontrolować obramowanie, calendar.monthLabel
, aby dostosować czcionkę etykiety, i calendar.underMonthSpace
, aby dostosować dopełnienie etykiety:
Ustawiliśmy czcionkę etykiety na głębokie, czerwone kursywę (12 pkt.), obrysowaliśmy ten sam kolor i ustawiliśmy dopełnienie z 16 pikselami. Nieużywane kontury miesiąca są ustawione na faworyzujące kolory o tym samym odcieniu.
var options = { title: 'Red Sox Attendance', height: 350, calendar: { monthLabel: { fontName: 'Times-Roman', fontSize: 12, color: '#981b48', bold: true, italic: true }, monthOutlineColor: { stroke: '#981b48', strokeOpacity: 0.8, strokeWidth: 2 }, unusedMonthOutlineColor: { stroke: '#bc5679', strokeOpacity: 0.8, strokeWidth: 1 }, underMonthSpace: 16, } };
Lata
Rok na wykresach kalendarza jest zawsze po lewej stronie wykresu i można go dostosować za pomocą właściwości calendar.yearLabel
oraz calendar.underYearSpace
:
Ustawiliśmy czcionkę roku na ciemnozielony 32 pkt., pogrubioną czcionkę Times-Roman, a następnie dodaliśmy 10 pikseli między etykietami roku a dolną krawędzią wykresu:
var options = { title: 'Red Sox Attendance', height: 350, calendar: { underYearSpace: 10, // Bottom padding for the year labels. yearLabel: { fontName: 'Times-Roman', fontSize: 32, color: '#1A8763', bold: true, italic: true } } };
Wczytuję
Nazwa pakietu google.charts.load
to "calendar"
:
google.charts.load("current", {packages: ["calendar"]});
Nazwa klasy wizualizacji to google.visualization.Calendar
:
var visualization = new google.visualization.Calendar(container);
Format danych
Wiersze: każdy wiersz w tabeli odpowiada dacie.
Kolumny:
Kolumna 0 | Kolumna 1 | … | Kolumna N (opcjonalnie) | |
---|---|---|---|---|
Cel: | Daty | Wartości | … | Role opcjonalne |
Typ danych: | data, data i godzina lub godzina | liczba | … | |
Rola: | domena | dane | … | |
Opcjonalne role kolumn: | Brak |
Brak |
… |
Opcje konfiguracji
Nazwa | |
---|---|
kalendarz.cellColor |
Opcja var options = { calendar: { cellColor: { stroke: 'red', // Color the border of the squares. strokeOpacity: 0.5, // Make the borders half transparent. strokeWidth: 2 // ...and two pixels thick. } } }; Typ: obiekt
Domyślne:
{ stroke: '#fff', strokeOpacity: 1, strokeWidth: 1 } |
kalendarz.komórka |
Rozmiar kwadratów z dnia kalendarzowego: var options = { calendar: { cellSize: 10 } }; Typ: liczba całkowita
Wartość domyślna: 16
|
kalendarz.dzieńTygodniaEtykieta |
Określa styl czcionki etykiet tygodnia na górze wykresu: var options = { calendar: { dayOfWeekLabel: { fontName: 'Times-Roman', fontSize: 12, color: 'black', bold: false, italic: false } } }; Typ: obiekt
Domyślnie:
{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
|
kalendarz.dzieńTygodniaPrawaPasmo |
Odległość między prawą krawędzią etykiet tygodnia a lewą krawędzią kwadratów dnia wykresu. Typ: liczba całkowita
Wartość domyślna: 4
|
kalendarz.dniTygodnia |
Jednoliterowe etykiety używane od niedzieli do soboty. Typ: ciąg znaków
Domyślne:
'SMTWTFS' |
kalendarz.kolorCelów |
Gdy użytkownik wskaże (np. najedzie kursorem) na kwadrat dzienny, wykresy kalendarza zostaną wyróżnione. var options = { calendar: focusedCellColor: { stroke: 'red', strokeOpacity: 0.8, strokeWidth: 3 } } }; Typ: obiekt
Domyślne:
{ stroke: '#000', strokeOpacity: 1, strokeWidth: 2 } |
kalendarz.miesiącEtykieta |
Styl etykiet miesięcy, np.: var options = { calendar: { monthLabel: { fontName: 'Times-Roman', fontSize: 16, color: 'green', bold: true, italic: false } } }; Typ: obiekt
Domyślnie:
{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
|
calendar.monthOutlineColor |
Miesiące z wartościami danych są oddzielane od innych przy użyciu obramowania w tym stylu. var options = { calendar: { monthOutlineColor: { stroke: 'blue', strokeOpacity: 0.8, strokeWidth: 2 } } };Zobacz też calendar.unusedMonthOutlineColor .
Typ: obiekt
Domyślne:
{ stroke: '#000', strokeOpacity: 1, strokeWidth: 1 } |
calendar.underMonthSpace |
Liczba pikseli między etykietami z miesiąca a kwadratami z górnej części dnia: var options = { calendar: { underMonthSpace: 12 } }; Typ: liczba całkowita
Wartość domyślna: 6
|
kalendarz.podrokwrok |
Liczba pikseli między etykietą najniższego roku a dolną krawędzią wykresu: var options = { calendar: { underYearSpace: 2 } }; Typ: liczba całkowita
Wartość domyślna: 0
|
calendar.unusedMonthOutlineColor |
Miesiące bez wartości danych są oddzielane od innych przy użyciu obramowania w tym stylu. var options = { calendar: { unusedMonthOutlineColor: { stroke: 'yellow', strokeOpacity: 0.8, strokeWidth: 2 } } };Zobacz też calendar.monthOutlineColor .
Typ: obiekt
Domyślnie:
{ stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 }
|
kolor osi |
Obiekt określający mapowanie między wartościami kolumn kolorów i kolorami lub skalą gradientu. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w ten sposób: {minValue: 0, colors: ['#FF0000', '#00FF00']} Typ: obiekt
Domyślne:null
|
kolor_osi.kolory |
Kolory, które można przypisać do wartości w wizualizacji. Tablica ciągów znaków, w których każdy jest ciągiem koloru HTML, np. Typ: tablica ciągów kolorów
Domyślne:null
|
kolorAxis.maxValue |
Jeśli jest podany, określa maksymalną wartość danych koloru wykresu. Wartości danych koloru o tej wartości lub wyższej zostaną wyrenderowane jako ostatni kolor w zakresie Typ: liczba
Domyślny:maksymalna wartość kolumny koloru w danych wykresu
|
kolorAxis.minValue |
Jeśli jest podany, określa minimalną wartość danych koloru wykresu. Wartości danych koloru o tej wartości lub niższej będą renderowane jako pierwszy kolor w zakresie Typ: liczba
Wartość domyślna: minimalna wartość kolumny koloru w danych wykresu
|
kolorAxis.values |
Jeśli ta opcja jest dostępna, określa sposób powiązania wartości z kolorami. Każda wartość jest powiązana z odpowiednim kolorem w tablicy Typ: tablica liczb
Domyślne:null
|
forceIFrame |
Rysuje wykres wewnątrz wbudowanej ramki. (Pamiętaj, że ta opcja jest ignorowana w IE8 – wszystkie wykresy IE8 są ujęte w ramki iFrame). Typ: wartość logiczna
Wartość domyślna: false
|
wysokość |
Wysokość wykresu w pikselach. Typ: liczba
Domyślna: wysokość elementu, który go zawiera.
|
NoDataPattern |
Na wykresach w kalendarzu widać ukośne wzorce, które wskazują brak danych z danego dnia. Aby zastąpić ustawienia domyślne w skali szarości, użyj opcji noDataPattern: { backgroundColor: '#76a7fa', color: '#a0c3ff' } Typ: obiekt
Domyślne: null
|
tooltip.isHtml |
Ustaw wartość Uwaga: dostosowywanie zawartości etykietek HTML za pomocą roli danych kolumny etykietki nie jest obsługiwane w wizualizacjach wykresu kołowego ani wykresu bąbelkowego. Typ: wartość logiczna
Wartość domyślna: true
|
szerokość |
Szerokość wykresu w pikselach. Typ: liczba
Domyślna – szerokość elementu, który zawiera.
|
Metody
Metoda | |
---|---|
draw(data, options) |
Rysuje wykres. Wykres akceptuje dalsze wywołania metody dopiero po wywołaniu zdarzenia Typ zwrotu: brak
|
getBoundingBox(id) |
Zwraca obiekt zawierający lewą, górną, szerokość i wysokość elementu wykresu
Wartości odnoszą się do kontenera wykresu. Wywołuj je po narysowaniu wykresu. Typ zwrotu: obiekt
|
getSelection() |
Zwraca tablicę wybranych elementów wykresu.
Elementy, które można wybrać, to paski, legendy i kategorie.
Pasek odnosi się do komórki tabeli danych, wpisu legendy do kolumny (indeks wiersza ma wartość null) i kategorii do wiersza (indeks kolumny ma wartość null).
Na tym wykresie w danym momencie możesz wybrać tylko 1 element.
Typ zwrotu: tablica elementów wyboru.
|
setSelection() |
Zaznacza określone elementy wykresu. Anuluje poprzedni wybór.
Elementy, które można wybrać, to paski, legendy i kategorie.
Pasek odnosi się do komórki tabeli danych, wpisu legendy do kolumny (indeks wiersza ma wartość null) i kategorii do wiersza (indeks kolumny ma wartość null).
Na tym wykresie możesz wybrać tylko jeden element naraz.
Typ zwrotu: brak
|
clearChart() |
Czyści wykres i usuwa wszystkie przydzielone zasoby. Typ zwrotu: brak
|
Zdarzenia
Nazwa | |
---|---|
error |
Uruchamiane, gdy podczas próby renderowania wykresu wystąpi błąd. Właściwości: id, message
|
onmouseover |
Uruchamiane, gdy użytkownik najedzie kursorem na jednostkę wizualną. Przekazuje indeks wiersza i wartość daty elementu. Jeśli element nie zawiera elementu tabeli danych, zwrócona wartość indeksu wiersza to Właściwości: wiersz, data.
|
onmouseout |
Uruchamiane, gdy użytkownik odsunie kursor od jednostki wizualnej. Zwraca indeks wiersza i wartość daty encji. Jeśli element nie zawiera elementu tabeli danych, zwracana wartość indeksu wiersza to Wiersz Właściwości, data
|
ready |
Wykres jest gotowy do wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywoływania po narysowaniu, musisz skonfigurować odbiornik 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 do żadnego serwera.