Wykres z kalendarza

  1. Overview
  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: JavaScript liczy miesiące, zaczynając od zera: styczeń to 0, 1 lutego, a 11 grudnia. Jeśli wykres kalendarzowy wydaje się odległy od miesiąca, to właśnie jest przyczyną problemu.

Wykres kalendarzowy to wizualizacja używana do przedstawiania aktywności w długim okresie, np. miesiącach lub latach. Są one szczególnie przydatne, gdy chcesz pokazać, jak pewne ilości zmieniają się w zależności od dnia tygodnia lub jak zmieniają się w czasie.

Wykres kalendarzowy może zostać znacząco zmieniony w przyszłych wersjach Listy przebojów Google.

Wykresy Kalendarza są renderowane w przeglądarce za pomocą SVG lub VML, w zależności od tego, co jest odpowiednie w przeglądarce użytkownika. Podobnie jak wszystkie wykresy Google, wykresy kalendarza wyświetlają etykietki, gdy użytkownik najedzie na dane. I przypisywanie udziału – nasz wykres kalendarzowy został zainspirowany wizualizacją kalendarza D3.

Prosty przykład

Załóżmy, że chcemy pokazać, jak frekwencja drużyny sportowej zmieniała się w trakcie sezonu. Na wykresie kalendarzowym możemy używać jasności, aby wskazywać wartości i umożliwiać użytkownikom szybkie dostrzeżenie trendów:

Możesz najeżdżać kursorem na poszczególne dni, aby zobaczyć wartości danych.

Aby utworzyć wykres kalendarzowy, wczytaj pakiet calendar, a następnie utwórz 2 kolumny – jedną na daty i jedną na wartości. (Opcjonalna trzecia kolumna z niestandardowymi stylami będzie dostępna w przyszłej wersji Wykresów Google).

Następnie wypełnij wiersze parami data i wartość, 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 oznacza jeden dzień. Obecnie nie można dostosować koloru komórek danych, ale zmieni się to w kolejnej wersji wykresów Google.

Jeśli wszystkie wartości danych są dodatnie, kolory mają zakres od białego do niebieskiego, przy czym najgłębszy niebieski wskazuje najwyższe wartości. Jeśli występują wartości danych ujemne, będą miały kolor pomarańczowy, jak pokazano 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 ],

Wielkość dni („komórki”) możesz zmienić za pomocą opcji calendar.cellSize:

Zmieniliśmy tutaj wartość calendar.cellSize na 10, co spowoduje zmniejszenie liczby dni i w konsekwencji całego wykresu. 

       var options = {
         title: 'Red Sox Attendance',
         calendar: { cellSize: 10 },
       };

Dni bez wartości danych można dostosować za pomocą opcji noDataPattern:

W tym przykładzie ustawiamy kolor color na jasnoniebieski, a backgroundColor na nieco ciemniejszy odcień: 

       var options = {
         title: "Red Sox Attendance",
         height: 350,
         noDataPattern: {
           backgroundColor: '#76a7fa',
           color: '#a0c3ff'
         }
       };

Za pomocą calendar.cellColor możesz kontrolować kolor i szerokość obramowania komórek oraz przezroczystość:

Musisz wybrać kolor konturu, który będzie odróżniał się od monthOutlineColor, lub ustawić niską przezroczystość. W przypadku powyższego wykresu dostępne są te opcje: 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      cellColor: {
        stroke: '#76a7fa',
        strokeOpacity: 0.5,
        strokeWidth: 1,
      }
    }
  };

Gdy na wykresie powyżej wybierzesz dzień, jego obramowanie będzie zaznaczone na czerwono. Możesz sterować tym działaniem za pomocą opcji calendar.focusedCellColor: 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      focusedCellColor: {
        stroke: '#d3362d',
        strokeOpacity: 1,
        strokeWidth: 1,
      }
    }
  };

Tygodnie

Dni tygodnia są domyślnie oznaczone pierwszymi literami od niedzieli do soboty. Nie możesz zmienić kolejności dni, ale za pomocą opcji calendar.daysOfWeek możesz zmienić używane litery. Za pomocą właściwości calendar.dayOfWeekRightSpace możesz też kontrolować dopełnienie między dniami tygodnia a wykresem, a styl tekstu za pomocą właściwości calendar.dayOfWeekLabel:

W tym miejscu zmieniamy czcionkę etykiet tygodnia, umieszczamy 10-pikselowe dopełnienie między etykietami a danymi na wykresie, a tydzień zaczyna się 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 ciemnoszarymi liniami. Za pomocą opcji calendar.monthOutlineColor możesz kontrolować obramowanie, calendar.monthLabel do dostosowywania czcionki etykiety, a calendar.underMonthSpace do dostosowywania dopełnienia etykiety:

