Takvim Grafiği

  1. Genel bakış
  2. Basit bir örnek
  3. Gün
  4. Hafta
  5. Ay
  6. Yıllar
  7. Yükleniyor
  8. Veri Biçimi
  9. Yapılandırma Seçenekleri
  10. Yöntemler
  11. Etkinlikler
  12. Veri Politikası

Genel bakış

Not: JavaScript, ayları sıfır'dan itibaren sayar: Ocak 0, Şubat 1 ve Aralık 11'dir. Takvim grafiğiniz bir ay yanlış görünüyorsa nedeni budur.

Takvim grafiği, aylar veya yıllar gibi uzun bir zaman aralığındaki etkinlikleri göstermek için kullanılan bir görselleştirmedir. Belirli bir miktarın haftanın gününe göre nasıl değiştiğini veya zaman içinde nasıl bir eğilim gösterdiğini göstermek istediğinizde kullanmanız daha uygun olur.

Takvim grafiği, gelecekteki Google Grafikler sürümlerinde önemli değişiklikler yapıyor olabilir.

Takvim grafikleri, kullanıcının tarayıcısı için uygun olan SVG veya VML kullanılarak tarayıcıda oluşturulur. Tüm Google grafiklerinde olduğu gibi takvim grafiklerinde de kullanıcılar verilerin üzerine geldiğinde ipuçları görüntülenir. Kredinin verilmesi gereken kredi: Takvim grafiğimizde, D3 takvim görselleştirmesinden esinlenildi.

Basit Bir Örnek

Bir spor takımının katılımlarının sezon boyunca nasıl değiştiğini göstermek istediğimizi varsayalım. Takvim grafiğinde, değerleri belirtmek ve kullanıcıların trendleri bir bakışta görmesini sağlamak için parlaklığı kullanabiliriz:

Temel veri değerlerini görmek için fareyi tek tek günlerin üzerine getirebilirsiniz.

Takvim grafiği oluşturmak için calendar paketini yükleyin, ardından biri tarihler, diğeri değerler için olmak üzere iki sütun oluşturun. (Özelleştirilmiş stil için isteğe bağlı üçüncü bir sütun, gelecekteki bir Google Charts sürümünde kullanıma sunulacaktır.)

Daha sonra, satırlarınızı aşağıda gösterildiği gibi tarih-değer çiftleriyle doldurun.

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

Gün

Takvim grafiğindeki her kare bir günü temsil eder. Şu anda veri hücrelerinin rengi özelleştirilememektedir, ancak Google Grafikler'in bir sonraki sürümünde bu durum değişecektir.

Veri değerlerinin tümü pozitifse renkler beyazdan maviye kadar değişir. En derin maviler en yüksek değerleri gösterir. Negatif veri değerleri varsa bunlar aşağıda gösterildiği gibi turuncu renkte görünür.

Bu takvimin kodu ilk takvime benzer, ancak satırlar şu şekilde görünür:

          [ 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 ],

calendar.cellSize seçeneğini kullanarak günlerin ("hücreler") boyutunu değiştirebilirsiniz:

Burada calendar.cellSize değerini 10 olarak değiştirip günleri ve dolayısıyla bir bütün olarak grafiği küçülttük. 

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

Veri değeri olmayan günler, noDataPattern seçeneğiyle özelleştirilebilir:

Burada, color için açık mavi, backgroundColor için de biraz daha koyu bir tona ayarlıyoruz: 

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

calendar.cellColor ile hücre kenarlığı rengini, kenarlık genişliğini ve opaklığını kontrol edebilirsiniz:

monthOutlineColor ile ayırt edilecek bir fırça rengi veya düşük opaklıklı bir seçim yaparken dikkatli olmanız gerekir. Yukarıdaki grafikle ilgili seçenekler şunlardır: 

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

Yukarıdaki grafikte bir güne odaklanırsanız kenarlık kırmızı renkle vurgulanır. Bu davranışı calendar.focusedCellColor seçenekleriyle kontrol edebilirsiniz: 

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

Hafta

Varsayılan olarak, haftanın günleri pazardan cumartesiyenin ilk harfleriyle etiketlenir. Günlerin sıralamasını değiştiremezsiniz ancak calendar.daysOfWeek seçeneğiyle kullanılan harfleri değiştirebilirsiniz. Ayrıca, calendar.dayOfWeekRightSpace kullanarak haftanın günleri ile grafik arasındaki dolguyu kontrol edebilir ve metin stilini calendar.dayOfWeekLabel ile özelleştirebilirsiniz:

