Ek Açıklamalı Zaman Çizelgesi

  1. Genel bakış
  2. Örnek
  3. Yükleniyor
  4. Veri Biçimi
  5. Yapılandırma Seçenekleri
  6. Yöntemler
  7. Etkinlikler
  8. Veri Politikası
  9. 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.