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ın yer aldığı etkileşimli bir 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 sayfanızda kapsayıcı öğesinin yüksekliğini ve genişliğini açıkça belirtmeniz gerekir. Örneğin, <div id="chart_div" style="width:400; height:250"></div>.

Yükleniyor

google.charts.load paket 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 satır görüntüleyebilirsiniz. Her satır, grafikte bir X konumunu (belirli bir zamanı) temsil eder; her satır bir ila üç sütundan oluşan bir grup tarafından tanımlanır.

  • İlk sütun date veya datetime türündedir ve grafikteki noktanın X değerini belirtir. Bu sütun date türündeyse (datetime değil) X eksenindeki en düşü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ütunla açıklanır:
    • Y değeri: [Zorunlu, Sayı] Her kümedeki ilk sütun, ilk sütundaki aynı zamanda çizginin değerini açıklar. Sütun etiketi, grafikte o satırın başlığı olarak gösterilir.
    • Ek açıklama başlığı - [İsteğe bağlı, Dize] Bir dize sütunu değer sütununu izliyorsa ve displayAnnotations seçeneği doğruysa, bu sütun bu noktayı açıklayan kısa bir başlık içerir. Örneğin, bu satır Brezilya'daki sıcaklığı temsil ediyorsa ve bu nokta çok yüksek bir sayıysa başlık "Kaydedilen en sıcak gün" olabilir.
    • Ek açıklama metni - [İsteğe bağlı dize] Bu seri için ikinci bir dize sütunu mevcutsa 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 true olarak ayarlamanız gerekir. allowHtml etiketlerini true olarak ayarlarsanız HTML etiketlerini kullanabilirsiniz; temel olarak boyut sınırı yoktur, ancak aşırı uzun girişlerin görüntüleme bölümüne taşabileceğini unutmayın. Bu nokta için bir ek açıklama başlığı sütununuz olsa bile bu sütuna sahip olmanız gerekmez. Sütun etiketi grafik tarafından kullanılmaz. Örneğin, rekor kıran gün en sıcak olsaydı "En yakın gün 10 derece daha soğuktu" gibi bir şey söyleyebilirsiniz.

Yapılandırma Seçenekleri

Ad Tür Varsayılan Açıklama
allowHtml boolean yanlış Doğru değerine ayarlanırsa HTML etiketleri içeren tüm ek açıklama metinleri HTML olarak oluşturulur.
izin ver boolean yanlış

Bu görselleştirmede ikinci ve sonraki draw() çağrıları için daha verimli bir yeniden çizim tekniği sağlar. Yalnızca grafik alanını yeniden çizer. Bu seçeneği kullanmak için aşağıdaki şartları karşılamanız gerekir:

  • allowRedraw doğru olmalıdır
  • displayNotlar yanlış olmalıdır (yani ek açıklamalar gösteremezsiniz)
  • draw() ilk çağrınızdakiyle aynı seçenekleri ve değerleri (allowRedraw ve displayNotlar hariç) iletmeniz gerekir.
TümDeğerlerSuffix string yok Ölçekler ve açıklamadaki tüm değerlere eklenecek son ek.
notlarGenişliği number (sayı) 25 Tüm grafik alanı içinde, ek açıklamalar alanının genişliği (yüzde olarak). 5-80 aralığında bir sayı olmalıdır.
renkler Dize dizisi Varsayılan renkler Grafik çizgileri ve etiketler için kullanılacak renkler. Bir dize dizisi. Her öğe, geçerli HTML renk biçimindeki bir dizedir. Örneğin, "kırmızı" veya "#00cc00".
tarihBiçimi string İlk sütunun türüne (sırasıyla tarih veya tarih/saat) bağlı olarak "GGAA gg, yyyy" veya "SS:dd MMMM gg, yyyy" Sağ üst köşedeki tarih bilgilerini görüntülemek için kullanılan biçim. Bu alanın biçimi java SimpleDateFormat sınıfı ile belirtilir.
Ek Açıklamalar boolean yanlış Doğru değerine ayarlanırsa grafikte seçilen değerlerin üzerinde ek açıklamalar gösterilir. Bu seçenek doğru değerine ayarlandığında, her sayısal sütundan sonra biri ek açıklama başlığı ve ek açıklama metni için olmak üzere iki isteğe bağlı ek açıklama dizesi sütunu eklenebilir.
ek açıklama filtresi boolean yanlış Politika doğru değerine ayarlanırsa ek açıklamaları filtrelemek için filtre filtresi gösterilir. Çok sayıda ek açıklama olduğunda bu seçeneği kullanın.
görüntüTarihi BarAyırıcı boolean true Dizi değerleri ile açıklamadaki tarih arasında küçük bir çubuk ayırıcısı ( | ) gösterip göstermeyeceği, true ise evet anlamına gelir.
DisplayExactValues boolean yanlış Grafiğin üst kısmında değerler için kısaltılmış ve yuvarlanmış bir sürümün gösterilip gösterilmeyeceği; yanlış kullanımın buna neden olabileceği anlamına gelir. Örneğin, yanlış değerine ayarlandığında 56123.45 değeri 56.12k olarak görüntülenebilir.
LegendsNoktalarını görüntüle boolean true Açıklama metnindeki değerlerin yanında noktaların gösterilip gösterilmeyeceği ("true" (evet) anlamına gelir).
görünenDeğerler boolean true Vurgulanan değerlerin açıklamalarda gösterilip gösterilmeyeceği ("true" (evet) anlamına gelir).
displayRangeSelecter (görüntülü reklam seçici) boolean true

