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

Not Grafiği

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

Genel bakış

Ek açıklama grafikleri, ek açıklamaları destekleyen etkileşimli zaman serisi çizgi grafikleridir. Ek açıklamalı zaman çizelgesinin artık otomatik olarak Ek Açıklama Grafiği'ni kullandığını unutmayın.

Karışıklık uyarısı: Şu anda Google Ek Açıklama Grafiği, diğer Google grafiklerinin (şu anda alan, ç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 tam ek açıklama metnini görmek için üzerine gelebileceği 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 tam ek açıklamaları sağ tarafta görüntüler.

Örnek

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

<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 paketinin 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 ç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
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
allValuesSuffix	Göstergedeki tüm değerlere eklenecek ve dikey eksenlerdeki işaret etiketlerine eklenecek bir sonektir. Tür: dize Varsayılan: yok
annotationsWidth	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. Tür: numara Varsayılan: 25
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". Tür: Dize dizisi Varsayılan: Varsayılan renkler
dateFormat	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ı Tür: dize Varsayılan: İlk sütunun türüne (sırasıyla tarih veya tarih/saat) bağlı olarak "AAMM gg, yyyy" veya "SS:dd MMMM gg, yyyy" biçiminde olur.
displayAnnotations	Yanlış değerine ayarlanırsa grafik, ek açıklamalar tablosunu gizler ve ek açıklamalar ile ek açıklama metni görünmez. Bu seçenekten bağımsız olarak, verilerinizde ek açıklama yoksa ek açıklamalar 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 diğeri ek açıklama metni için olmak üzere isteğe bağlı iki ek açıklama dizesi sütunu eklenebilir. Tür: boole Varsayılan: true
displayAnnotationsFilter	Politika, 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
displayDateBarSeparator	Seri değerleri ile açıklamalardaki 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. Tür: boole Varsayılan: true
displayExactValues	Yer kazanmak için grafiğin üst kısmında değerlerin yuvarlanmış ve kısaltılmış bir sürümünün gösterilip gösterilmeyeceğini, false (yanlış) bunun olabileceğini belirtir. Örneğin, yanlış değerine ayarlanırsa 56123.45, 56, 12k olarak gösterilebilir. Tür: boole Varsayılan: false
displayLegendDots	Açıklama metnindeki değerlerin yanında noktaların görüntülenip görüntülenmeyeceği (doğru), evet anlamına gelir. Tür: boole Varsayılan: true
displayLegendValues	Vurgulanan değerlerin göstergede görüntülenip görüntülenmeyeceği (doğru), evet anlamına gelir. Tür: boole Varsayılan: true
displayRangeSelector	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 dış çizgi, grafikteki ilk serinin, yakınlaştırma seçicinin yüksekliğine sığacak şekilde ölçeklendirilmiş bir logaritmik ölçek sürümüdür. Tür: boole Varsayılan: true
displayZoomButtons	Yakınlaştırma düğmelerinin gösterilip gösterilmeyeceğini ("1d 5d 1m" vb.), false (yanlış) anlamına gelir. Tür: boole Varsayılan: true
fill	Çizgi grafikteki her satırın altında dolgunun alfasını belirten 0-100 (dahil) arası bir sayı. 100, %100 opak olduğu ve 0 hiç doldurma olmadığı anlamına gelir. Dolgu rengi, üstündeki çizgiyle aynı renktedir. Tür: numara Varsayılan: 0
legendPosition	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. 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, 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. Bu, temel grafiklerdeki `maxValue` verilerine benzer. Tür: numara Varsayılan: auto
dk	Y ekseninde gösterilecek minimum değer. Minimum veri noktası bu değerden düşü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. Bu, temel grafiklerdeki `minValue` verilerine benzer. Tür: numara Varsayılan: auto
numberFormats	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ı 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. Bir 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. Tür: Dize veya sayı eşlemesi:Dize çiftleri Varsayılan: auto
scaleColumns	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 serinin ölçeği grafiğin sağına eklenir. Üç değer belirtirseniz üçüncü seri için grafiğin ortasına bir ölçek 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. Tür: Sayı dizisi Varsayılan: Otomatik
scaleFormat	Eksen onay etiketleri için kullanılacak sayı biçimi. Varsayılan `'#'` değeri tam sayı olarak görüntülenir. Tür: dize Varsayılan: '#'
scaleType	Y ekseninde gösterilen maksimum ve minimum değerleri ayarlar. Aşağıdaki seçenekler kullanılabilir: "maksimizasyonu": 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" - "Maksimuma alınmış" ile aynıdır ancak birden fazla ölçek görüntülendiğinde kullanılır. Her iki grafik de aynı ölçek içinde en üst düzeye çıkarılır. Yani, bir grafik Y ekseninde yanlış temsil edilir, ancak fareyle her bir serinin üzerine gelindiğinde gerçek değeri görüntülenir. "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. Tür: dize Default: 'fixed'
masa	Ek açıklamalar tablosuyla ilgili seçenekleri içerir. Bu nesnenin özelliklerini belirtmek için nesne değişmez değer 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çıklamalar tablosunun sırasını tersine çevirir ve bunları artan sırada görüntüler. Tür: boole Varsayılan: false
table.sortColumn	Ek açıklamaların sıralanacağı ek açıklamalar 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: numara Varsayılan: 0
kalınlık	Çizgilerin kalınlığını belirten 0-10 (dahil) arasında bir sayı. Burada 0, en ince değerdir. Tür: numara Varsayılan: 0
zoomEndTime	Seçili yakınlaştırma aralığının bitiş tarihini/saatini ayarlar. Tür: Tarih Varsayılan: yok
zoomStartTime	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 kendisine ayrılan tüm kaynakları serbest bırakır. Return Type (Dönüş Türü): yok
`draw(data, options, state)`	Grafiği çizer. Return Type (Dönüş Türü): yok
`getContainer()`	Ek açıklama grafiğini içeren kapsayıcı öğesine bir herkese açık kullanıcı adı alır. Dönüş Türü: DOM öğesine işleyici
`getSelection()`	Standart `getSelection()` uygulaması. Seçilen öğeler, hücre öğeleri. Kullanıcı tarafından bir kerede yalnızca tek bir hücre seçilebilir. Dönüş Türü: Seçim öğeleri dizisi
`getVisibleChartRange()`	`start` ve `end` özelliklerine sahip bir nesneyi döndürür. Bu özelliklerin her biri, geçerli zaman seçimini temsil eden `Date` nesnesidir. Döndürme Türü: `start` ve `end` özelliklerine sahip bir nesne
`hideDataColumns(columnIndexes)`	Belirtilen veri serisini grafikte gizler. Sayı veya sayı dizisi olabilecek bir parametreyi kabul eder. Burada 0, ilk veri serisini ifade eder ve bu şekilde devam eder. Return Type (Dönüş Türü): yok
`setVisibleChartRange(start, end)`	Görünür aralığı (yakınlaştırma) belirtilen aralığa ayarlar. 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 öğesini null olarak, start'tan son tarihe kadar her şeyi dahil etmek için end değerini null olarak ayarlayın. Return Type (Dönüş Türü): yok
`showDataColumns(columnIndexes)`	`hideDataColumns` yöntemi kullanılarak gizlendikten sonra grafikte belirtilen veri dizilerini gösterir. Sayı veya sayı dizisi olabilecek bir parametreyi kabul eder. 0 değeri, ilk veri serisini ifade eder ve bu şekilde devam eder. Return Type (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. 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

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