Bu sayfa, Cloud Translation API ile çevrilmiştir.

Ek Açıklamalı Zaman Çizelgesi

Genel bakış
Örnek
Yükleniyor
Veri Biçimi
Yapılandırma Seçenekleri
Yöntemler
Etkinlikler
Veri Politikası
Notlar

Genel bakış

İsteğe bağlı ek açıklamalar içeren etkileşimli zaman serisi çizgi grafiği.

Ek açıklamalı zaman çizelgesi artık otomatik olarak Ek Açıklama Grafiklerini kullanıyor.

Örnek

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

Önemli: Bu görselleştirmeyi kullanmak için kapsayıcı öğesinin yüksekliğini ve genişliğini sayfanızda açık bir şekilde belirtmeniz gerekir. Örneğin, <div id="chart_div" style="width:400; height:250"></div>.

Yükleniyor

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

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

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

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

Veri Biçimi

Grafiğinizde bir veya daha fazla çizgi görüntüleyebilirsiniz. Her satır, grafikte bir X konumunu, yani belirli bir zamanı temsil eder. Her satır, bir ila üç sütunlu bir kümeyle tanımlanır.

İlk sütun date veya datetime türündedir ve grafikteki noktanın X değerini belirtir. Bu sütunun türü date ise (ve datetime değilse) X eksenindeki en küçük zaman çözünürlüğü bir gün olur.
Daha sonra her veri satırı, aşağıda açıklandığı gibi bir ila üç ek sütundan oluşan bir grupla tanımlanır:
- Y değeri - [Zorunlu, Sayı] Her bir gruptaki ilk sütun, satırın karşılık gelen zamanda ilk sütundaki değerini açıklar. Sütun etiketi, grafikte söz konusu satırın başlığı olarak görüntülenir.
- Ek açıklama başlığı - [İsteğe bağlı, Dize] Bir dize sütunu değer sütununu takip ediyorsa ve displayAnnotations seçeneği doğruysa bu sütunda bu noktayı açıklayan kısa bir başlık bulunur. Örneğin, bu çizgi Brezilya'daki sıcaklığı temsil ediyorsa ve bu nokta çok yüksek bir sayıysa başlık "Kayıtlardaki en sıcak gün" olabilir.
- Ek açıklama metni - [İsteğe bağlı dize] Bu seri için ikinci bir dize sütunu varsa, hücre değeri bu nokta için ek açıklayıcı metin olarak kullanılır. Bu sütunu kullanmak için displayAnnotations seçeneğini doğru değerine ayarlamanız gerekir. allowHtml değerini true olarak ayarlarsanız HTML etiketlerini kullanabilirsiniz. Aslında boyut sınırı yoktur, ancak çok uzun girişlerin görüntüleme bölümünden taşabileceğini unutmayın. Bu nokta için bir ek açıklama başlığı sütununuz olsa bile bu sütunu kullanmanız gerekmez. Sütun etiketi, grafik tarafından kullanılmaz. Örneğin, bu, kayıt noktasında en sıcak günse "En yakın gün 10 derece daha soğuktu!" gibi bir şey diyebilirsiniz.

Yapılandırma Seçenekleri