Ustawiamy czcionkę etykiety na ciemnoczerwony 12-punktowy tekst Times-Roman, pogrubioną kursywę, ustawiliśmy ten sam kolor konturu i umieściliśmy dopełnienie o wysokości 16 pikseli. Nieużywane kontury miesiąca są ustawione na słabszy kolor z tym samym odcieniem. 

  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

Lata na wykresach w kalendarzu są zawsze widoczne po lewej stronie wykresu i można je dostosować za pomocą właściwości calendar.yearLabel i calendar.underYearSpace:

Ustawiamy czcionkę roku na ciemnozieloną 32-punktową kursywę Times-Roman i dodamy 10 pikseli między etykietami roku a dolną częścią 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 tabeli przedstawia datę.

Kolumny:

  Kolumna 0 Kolumna 1 ... Kolumna N (opcjonalna)
Przeznaczenie: Daty Wartości ... Role opcjonalne
Typ danych: date, datetime lub timeofday Liczba ...
Rola: domena dane ...
Opcjonalne role kolumny:

Brak

Brak

 ...

 

Opcje konfiguracji

Nazwa
calendar.cellColor

Opcja calendar.cellColor umożliwia dostosowanie obramowania kwadratów z dniami kalendarzowymi: 

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
Wartość domyślna: { stroke: '#fff', strokeOpacity: 1, strokeWidth: 1 }
calendar.cellSize

Rozmiar kwadratów dni w kalendarzu:

var options = { calendar: { cellSize: 10 } };
Typ: liczba całkowita
Wartość domyślna: 16
calendar.dayOfWeekLabel

Określa styl czcionki etykiet tygodnia u góry 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 }
calendar.dayOfWeekRightSpace

Odległość między prawą krawędzią etykiet tygodnia a lewą krawędzią kwadratów dni na wykresie.

Typ: liczba całkowita
Wartość domyślna: 4
calendar.daysOfWeek

Jednoliterowe etykiety używane od niedzieli do soboty.

Typ: ciąg znaków
Wartość domyślna: 'SMTWTFS'
calendar.focusedCellColor

Gdy użytkownik zaznaczy (na przykład po najechaniu kursorem) na kwadrat dzienny, na wykresach w kalendarzu zostanie on wyróżniony. 

var options = {
  calendar:
    focusedCellColor: {
      stroke: 'red',
      strokeOpacity: 0.8,
      strokeWidth: 3
    }
  }
};
Typ: obiekt
Wartość domyślna: { stroke: '#000', strokeOpacity: 1, strokeWidth: 2 }
calendar.monthLabel

Styl etykiet miesiąca, 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ą oddzielone od innych za pomocą obramowania w tym stylu.

