Not Grafiği

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

Ek açıklama grafikleri, ek açıklamaları destekleyen etkileşimli zaman serisi çizgi grafiklerdir. Ek açıklamalı zaman çizelgesinde artık Ek Açıklama Grafiği'nin otomatik olarak kullanıldığını unutmayın.

Kafa karışıklığı uyarısı: Google Ek Açıklama Grafiği, şu anda diğer Google grafiklerinin (şu anda bölge, çubuk, sütun, karma, çizgi ve dağılım) desteklediği ek açıklamalardan farklıdır. Bu grafiklerde, ek açıklamalar ayrı bir veri tablosu sütununda belirtilir ve kullanıcıların, ek açıklama metninin tamamını görmek için fareyle üzerine gelebilecekleri kısa metin parçaları olarak görüntülenir. Buna karşılık, Ek Açıklama Grafiği aşağıda gösterildiği gibi ek açıklamaların tamamını sağ tarafta gösterir.

Ö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':['annotationchart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Kepler-22b mission');
        data.addColumn('string', 'Kepler title');
        data.addColumn('string', 'Kepler text');
        data.addColumn('number', 'Gliese 163 mission');
        data.addColumn('string', 'Gliese title');
        data.addColumn('string', 'Gliese text');
        data.addRows([
          [new Date(2314, 2, 15), 12400, undefined, undefined,
                                  10645, undefined, undefined],
          [new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter',
                                  12374, undefined, undefined],
          [new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall',
                                  15766, 'Gallantors', 'First Encounter'],
          [new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!',
                                  34334, 'Gallantors', 'Statement of shared principles'],
          [new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties',
                                  66467, 'Gallantors', 'Mysteries revealed'],
          [new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost',
                                  79463, 'Gallantors', 'Omniscience achieved']
        ]);

        var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));

        var options = {
          displayAnnotations: true
        };

        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <div id='chart_div' style='width: 900px; height: 600px;'></div>
  </body>
</html>

Yükleniyor

