Wykres dotyczący Kalendarza

  1. Przegląd
  2. Prosty przykład
  3. Dni
  4. Tygodnie
  5. Miesiące
  6. Lata
  7. Wczytuję
  8. Format danych
  9. Opcje konfiguracji
  10. Metody
  11. Zdarzenia
  12. Zasady dotyczące danych

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 calendar.cellColor pozwala dostosować obramowanie kwadratów dnia kalendarzowego: 

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. colorAxis: {colors:['red','#004411']}. Musisz mieć co najmniej 2 wartości. gradient będzie zawierał wszystkie wartości oraz obliczone wartości pośrednie – pierwszy kolor będzie najmniejszy, a ostatni – najwyższym.

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 colorAxis.colors.

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 colorAxis.colors.

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 colorAxis.colors. Te wartości mają zastosowanie do danych koloru wykresu. Kolorystyka odbywa się zgodnie z gradientem wartości podanych w tym miejscu. Brak wartości dla tej opcji to odpowiednik [minValue, maxValue].

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 i noDataPattern.color, np.: 

noDataPattern: {
  backgroundColor: '#76a7fa',
  color: '#a0c3ff'
}
Typ: obiekt
Domyślne: null
tooltip.isHtml

Ustaw wartość false, aby używać etykiet z renderowaniem SVG (a nie z renderowaniem HTML). Więcej informacji znajdziesz w artykule Dostosowywanie treści etykietki.

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 ready. Extended description,

Typ zwrotu: brak
getBoundingBox(id)

Zwraca obiekt zawierający lewą, górną, szerokość i wysokość elementu wykresu id. Format elementu id nie został jeszcze udokumentowany (to wartości zwracane przez moduły obsługi zdarzeń), ale Oto kilka przykładów:

var cli = chart.getChartLayoutInterface();

Wysokość obszaru wykresu
cli.getBoundingBox('chartarea').height
Szerokość trzeciego słupka w pierwszej serii wykresu słupkowego lub kolumnowego
cli.getBoundingBox('bar#0#2').width
Ramka ograniczająca piątej podkładki klinowej do wykresu kołowego
cli.getBoundingBox('slice#4')
Ramka ograniczająca dane z wykresu pionowego (np. kolumny):
cli.getBoundingBox('vAxis#0#gridline')
Ramka ograniczająca danych na wykresie poziomym (np. słupkowym):
cli.getBoundingBox('hAxis#0#gridline')

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. Extended description.

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. Extended description.

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 undefined.

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 undefined.

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 draw i wywołanie ich dopiero po uruchomieniu zdarzenia.

Właściwości: brak
select

Uruchamiane, gdy użytkownik kliknie element wizualny. Aby dowiedzieć się, co zostało wybrane, zadzwoń pod numer getSelection().

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.