Burada, hafta etiketlerinin yazı tipini değiştiriyor, etiketler ile grafik verileri arasına 10 piksellik bir dolgu koyuyoruz ve haftaları Pazartesi'den itibaren başlatıyoruz. 

  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',
    }
  };

Aylar

Aylar varsayılan olarak koyu gri çizgilerle tanımlanır. Kenarlıkları kontrol etmek için calendar.monthOutlineColor seçeneğini, etiketin yazı tipini özelleştirmek için calendar.monthLabel seçeneğini ve etiket dolgusunu ayarlamak için calendar.underMonthSpace seçeneğini kullanabilirsiniz:

Etiketin yazı tipini koyu kırmızı, 12 punto Times-Roman kalın italik olarak ayarladık, dış çizgileri aynı renge ayarladık ve 16 piksellik bir dolgu koyduk. Kullanılmayan ay sınırları aynı tonda daha soluk bir renge ayarlanır. 

  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,
    }
  };

Yıllar

Takvim grafiklerindeki yıllar daima grafiğin sol kenarında yer alır ve calendar.yearLabel ile calendar.underYearSpace ile özelleştirilebilir:

Yıl yazı tipini koyu yeşil 32 punto Times-Roman kalın italik olarak ayarladık ve yıl etiketleriyle grafiğin alt kısmı arasına on piksel ekledik: 

  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
      }
    }
  };

Yükleniyor

google.charts.load paketinin adı "calendar": 

  google.charts.load("current", {packages: ["calendar"]});

Görselleştirmenin sınıf adı: google.visualization.Calendar: 

  var visualization = new google.visualization.Calendar(container);

Veri Biçimi

Satırlar: Tablodaki her satır bir tarihi temsil eder.

Sütunlar:

  Sütun 0 1. Sütun ... Sütun N (isteğe bağlı)
Amaç: Tarihler Değerler ... İsteğe bağlı roller
Veri Türü: tarih, tarih, saat veya günün saati sayı ...
Rol: alan veri ...
İsteğe bağlı sütun rolleri:

Yok

Yok

 ...

 

Yapılandırma Seçenekleri

Ad
calendar.cellColor

calendar.cellColor seçeneği, takvim günü karelerinin kenarlığını özelleştirmenize olanak tanır: 

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.
    }
  }
};
Tür: nesne
Varsayılan: { stroke: '#fff', strokeOpacity: 1, strokeWidth: 1 }
calendar.cellSize

Takvim günü karelerinin boyutu:

var options = { calendar: { cellSize: 10 } };
Tür: tam sayı
Varsayılan: 16
calendar.dayOfWeekLabel

Grafiğin üst kısmındaki hafta etiketlerinin yazı tipi stilini kontrol eder:

var options = {
  calendar: {
    dayOfWeekLabel: {
      fontName: 'Times-Roman',
      fontSize: 12,
      color: 'black',
      bold: false,
      italic: false
    }
  }
};
Tür: nesne
Varsayılan: { fontName: 'sans-serif', color: '#888', bold: false, italic: false }
calendar.dayOfWeekRightSpace

Hafta etiketlerinin sağ kenarı ile grafik gün karelerinin sol kenarı arasındaki mesafe.

Tür: tam sayı
Varsayılan: 4
calendar.daysOfWeek

Pazardan cumartesiye kadar kullanılan tek harfli etiketler.

Tür: dize
Varsayılan: 'SMTWTFS'
calendar.focusedCellColor

Kullanıcı bir gün karesinin üzerine geldiğinde (örneğin fareyle üzerine gelindiğinde) takvim grafiklerinde kare vurgulanır. 

var options = {
  calendar:
    focusedCellColor: {
      stroke: 'red',
      strokeOpacity: 0.8,
      strokeWidth: 3
    }
  }
};
Tür: nesne
Varsayılan: { stroke: '#000', strokeOpacity: 1, strokeWidth: 2 }
calendar.monthLabel

Ay etiketleri için stil, ör.:

      var options = {
        calendar: {
          monthLabel: {
            fontName: 'Times-Roman',
            fontSize: 16,
            color: 'green',
            bold: true,
            italic: false
          }
        }
      };
Tür: nesne
Varsayılan: { fontName: 'sans-serif', color: '#888', bold: false, italic: false }
calendar.monthOutlineColor