google.charts.load paket adı "annotationchart".

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

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

  var visualization = new google.visualization.AnnotationChart(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
allowHtml

Doğru değerine ayarlanırsa HTML etiketleri içeren tüm ek açıklama metinleri HTML olarak oluşturulur.

Tür: boole
Varsayılan: false
TümDeğerlerSuffix

Açıklamalardaki tüm değerlere ve dikey eksendeki onay etiketlerine eklenecek bir son ek.

Tür: dize
Varsayılan: yok
notlarGenişliği

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.

Tür: sayı
Varsayılan: 25
renkler

Grafik çizgileri ve etiketler için kullanılacak renkler. Bir dize dizisi. Her öğe, geçerli HTML renk biçiminde bir dizedir. Örneğin, "kırmızı" veya "#00cc00".

Tür: Dize dizisi
Varsayılan: Varsayılan renkler
tarihBiçimi

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ı tarafından belirlenir.

Tür: dize
Varsayılan: İlk sütunun türüne (sırasıyla tarih veya tarih) göre 'AA gg, yyyy' veya 'SS:dd AA gg yyyy'.
Ek Açıklamalar

Yanlış değerine ayarlanırsa grafik, ek açıklama tablosunu gizler ve ek açıklamalar ve notText görünür olmaz (bu seçenekten bağımsız olarak, verilerinizde ek açıklama yoksa ek açıklama tablosu da gösterilmez). 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.

Tür: boole
Varsayılan: true
ek açıklama filtresi

Doğru değerine ayarlanırsa grafikte ek açıklamaları filtrelemek için bir filtre kontrolü gösterilir. Çok sayıda ek açıklama olduğunda bu seçeneği kullanın.

Tür: boole
Varsayılan: false
görüntüTarihi BarAyırıcı

Dizi değerleri ile açıklamadaki tarih arasında küçük bir çubuk ayırıcı ( | ) görüntülenip görüntülenmeyeceğini belirtir; burada true değeri evet anlamına gelir.

Tür: boole
Varsayılan: true
DisplayExactValues

Grafiğin üzerinde yer alan değerlerin kısaltılmış ve yuvarlanmış bir versiyonunun gösterilip gösterilmeyeceği; false (yanlış) durumunu belirtir. Örneğin, false olarak ayarlanırsa 56123.45 değeri 56.12k olarak görüntülenebilir.

Tür: boole
Varsayılan: false
LegendsNoktalarını görüntüle

Açıklama metnindeki değerlerin yanında noktaların gösterilip gösterilmeyeceği ("true" (evet) anlamına gelir).

Tür: boole
Varsayılan: true
görünenDeğerler

Vurgulanan değerlerin açıklamalarda gösterilip gösterilmeyeceği. Doğru değeri, evet anlamına gelir.

Tür: boole
Varsayılan: true
displayRangeSelecter (görüntülü reklam seçici)

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çicideki özet çizgi, grafikteki ilk serinin yakınlaştırma seçicinin yüksekliğine sığacak şekilde ölçeklendirilen bir sürüm ölçeğidir.

Tür: boole
Varsayılan: true
displayZoomButton'ları

Yakınlaştırma düğmelerinin gösterilip gösterilmeyeceği ("1d 5d 1m" vb.) Yanlış değeri "hayır" anlamına gelir.

Tür: boole
Varsayılan: true
fill

Çizgi grafikteki her satırın altındaki dolgunun alfasını belirten 0-100 (dahil) bir sayı. 100, %100 opak, 0 ise hiç dolgu yok anlamına gelir. Dolgu rengi, üzerindeki çizgiyle aynı renktedir.

Tür: sayı
Varsayılan: 0
açıklamaKonumu

Renkli göstergenin yakınlaştırma düğmeleriyle birlikte aynı satıra mı yoksa tarihe (aynı satır) mı yoksa yeni bir satıra mı (yeni satır) yerleştirileceği.

Tür: dize
Varsayılan: "sameRow"
maks.

Y ekseninde gösterilecek maksimum değer. Maksimum veri noktası, bu değeri aşarsa bu ayar yok sayılır ve grafik, bir sonraki ana veri işaretini maksimum veri noktasının üzerinde gösterilecek şekilde ayarlanır. Bu değer, scaleType tarafından belirlenen maksimum Y eksenine göre önceliklidir.

Bu değer, temel grafiklerdeki maxValue etiketine benzer.

Tür: sayı
Varsayılan: otomatik
dak

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 işaret işaretini gösterecek şekilde ayarlanır. Bu değer, scaleType tarafından belirlenen minimum Y eksenine göre önceliklidir.

Bu değer, temel grafiklerdeki minValue etiketine benzer.

Tür: sayı
Varsayılan: otomatik
sayıBiçimleri

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, belirtilen diziyi biçimlendirmek için kullanılacak kalıplardır.

    Grafikteki her seri için bir biçim eklemeniz gerekmez; belirtilmemiş tüm diziler varsayılan biçimi kullanır.

Bu seçenek belirtilirse displayExactValues seçeneği yoksayılır.

Tür: Dize veya bir sayı:Dize çiftleri eşlemesi
Varsayılan: otomatik
ölçekSütunlar

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 serinin ölçeği 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.

Tür: Sayı dizisi
Varsayılan: Otomatik
ölçekBiçimi

Eksen onay işaretleri için kullanılacak sayı biçimi. '#' varsayılan değeri bir tam sayı olarak görüntülenir.

Tür: dize
Varsayılan: "#"
Ölçek Türü

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

  • "maks. büyütüldü" - Y ekseni, minimum ve maksimum değerleri kapsar. Birden fazla seriniz varsa maksimizasyon değerini 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 alır.
    • Değerler hem pozitif hem de negatifse Y ekseni, maksimum dizi ve minimum dizi değerleri arasında değişir.
      Birden fazla dizi için "allfixed" değerini kullanın.
  • "allmax nedeniyled" - "maksimum performans" ile aynı, 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 geldiğinizde gerçek değeri gösterilir.
  • "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 diziye ayarlar (bunu scaleColumns ile birlikte kullanın).

Min. ve/veya maks. seçeneklerini belirtirseniz bunlar, ölçek türünüz tarafından belirlenen minimum ve maksimum değerlere göre öncelikli olur.

Tür: dize
Varsayılan: "sabit"
tablo

Ek açıklamalar tablosuyla ilgili seçenekleri içerir. Bu nesnenin özelliklerini belirtmek için nesne değişmez gösterimini kullanabilirsiniz: 

var options: {
  table: {
    sortAscending: true,
    sortColumn: 1
  }
};
Tür: nesne
Varsayılan: null
table.sortAscending

true değerine ayarlanırsa ek açıklama tablosunun sırasını tersine çevirip artan düzende gösterir.

Tür: boole
Varsayılan: false
tablo.sıralıSütun

Ek açıklamaların sıralanacağı ek açıklama tablosunun sütun dizini. Dizin, ek açıklama etiketi sütunu için 0, ek açıklama metni sütunu için 1 olmalıdır.

Tür: sayı
Varsayılan: 0
kalınlık

Çizgilerin kalınlığını belirten, 0 ile 10 arasında (0 en ince) bir sayıdır.

Tür: sayı
Varsayılan: 0
Yakınlaştırma Bitiş Zamanı

Seçili yakınlaştırma aralığının bitiş tarihini/saatini ayarlar.

Tür: Tarih
Varsayılan: yok
yakınlaştırmaBaşlangıç Zamanı

Seçili yakınlaştırma aralığının başlangıç tarihini/saatini ayarlar.

Tür: Tarih
Varsayılan: yok

Yöntemler

Yöntem
clearChart()

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

Dönüş Türü: yok
draw(data, options, state)

Grafiği çizer.

Dönüş Türü: yok
getContainer()

Ek açıklama grafiğini içeren kapsayıcı öğesine bir tutma yeri döndürür.

Dönüş Türü: DOM öğesini işleme
getSelection()

Standart getSelection() uygulaması. Seçilen öğeler hücre öğeleridir. Kullanıcı aynı anda yalnızca bir hücre seçebilir.

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

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.

Dönüş Türü: start ve end özelliklerine sahip bir nesne
hideDataColumns(columnIndexes)

Belirtilen veri dizisini grafikte gizler. Bir sayı veya bir sayı dizisi olabilen bir parametreyi kabul eder. 0 ilk veri serisini belirtir vb.

Dönüş Türü: yok
setVisibleChartRange(start, end)

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'dan son tarihe kadar her şeyi dahil etmek için end'i null olarak ayarlayın.

Dönüş Türü: yok
showDataColumns(columnIndexes)

Grafikte belirtilen veri serileri, 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.

Dönüş Türü: yok

Etkinlikler

Ad
rangechange

Kullanıcı, aralık kaydırma çubuğunu değiştirdiğinde tetiklenir. Yeni aralık uç noktaları event['start'] ve event['end'] olarak kullanılabilir: 

google.visualization.events.addListener(chart, 'rangechange', rangechange_handler);

function rangechange_handler(e) {
  console.log('You changed the range to ', e['start'], ' and ', e['end']);
}
Özellikler: başlangıç, bitiş
ready

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 dinleyici oluşturmanız ve bunları yalnızca etkinlik tetiklendikten sonra kullanmanız gerekir.

Özellikler: yok
select

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

Özellikler: yok

Veri Politikası

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