var options = {
  calendar: {
    monthOutlineColor: {
      stroke: 'blue',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
(Zobacz też: calendar.unusedMonthOutlineColor).
Typ: obiekt
Wartość domyślna: { stroke: '#000', strokeOpacity: 1, strokeWidth: 1 }
calendar.underMonthSpace

Liczba pikseli między dolnymi etykietami miesiąca i górnymi kwadratami dnia: 

var options = { calendar: { underMonthSpace: 12 } };
Typ: liczba całkowita
Wartość domyślna: 6
calendar.underYearSpace

Liczba pikseli między etykietą roku u dołu i u dołu wykresu:

var options = { calendar: { underYearSpace: 2 } };
Typ: liczba całkowita
Wartość domyślna: 0
calendar.unusedMonthOutlineColor

Miesiące bez wartości danych są oddzielone od innych za pomocą 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 }
colorAxis

Obiekt, który określa mapowanie między wartościami i kolorami w kolumnie koloru lub skalę gradientu. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu, jak pokazano poniżej: 

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
Typ: obiekt
Wartość domyślna:null
colorAxis.colors

Kolory do przypisania do wartości w wizualizacji. Tablica ciągów tekstowych, w których każdy element jest ciągiem znaków koloru HTML, np. colorAxis: {colors:['red','#004411']}. Musisz mieć co najmniej 2 wartości. Gradient będzie obejmować wszystkie wartości oraz obliczone wartości pośrednie, przy czym pierwszy kolor ma najmniejszą wartość, a ostatni – najwyższą.

Typ: tablica ciągów kolorów
Wartość domyślna:null
colorAxis.maxValue

Jeśli ta opcja jest dostępna, określa maksymalną wartość danych koloru wykresu. Wartości danych koloru o tej i wyższych wartościach będą renderowane jako ostatni kolor w zakresie colorAxis.colors.

Typ: liczba
Domyślnie: maksymalna wartość kolumny koloru w danych wykresu
colorAxis.minValue

Jeśli ta opcja jest dostępna, określa minimalną wartość danych koloru wykresu. Wartości danych koloru o tej i niższych wartościach będą renderowane jako pierwszy kolor w zakresie colorAxis.colors.

Typ: liczba
Domyślnie: minimalna wartość kolumny koloru w danych wykresu
colorAxis.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. Wartości te mają zastosowanie do danych o kolorach na wykresie. Kolorowanie odbywa się zgodnie z gradientem wartości określonych w tym miejscu. Niepodanie wartości w przypadku tej opcji jest równoważne z podanie wartości [minValue, maxValue].

Typ: tablica liczb
Wartość domyślna:null
forceIFrame

Rysuje wykres wewnątrz ramki wbudowanej. (Pamiętaj, że w IE8 ta opcja jest ignorowana – wszystkie wykresy w IE8 są rysowane w ramkach i-frame).

Typ: wartość logiczna
Wartość domyślna: fałsz.
wysokość

Wysokość wykresu w pikselach.

Typ: liczba
Domyślna: wysokość elementu nadrzędnego.
noDataPattern

Na wykresach w kalendarzu paskowane ukośne wzór oznacza, że nie ma danych z określonego dnia. Za pomocą opcji noDataPattern.backgroundColor i noDataPattern.color możesz zastąpić domyślne ustawienia skali szarości, np.: 

noDataPattern: {
  backgroundColor: '#76a7fa',
  color: '#a0c3ff'
}
Typ: obiekt
Wartość domyślna:null
tooltip.isHtml

Aby używać etykiet wyrenderowanych w formacie SVG (a nie renderowanych przez HTML), ustaw wartość false. Więcej informacji znajdziesz w sekcji Dostosowywanie treści etykietki .

Uwaga: wizualizacje wykres kołowy i Wykres bąbelkowy nie obsługują dostosowywania zawartości etykietki HTML za pomocą roli danych kolumny etykietki.

Typ: wartość logiczna
Wartość domyślna:true (prawda)
szerokość

Szerokość wykresu w pikselach.

Typ: liczba
Domyślna: szerokość elementu nadrzędnego.

Metody

Metoda
draw(data, options)

Rysuje wykres. Wykres akceptuje kolejne wywołania metod dopiero po wywołaniu zdarzenia ready. Extended description.

Return Type: brak
getBoundingBox(id)

Zwraca obiekt zawierający lewo, górę, szerokość i wysokość elementu wykresu id. Format zapisu id nie jest jeszcze udokumentowany (są 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 na wykresie kołowym
cli.getBoundingBox('slice#4')
Ramka ograniczająca dane wykresu pionowego (np. kolumnowego):
cli.getBoundingBox('vAxis#0#gridline')
Ramka ograniczająca dane wykresu poziomego (np. słupkowego):
cli.getBoundingBox('hAxis#0#gridline')

Wartości odnoszą się do kontenera wykresu. Wywołuj je po narysowaniu wykresu.

Return Type: (Typ zwracania): obiekt
getSelection()

Zwraca tablicę wybranych elementów wykresu. Elementy, które można wybrać, to paski, wpisy z legendy i kategorie. Słupek odpowiada komórce w tabeli danych, wpisowi w legendzie kolumnie (indeks wiersza ma wartość null) i kategorii wiersza (indeks kolumny ma wartość null). Na tym wykresie w danym momencie można wybrać tylko 1 element. Extended description

Return Type: tablica elementów zaznaczenia.
setSelection()

Wybiera określone elementy wykresu. Anuluje wcześniejszy wybór. Elementy, które można wybrać, to paski, wpisy z legendy i kategorie. Słupek odpowiada komórce w tabeli danych, wpisowi w legendzie kolumnie (indeks wiersza ma wartość null) i kategorii wiersza (indeks kolumny ma wartość null). Na tym wykresie można wybrać tylko 1 element naraz. Extended description

Return Type: brak
clearChart()

Czyści wykres i zwalnia wszystkie przydzielone Ci zasoby.

Return Type: brak

Zdarzenia

Nazwa
error

Uruchamiane, gdy podczas próby wyrenderowania wykresu wystąpi błąd.

Właściwości: identyfikator, komunikat
onmouseover

Uruchamiane, gdy użytkownik najedzie kursorem na element wizualny. Zwraca indeks wiersza i wartość daty encji. Jeśli dla elementu nie ma elementu tabeli danych, zwracana wartość indeksu wiersza wynosi undefined.

Właściwości: wiersz, data
onmouseout

Uruchamiane, gdy użytkownik najedzie kursorem poza obiekt wizualny. Zwraca indeks wiersza i wartość daty encji. Jeśli element nie ma elementu tabeli danych, zwracana wartość indeksu wiersza wynosi undefined.

Wiersz właściwości, data
ready

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.

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 na żaden serwer.