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
<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
dateveyadatetimetüründedir ve grafikteki noktanın X değerini belirtir. Bu sütunun türüdateise (vedatetimedeğ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
displayAnnotationsseç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
displayAnnotationsseçeneğini doğru değerine ayarlamanız gerekir.allowHtmldeğerinitrueolarak 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, Bu, temel grafiklerdeki 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, Bu, temel grafiklerdeki 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ı
Bu seçenek belirtilirse 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:
Birden fazla ölçek görüntülerken Tür: Sayı dizisi
Varsayılan: Otomatik
|
| scaleFormat |
Eksen onay etiketleri için kullanılacak sayı biçimi. Varsayılan Tür: dize
Varsayılan: '#'
|
| scaleType |
Y ekseninde gösterilen maksimum ve minimum değerleri ayarlar. Aşağıdaki seçenekler kullanılabilir:
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 |
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 Dönüş Türü: Seçim öğeleri dizisi
|
getVisibleChartRange() |
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 Return Type (Dönüş Türü): yok
|
showDataColumns(columnIndexes) |
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ı
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 Özellikler: yok
|
select |
Kullanıcı bir görsel öğeyi tıkladığında tetiklenir. Neyin seçildiğini öğrenmek için Özellikler: yok
|
Veri Politikası
Tüm kod ve veriler tarayıcıda işlenip oluşturulur. Herhangi bir sunucuya veri gönderilmez.