Ad	Tür	Varsayılan	Açıklama
allowHtml	boolean	false	Doğru değerine ayarlanırsa HTML etiketi içeren tüm ek açıklama metinleri HTML olarak oluşturulur.
allowRedraw	boolean	false	Bu görselleştirmede `draw()` çağrısı için ikinci ve sonraki işlemler için daha etkili bir yeniden çizim tekniğini etkinleştirir. Yalnızca grafik alanını yeniden çizer. Bu seçeneği kullanmak için aşağıdaki koşulları karşılamanız gerekir: allowRedraw doğru olmalıdır displayNotlar yanlış olmalıdır (yani, ek açıklamaları gösteremezsiniz) `draw()` çağrısına yaptığınız ilk çağrıdakiyle aynı seçenekleri ve değerleri (allowRedraw ve displayDescriptions hariç) iletmeniz gerekir.
allValuesSuffix	dize	yok	Ölçeklerdeki ve açıklamadaki tüm değerlere eklenecek sonektir.
annotationsWidth	sayı	25	Tüm grafik alanının dışında ek açıklama alanının genişliği (yüzde cinsinden). 5-80 arasında bir sayı olmalıdır.
renkler	Dize dizisi	Varsayılan renkler	Grafik çizgileri ve etiketler için kullanılacak renkler. Dize dizisi. Her öğe, geçerli HTML renk biçimine sahip bir dizedir. Örneğin "kırmızı" veya "#00cc00".
dateFormat	dize	İlk sütunun türüne (sırasıyla tarih veya tarih/saat) bağlı olarak, "AAA, gg, yyyy" veya "SS:dd MMMM gg, yyyy" (SS:dd MMMM gg, yyyy) biçimindedir.	Sağ üst köşede tarih bilgisini görüntülemek için kullanılan biçim. Bu alanın biçimi, Java SimpleDateFormat sınıfı ile belirtildiği şekildedir.
displayAnnotations	boolean	false	Doğru değerine ayarlanırsa grafik, notları seçili değerlerin üzerinde gösterir. Bu seçenek doğru değerine ayarlandığında her sayısal sütundan sonra, biri ek açıklama başlığı ve diğeri ek açıklama metni için olmak üzere isteğe bağlı iki ek açıklama dizesi sütunu eklenebilir.
displayAnnotationsFilter	boolean	false	Politika, Doğru değerine ayarlanırsa grafikte, ek açıklamaları filtrelemek için bir filtre devamı gösterilir. Çok sayıda ek açıklama olduğunda bu seçeneği kullanın.
displayDateBarSeparator	boolean	true	Seri değerleri ile göstergedeki tarih arasında küçük bir çubuk ayırıcı ( \| ) görüntülenip görüntülenmeyeceği (doğru değeri evet) anlamına gelir.
displayExactValues	boolean	false	Yer kazanmak için grafiğin üst kısmında değerlerin yuvarlatılmış, kısaltılmış bir sürümünün gösterilip gösterilmeyeceğini, false (yanlış) değerine ayarlanması gerektiğini belirtir. Örneğin, yanlış değerine ayarlanırsa 56123.45, 56,12k olarak gösterilebilir.
displayLegendDots	boolean	true	Açıklama metnindeki değerlerin yanında noktaların görüntülenip görüntülenmeyeceği (doğru değeri evet) anlamına gelir.
displayLegendValues	boolean	true	Vurgulanan değerlerin göstergede görüntülenip görüntülenmeyeceği (doğru), evet anlamına gelir.
displayRangeSelector	boolean	true	Yakınlaştırma aralığı seçim alanının (grafiğin alt kısmındaki alan) gösterilip gösterilmeyeceği; burada yanlış seçeneği hayır anlamına gelir. Yakınlaştırma seçicideki ana hat, grafikteki son serinin, yakınlaştırma seçicinin yüksekliğine sığacak şekilde ölçeklendirilmiş bir günlük ölçeğidir.
displayZoomButtons	boolean	true	Yakınlaştırma bağlantılarının gösterilip gösterilmeyeceği ("1d 5d 1m" vb.), burada false (yanlış) hayır anlamına gelir.
fill	sayı	0	Çizgi grafikteki her satırın altında dolgunun alfasını belirten 0-100 (dahil) arasında bir sayı. 100, %100 opak dolgu, 0 hiç dolgu olmadığı anlamına gelir. Dolgu rengi, üstündeki çizgiyle aynı renkte.
highlightDot	dize	"en yakın"	Seride vurgulanacak nokta ve açıklamada gösterilecek karşılık gelen değerler. Aşağıdaki değerlerden birini seçin: "en yakın" - X ekseni boyunca fareye en yakın değerler. 'last' - Farenin solundaki sonraki değer kümesi.
legendPosition	dize	"sameRow"	Renkli göstergenin yakınlaştırma düğmeleri ve tarihi ile aynı satıra mı ("sameRow") yoksa yeni bir satıra mı ("newRow") yerleştirilip yerleştirilmeyeceğini belirler.
maks.	sayı	otomatik	Y ekseninde gösterilecek maksimum değer. Maksimum veri noktası bu değeri aşarsa bu ayar yok sayılır ve grafik, maksimum veri noktasının üzerinde bir sonraki ana onay işaretini gösterecek şekilde ayarlanır. Bu, `scaleType` tarafından belirlenen maksimum Y eksenine göre öncelikli olur.
dk	sayı	otomatik	Y ekseninde gösterilecek minimum değer. Minimum veri noktası bu değerden küçükse bu ayar yok sayılır ve grafik, minimum veri noktasının altında bir sonraki ana onay işaretini gösterecek şekilde ayarlanır. Bu, `scaleType` tarafından belirlenen Y ekseni minimum değerine göre önceliklidir.
numberFormats	Dize, veya bir sayı eşlemesi:Dize çiftleri	otomatik	Grafiğin üst kısmındaki değerleri biçimlendirmek için kullanılacak sayı biçimi kalıplarını belirtir. Kalıplar, java DecimalFormat sınıfı tarafından belirtilen biçimde olmalıdır. Belirtilmezse varsayılan biçim kalıbı kullanılır. Tek bir dize kalıbı belirtilirse bu tüm değerler için kullanılır. Harita belirtilirse anahtarlar (sıfır tabanlı) seri dizinleridir, değerler ise belirtilen seriyi biçimlendirmek için kullanılacak kalıplardır. Grafikteki her seri için bir biçim eklemeniz gerekmez. Belirtilmemiş seriler varsayılan biçimi kullanır. Bu seçenek belirtilirse `displayExactValues` seçeneği yoksayılır.
scaleColumns	Sayı dizisi	Otomatik	Grafikteki Y ekseni onay işaretlerinde hangi değerlerin gösterileceğini belirtir. Varsayılan değer, sağ tarafta her iki seri için de geçerli olan tek bir ölçeğe sahip olmaktır. Ancak grafiğin farklı taraflarının farklı seri değerlerine ölçeklenmesini sağlayabilirsiniz. Bu seçenek, ölçek değeri olarak kullanılacak serinin (sıfır tabanlı) dizinini belirten sıfır ila üç sayıdan oluşan bir dizi alır. Bu değerlerin nerede gösterileceği, dizinize kaç değer eklediğinize bağlıdır: Boş bir dizi belirtirseniz grafikte onay işaretlerinin yanında Y değerleri gösterilmez. Bir değer belirtirseniz belirtilen serinin ölçeği yalnızca grafiğin sağ tarafında görüntülenir. İki değer belirtirseniz ikinci seri için grafiğin sağına bir ölçek eklenir. Üç değer belirtirseniz üçüncü seri için bir ölçek grafiğin ortasına eklenir. Dizideki üçüncü satırdan sonraki değerler yoksayılır. Birden fazla ölçek görüntülerken `scaleType` seçeneğinin "allfixed" veya "allmaxied" olarak ayarlanması önerilir.
scaleType	dize	"fixed" [sabit]	Y ekseninde gösterilen maksimum ve minimum değerleri ayarlar. Aşağıdaki seçenekler kullanılabilir: "maximized": Y ekseni, serinin minimum ve maksimum değerlerine genişler. Birden fazla seriniz varsa tümü büyütülmüş özelliğini kullanın. "fixed" [varsayılan]: Y ekseni, veri değeri değerlerine bağlı olarak değişiklik gösterir: Tüm değerler >=0 ise Y ekseni sıfırdan maksimum veri değerine kadar genişler. Tüm değerler <=0 ise Y ekseni sıfırdan minimum veri değerine kadar genişler. Değerler hem pozitif hem de negatifse Y ekseni, serinin maksimum değerinden seri minimum değerine kadar değişir. Birden çok seri için "allfixed" ifadesini kullanın. "allmaximized" - "En üst düzeye çıkar" ile aynıdır ancak birden fazla ölçek görüntülendiğinde kullanılır. Her iki grafik de aynı ölçek dahilinde en üst düzeye çıkarılır. Bu, bir grafiğin Y ekseninde yanlış tanıtılacağı, ancak her bir serinin üzerine geldiğinizde doğru değerin gösterileceği anlamına gelir. "allfixed": "sabit" ile aynıdır ancak birden fazla ölçek görüntülendiğinde kullanılır. Bu ayar her ölçeği, geçerli olduğu serilere ayarlar (bunu `scaleColumns` ile birlikte kullanın). Min. ve/veya maksimum seçenekleri belirtirseniz bunlar ölçek türünüz tarafından belirlenen minimum ve maksimum değerlere göre öncelikli olur.
kalınlık	sayı	0	Çizgilerin kalınlığını belirten 0-10 (dahil) arasında bir sayı; burada 0 en incesidir.
wmode	dize	"window" (pencere)	Flash grafiği için Pencere Modu (wmode) parametresi. Kullanılabilir değerler şunlardır: "opaque", "window" veya "transparent".
zoomEndTime	Tarih	yok	Seçili yakınlaştırma aralığının bitiş tarihini/saatini ayarlar.
zoomStartTime	Tarih	yok	Seçili yakınlaştırma aralığının başlangıç tarihini/saatini ayarlar.

