Önemli: Google Grafik Araçları'nın Resim Listeleri bölümü, 20 Nisan 2012'den itibaren resmi olarak kullanımdan kaldırılmıştır. Kullanımdan kaldırma politikamız uyarınca çalışmaya devam edecektir.
Genel bakış
Google Sitemaps API ile resimlerle oluşturulan bir veya daha fazla mini grafik. Resimler bir HTML tablosunda yer alır.
Ö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:["imagesparkline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Revenue', 'Licenses'], [435, 132], [438, 131], [512, 137], [460, 142], [491, 140], [487, 139], [552, 147], [511, 146], [505, 151], [509, 149] ]); var chart = new google.visualization.ImageSparkLine(document.getElementById('chart_div')); chart.draw(data, {width: 120, height: 40, showAxisLines: false, showValueLabels: false, labelPosition: 'left'}); } </script> </head> <body> <div id="chart_div" style="width: 120px; height: 40px;"></div> </body> </html>
Yükleniyor
google.charts.load
paket adı "imagesparkline"
.
google.charts.load("current", {packages: ["imagesparkline"]});
Görselleştirmenin sınıf adı: google.visualization.ImageSparkLine
.
var visualization = new google.visualization.ImageSparkLine(container);
Veri Biçimi
İstediğiniz sayıda sütun. Tüm sütunlar sayı olmalıdır. Her sütun tek bir mini grafik olarak gösterilir.
Yapılandırma Seçenekleri
Ad | Tür | Varsayılan | Açıklama |
---|---|---|---|
renk | string | Tüm grafiklerde kullanılacak rengi belirtir.
#rrggbb biçiminde bir dize. Örneğin: "#00cc00".
Yalnızca colors seçeneği belirtilmediğinde kullanılır. |
|
renkler | Dize dizisi | Varsayılan renkler | Veri sütunları için kullanılacak renkler. Her bir öğenin #rrggbb biçiminde bir dize olduğu bir dize dizisi. Örneğin: "#00cc00". Renk i, veri sütunu i için kullanılır. Renk sayısı sütun sayısından azsa renk seçimi ayarlanır. |
fill | boolean | yanlış | Doğru değerine ayarlanırsa çizginin altındaki alanı renkli olarak doldurur. |
yükseklik | number (sayı) | Kapsayıcının yüksekliği | Resimlerin piksel cinsinden yüksekliği. |
etiketKonumu | string | yok | Etiketlerin konumu. Desteklenen değerler: "none", "left", "right". |
maks. | Sayı dizisi | Her bir mini grafik için maksimum veri değeri | Her bir mini grafikte veri değeri aralığı için en yüksek değer. Dizideki dizin, Veri Tablosundaki sütun diziniyle eşleşmelidir. Tüm değerler boşsa, bu, dizideki maksimum değer olacaktır. |
dak | Sayı dizisi | Her bir mini grafik için minimum veri değeri | Her bir mini grafikteki veri değeri aralığı için en düşük değer. Dizideki dizin, Veri Tablosundaki sütun diziniyle eşleşmelidir. Tüm değerler boşsa bu, dizideki minimum değer olur. |
Eksen Satırları | boolean | true | Doğruysa eksen çizgileri gösterilir. Yanlış değerini döndürürse yanlıştır. ShowValueLabels için varsayılan değer false'tur. |
program_değeri | boolean | true, ancak showAxisLines yanlış olduğunda geçerli değildir. | Doğru değerine ayarlanırsa değer ekseni etiketleri gösterilir. |
başlık | Dize dizisi | Başlık gösterilmiyor | Her bir mini grafik için kullanılacak başlıklar. |
genişlik | number (sayı) | Kapsayıcının genişliği | Grafiklerin piksel cinsinden genişliği. |
düzen | string | "v" | Dikey veya yatay düzen: Dikey için "v", yatay için "h". |
Yöntemler
Yöntem | Dönüş Türü | Açıklama |
---|---|---|
draw(data, options) |
yok | Grafiği çizer. |
getSelection() |
Seçim öğesi dizisi | Seçilen grafiklerin dizinlerini bir nesne dizisi olarak döndürür. Her nesnenin seçili bir mini grafikteki sütun numarasını içeren bir sütun özelliği vardır. Seçilen birden fazla sütunu döndürebilir. |
setSelection(selection) |
yok | Belirtilen mini grafikleri seçer ve belirtilmeyen tüm mini grafiklerin seçimini kaldırır. seçim, her biri sayısal mini column özelliğine sahip bir nesne dizisidir. Bu mülk, seçilen küçük çizginin dizinidir. Daha fazla bilgi için setSelection() sayfasını inceleyin. |
Etkinlikler
Ad | Açıklama | Özellikler |
---|---|---|
seçer | Standart seçim etkinliği. | Yok |
Veri Politikası
Lütfen Chart API günlük kaydı politikasını inceleyin.