Veri değerleri içeren aylar, bu stilde bir kenarlık kullanılarak diğer aylardan ayrılır.

var options = {
  calendar: {
    monthOutlineColor: {
      stroke: 'blue',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
(Ayrıca bkz. calendar.unusedMonthOutlineColor.)
Tür: nesne
Varsayılan: { stroke: '#000', strokeOpacity: 1, strokeWidth: 1 }
calendar.underMonthSpace

Ay etiketlerinin alt kısmı ile günün üst kısmı kareleri arasındaki piksel sayısı: 

var options = { calendar: { underMonthSpace: 12 } };
Tür: tam sayı
Varsayılan: 6
calendar.underYearSpace

En alttaki yıl etiketi ile grafiğin alt kısmı arasındaki piksel sayısı:

var options = { calendar: { underYearSpace: 2 } };
Tür: tam sayı
Varsayılan: 0
calendar.unusedMonthOutlineColor

Veri değeri olmayan aylar, bu stilde bir kenarlık kullanılarak diğer aylardan ayrılır. 

var options = {
  calendar: {
    unusedMonthOutlineColor: {
      stroke: 'yellow',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
(Ayrıca bkz. calendar.monthOutlineColor.)
Tür: nesne
Varsayılan: { stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 }
colorAxis

Renk sütunu değerleri ile renkler veya gradyan ölçeği arasında eşleme belirten bir nesne. Bu nesnenin özelliklerini belirtmek için burada gösterildiği gibi nesne değişmez değer gösterimini kullanabilirsiniz: 

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
Tür: nesne
Varsayılan: null
colorAxis.colors

Görselleştirmedeki değerlere atanacak renkler. Her öğenin bir HTML renk dizesi olduğu bir dize dizisi. Örneğin: colorAxis: {colors:['red','#004411']}. En az iki değere sahip olmanız gerekir. Renk geçişi, tüm değerlerinizi ve ilk renk en küçük, son renk en yüksek değer olacak şekilde hesaplanan ara değerleri içerir.

Tür: renk dizelerinden oluşan dizi
Varsayılan: null
colorAxis.maxValue

Varsa grafik rengi verileri için maksimum değer belirtir. Bu değer ve daha yüksek olan renk verisi değerleri, colorAxis.colors aralığındaki son renk olarak oluşturulur.

Tür: numara
Varsayılan: Grafik verilerindeki maksimum renk sütunu değeri
colorAxis.minValue

Varsa grafik renk verileri için minimum değeri belirtir. Bu değerin ve altındaki renk verisi değerleri, colorAxis.colors aralığındaki ilk renk olarak oluşturulur.

Tür: numara
Varsayılan: Grafik verilerindeki minimum renk sütunu değeri
colorAxis.values

Varsa değerlerin renklerle nasıl ilişkilendirileceğini kontrol eder. Her değer, colorAxis.colors dizisindeki karşılık gelen renkle ilişkilendirilir. Bu değerler, grafik renk verileri için geçerlidir. Renklendirme, burada belirtilen değerlerin bir gradyanına göre yapılır. Bu seçenek için bir değer belirtmemek, [minValue, maxValue] belirtmekle eşdeğerdir.

Tür: sayı dizisi
Varsayılan: null
forceIFrame

Grafiği bir satır içi çerçevenin içine çizer. (IE8'de bu seçeneğin yoksayıldığını unutmayın. Tüm IE8 grafikleri, iç çerçeveler kullanılarak çizilir.)

Tür: boole
Varsayılan: false
yükseklik

Grafiğin piksel cinsinden yüksekliği.

Tür: numara
Varsayılan: kapsayıcı öğenin yüksekliği
noDataPattern

Takvim grafiklerinde, belirli bir gün için veri olmadığını belirtmek amacıyla çapraz olarak çizgili bir desen kullanılır. Gri tonlamalı varsayılanları geçersiz kılmak için noDataPattern.backgroundColor ve noDataPattern.color seçeneklerini kullanın. Örnek: 

noDataPattern: {
  backgroundColor: '#76a7fa',
  color: '#a0c3ff'
}
Tür: nesne
Varsayılan: null
tooltip.isHtml

SVG ile oluşturulmuş (HTML tarafından oluşturulan) ipuçlarını kullanmak için false olarak ayarlayın. Daha fazla ayrıntı için İpucu İçeriğini Özelleştirme bölümüne bakın.

Not: HTML ipucu içeriğinin ipucu sütunu veri rolü aracılığıyla özelleştirilmesi Pasta Grafik ve Balon Grafik görselleştirmeleri tarafından desteklenmez.

Tür: boole
Varsayılan: true
genişlik

Grafiğin piksel cinsinden genişliği.

Tür: numara
Varsayılan: kapsayıcı öğenin genişliği

Yöntemler

Yöntem
draw(data, options)

Grafiği çizer. Grafik, yalnızca ready etkinliği etkinleştikten sonra başka yöntem çağrılarını kabul eder. Extended description.

Return Type (Dönüş Türü): yok
getBoundingBox(id)

id grafik öğesinin sol, üst, genişlik ve yüksekliğini içeren bir nesne döndürür. id biçimi henüz belgelenmemiştir (bunlar, etkinlik işleyicilerin döndürülen değerleridir). Aşağıda bazı örnekler verilmiştir:

var cli = chart.getChartLayoutInterface();

Grafik alanının yüksekliği
cli.getBoundingBox('chartarea').height
Bir çubuk veya sütun grafiğin ilk serisindeki üçüncü çubuğun genişliği
cli.getBoundingBox('bar#0#2').width
Pasta grafiğin beşinci dilimindeki sınırlayıcı kutu
cli.getBoundingBox('slice#4')
Bir dikey (ör. sütun) grafiğin grafik verileri için sınırlayıcı kutu:
cli.getBoundingBox('vAxis#0#gridline')
Yatay (ör. çubuk) bir grafiğin grafik verileri için sınırlayıcı kutu:
cli.getBoundingBox('hAxis#0#gridline')

Değerler, grafiğin kapsayıcısına bağlıdır. Grafik çizildikten sonra bunu çağırın.

Return Type: nesne
getSelection()

Seçilen grafik varlıklarından oluşan bir dizi döndürür. Seçilebilir varlıklar çubuklar, gösterge girişleri ve kategorilerdir. Çubuk, veri tablosundaki bir hücreye, bir sütuna açıklama girişine (satır dizini null) ve bir satıra (sütun dizini null) karşılık gelir. Bu grafik için aynı anda yalnızca bir öğe seçilebilir. Extended description .

Dönüş Türü: Seçim öğeleri dizisi
setSelection()

Belirtilen grafik varlıklarını seçer. Önceki seçimleri iptal eder. Seçilebilir varlıklar çubuklar, gösterge girişleri ve kategorilerdir. Çubuk, veri tablosundaki bir hücreye, bir sütuna açıklama girişine (satır dizini null) ve bir satıra (sütun dizini null) karşılık gelir. Bu grafik için aynı anda yalnızca bir öğe seçilebilir. Extended description .

Return Type (Dönüş Türü): yok
clearChart()

Grafiği temizler ve ayrılan tüm kaynaklarını serbest bırakır.

Return Type (Dönüş Türü): yok

Etkinlikler

Ad
error

Grafik oluşturulmaya çalışılırken bir hata oluştuğunda tetiklenir.

Özellikler: kimlik, mesaj
onmouseover

Kullanıcı fareyle bir görsel öğenin üzerine geldiğinde tetiklenir. Varlığın satır dizinini ve tarih değerini geri verir. Varlık için bir veri tablosu öğesi yoksa satır dizini için döndürülen değer undefined olur.

Özellikler: satır, tarih
onmouseout

Kullanıcı faresini görsel bir öğeden uzaklaştırdığında tetiklenir. Varlığın satır dizinini ve tarih değerini geri verir. Varlık için bir veri tablosu öğesi yoksa satır dizini için döndürülen değer undefined olur.

Özellikler satırı, tarih
ready

Grafik, harici yöntem çağrıları için hazır. Grafikle etkileşim kurmak ve çizdikten sonra yöntemleri çağırmak isterseniz draw yöntemini çağırmadan önce bu etkinlik için bir işleyici ayarlamalı ve bunları yalnızca etkinlik tetiklendikten sonra çağırmalısınız.

Özellikler: yok
select

Kullanıcı bir görsel öğeyi tıkladığında tetiklenir. Neyin seçildiğini öğrenmek için getSelection() numaralı telefonu arayın.

Özellikler: yok

Veri Politikası

Tüm kod ve veriler tarayıcıda işlenip oluşturulur. Herhangi bir sunucuya veri gönderilmez.