Yöntemler

Yöntem	Dönüş Türü	Açıklama
`draw(data, options)`	yok	Grafiği çizer. allowRedraw özelliğini kullanarak `draw()` için yapılan ikinci ve sonraki çağrılar için yanıt süresini hızlandırabilirsiniz.
`getSelection()`	Seçim öğeleri dizisi	Standart `getSelection()` uygulaması. Seçilen öğeler, hücre öğeleri. Kullanıcı tarafından bir kerede yalnızca tek bir hücre seçilebilir.
`getVisibleChartRange()`	`start` ve `end` özelliklerine sahip bir nesne	`start` ve `end` özelliklerine sahip bir nesneyi döndürür. Bu özelliklerin her biri, geçerli zaman seçimini temsil eden `Date` nesnesidir.
`hideDataColumns(columnIndexes)`	yok	Belirtilen veri serisini grafikte gizler. Bir sayı veya sayı dizisi olabilecek bir parametreyi kabul eder. 0 değeri, ilk veri serisini belirtir ve bu şekilde devam eder.
`setVisibleChartRange(start, end)`	yok	Görünür aralığı (yakınlaştırma) belirtilen aralığa ayarlar. İstenen seçilen görünür aralığın ilk ve son zamanlarını temsil eden `Date` türünde iki parametreyi kabul eder. En erken tarihten bitiş tarihine kadar her şeyi dahil etmek için start değerini null olarak, start'tan son tarihe kadar her şeyi dahil etmek için end değerini null olarak ayarlayın.
`showDataColumns(columnIndexes)`	yok	`hideDataColumns` yöntemi kullanılarak gizlendikten sonra grafikte belirtilen veri dizilerini gösterir. Bir sayı veya sayı dizisi olabilecek bir parametreyi kabul eder. 0 değeri, ilk veri serisini belirtir ve bu şekilde devam eder.