Yakınlaştırma aralığı seçim alanının (grafiğin altındaki alan) gösterilip gösterilmeyeceği. Yanlış değeri "hayır" anlamına gelir.

Yakınlaştırma seçicisindeki özet, grafikteki son serinin yakınlaştırma seçicinin yüksekliğine sığacak şekilde ölçeklendirilen bir sürüm ölçeğidir.
displayZoomButton'ları boolean true Yakınlaştırma bağlantılarının gösterilip gösterilmeyeceği ("1g 5d 1m" vb.) Yanlış değeri "hayır" anlamına gelir.
fill number (sayı) 0 Çizgi grafikteki her satırın altındaki dolgunun alfasını belirten 0-100 (dahil) bir sayı. 100, %100 opak dolgu, 0 ise hiç dolgu yok anlamına gelir. Dolgu rengi, üzerindeki çizgiyle aynı renktir.
vurgulamaNokta string "en yakın"

Seride hangi noktanın vurgulandığı ve açıklamalarda karşılık gelen değerler. Şu değerlerden birini seçin:

  • "en yakın" - X ekseninde fareye en yakın değerler.
  • "last" (son) - Farenin solundaki bir sonraki değer grubu.
açıklamaKonumu string "sameRow" Renkli göstergenin yakınlaştırma düğmeleriyle birlikte aynı satıra mı yoksa tarihe ("newRow") mi yoksa yeni bir satıra mı (yeni satır) yerleştirileceği.
maks. number (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 yer alan bir sonraki önemli onay işaretini gösterecek şekilde ayarlanır. Bu değer, scaleType tarafından belirlenen maksimum Y eksenine göre önceliklidir.
dak number (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ındaki bir sonraki önemli onay işaretini gösterecek şekilde ayarlanır. Bu değer, scaleType tarafından belirlenen minimum Y eksenine göre önceliklidir.
sayıBiçimleri 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 tüm değerler için kullanılır.
  • Bir harita belirtilirse, anahtarlar dizinin (sıfır tabanlı) dizinleridir. Değerler ise belirtilen diziyi biçimlendirmek için kullanılacak kalıplardır.
    Grafikteki her dizi için bir biçim eklemeniz gerekmez. Belirtilmemiş diziler için varsayılan biçim kullanılır.

Bu seçenek belirtilirse displayExactValues seçeneği yok sayılır.
ölçekSütunlar Sayı dizisi Otomatik

Grafikteki Y ekseni onay işaretlerinde hangi değerlerin gösterileceğini belirtir. Varsayılan olarak sağ tarafta, her iki seri için de geçerli olan tek bir ölçek yer alır. Ancak grafiğin farklı kenarlarını farklı seri değerlerine göre ölçeklendirebilirsiniz.

Bu seçenek, ölçek değeri olarak kullanılacak dizinin (sıfır tabanlı) dizinini belirten sıfır ila üç sayıda bir dizi alır. Bu değerlerin gösterildiği yer, dizinize kaç değer eklediğinize bağlıdır:

  • Boş bir dizi belirtirseniz grafik, onay işaretlerinin yanında Y değerlerini göstermez.
  • 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 seriye yönelik bir ölçek grafiğin sağına eklenir.
  • Üç değer belirtirseniz üçüncü seriye ilişkin bir ölçek grafiğin ortasına eklenir.
  • Dizideki üçüncüden sonra gelen değerler yok sayılır.

Birden fazla ölçek gösterirken scaleType seçeneğini "allfixed" veya "allallmaxed" olarak ayarlamanız önerilir.

Ölçek Türü string "Sabit"

Y ekseninde gösterilen maksimum ve minimum değerleri belirler. Aşağıdaki seçenekler kullanılabilir:

  • "maks." - Y ekseni, minimum ve maksimum değerleri kapsar. Birden fazla seriniz varsa maksimize edilmiş dizileri kullanın.
  • "fixed" [varsayılan] - Y ekseni, veri değerleri değerlerine bağlı olarak değişiklik gösterir:
    • Tüm değerler >=0 ise Y ekseni maksimum değerden sıfıra doğru uzanır.
    • Tüm değerler <=0 ise Y ekseni sıfırdan sıfıra kadar minimum veri değerini kapsar.
    • Değerler hem pozitif hem de negatifse Y ekseni, maksimum seriden minimum diziye kadar değişir.

      Birden fazla dizi için "allfixed" değerini kullanın.
  • "allmaxified" - "Maksimuma çıkılmış" ile aynıdır ancak birden fazla ölçek görüntülenirken kullanılır. İki grafik de aynı ölçekte büyütülür. Yani, Y ekseniyle ilgili yanlış beyan verilir ancak her bir serinin üzerine gelindiğinde gerçek değer görüntülenir.
  • "allfixed" - "sabit" ile aynıdır ancak birden fazla ölçek görüntülenirken kullanılır. Bu ayar, her ölçeği geçerli olduğu seriye 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 number (sayı) 0 Çizgilerin kalınlığını belirten 0-10 (dahil) bir sayıdır. 0 en küçüktür.
wmode string "window" (pencere) Flash grafiği için Pencere Modu (wmode) parametresi. Mevcut değerler: "opaque", "window" veya "clear".
Yakınlaştırma Bitiş Zamanı Tarih yok Seçili yakınlaştırma aralığının bitiş tarihini/saatini ayarlar.
yakınlaştırmaBaşlangıç Zamanı 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 ikinci ve daha sonraki draw() çağrılarına yanıt süresini hızlandırabilirsiniz.
getSelection() Seçim öğesi dizisi Standart getSelection() uygulaması. Seçilen öğeler hücre öğeleridir. Kullanıcı aynı anda yalnızca bir hücre seçebilir.
getVisibleChartRange() start ve end özelliklerine sahip bir nesne start ve end özelliklerine sahip bir nesne döndürür. Bu nesnelerin her biri, geçerli zaman seçimini temsil eden bir Date nesnesidir.
hideDataColumns(columnIndexes) yok Belirtilen veri dizisini grafikte gizler. Bir sayı veya bir sayı dizisi olabilen bir parametreyi kabul eder; 0 ilk veri serisini belirtir vb.
setVisibleChartRange(start, end) yok Görünür aralığı (yakınlaştırma) belirtilen aralığa ayarlar. Seçilen seçili görünür aralığın ilk ve son zamanlarını temsil eden Date türündeki iki parametreyi kabul eder. En erken tarihten bitiş'e kadar her şeyi dahil etmek için start'ı null; start'tan son tarihe kadar her şeyi dahil etmek için end'i null olarak ayarlayın.
showDataColumns(columnIndexes) yok Grafikte belirtilen veri dizileri, hideDataColumns yöntemi kullanılarak gizlendikten sonra gösterilir. Bir sayı veya bir sayı dizisi olabilen bir parametreyi kabul eder; 0 ilk veri serisini belirtir vb.

Etkinlikler

Ad Açıklama Özellikler
aralık değiştirme Yakınlaştırma aralığı değişti. Kullanıcı görünür zaman aralığını değiştirdikten sonra etkinleşir, ancak setVisibleChartRange yöntemine bir çağrıdan sonra etkinleşmez.
Not: Etkinlik özelliklerinin kullanılması yerine getVisibleChartRange yöntemini çağırarak bu özellikleri almanız ö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. Grafik ve çizim yöntemlerinden sonra etkileşimde bulunmak isterseniz draw yöntemini çağırmadan önce bu etkinlik için bir işleyici oluşturmanız ve bunları yalnızca etkinlik tetiklendikten sonra çağırmanız gerekir Yok
seçer Kullanıcı bir ek açıklama işaretini (işaretçiyi) tıkladığında, veri tablosundaki ilgili hücre seçilir. Görselleştirme daha sonra bu etkinliği tetikler. Yok

Not: Tarayıcınızdaki sayfaya dosya olarak erişiyorsanız bazı kısıtlamalar nedeniyle etkinlikler atılamayabilir (ör. "file://") ekler. "http://www").

Veri Politikası

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

Notlar

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