Etkinlikler

Ad	Açıklama	Özellikler
aralık değişimi	Yakınlaştırma aralığı değiştirildi. Kullanıcı görünür zaman aralığını değiştirdikten sonra, ancak `setVisibleChartRange` yöntemine yapılan bir çağrıdan sonra tetiklenmez. Not: Etkinlik özelliklerinin kullanılmaması, bunun yerine `getVisibleChartRange` yöntemini çağırarak alınması önerilir.	`start`: Tarih. Yakınlaştırma aralığının başlangıç zamanı. `end`: Tarih. Yakınlaştırma aralığının bitiş zamanı.
hazır	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 oluşturmanız ve yalnızca etkinlik tetiklendikten sonra bir işleyici çağırmanız gerekir	Yok
seç	Kullanıcı bir ek açıklama işaretini (işaretçi) tıkladığında veri tablosundaki ilgili hücre seçilir. Ardından görselleştirme bu etkinliği tetikler.	Yok

Not: Belirli sınırlamalardan dolayı, tarayıcınızda sayfaya dosya olarak erişiyorsanız (ör. "file://") yerine bir sunucu (ör. "http://www").

Veri Politikası

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

Notlar

Flash güvenlik ayarları nedeniyle bu (ve tüm Flash tabanlı görselleştirmeler) bir web sunucusu URL'sinden (ör. http://www.anamakinem.com/myviz.html) değil, tarayıcıdaki bir dosya konumundan (ör. file:///c:/webhost/myhost/myviz.html) erişildiğinde doğru şekilde çalışmayabilir. Bu sorun genellikle yalnızca test amaçlıdır. Bu sorunu Macromedia web sitesinde açıklandığı şekilde çözebilirsiniz.