Önemli: Google Grafik Araçları'nın Resim Grafikleri bölümü, 20 Nisan 2012 tarihi itibarıyla resmi olarak kullanımdan kaldırılmıştır. Hesabınız, kullanımdan kaldırma politikamız uyarınca çalışmaya devam edecektir.
Genel bakış
Google Charts API kullanılarak görüntülerle oluşturulan bir veya birden fazla mini grafik. Görseller 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
paketinin 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
Herhangi bir 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 | dize | Tüm grafikler için kullanılacak rengi belirtir.
#rrggbb biçiminde bir dize. Örneğin: '#00cc00'.
Yalnızca colors seçeneği belirtilmemişse kullanılır. |
|
renkler | Dize dizisi | Varsayılan renkler | Veri sütunları için kullanılacak renkler. Her öğenin bir dize olduğu #rrggbb biçiminde bir dize dizisi. Örneğin: '#00cc00'. i rengi, i veri sütunu için kullanılır. Renk sayısı sütun sayısından azsa renk seçimi daire içine alınır. |
fill | boolean | false | True (doğru) ise çizginin altındaki alan renkli olarak doldurulur. |
yükseklik | sayı | Kapsayıcının yüksekliği | Resimlerin piksel cinsinden yüksekliği. |
labelPosition | dize | yok | Etiketlerin konumu. Desteklenen değerler: "none", "left", "right". |
maks. | Sayı dizisi | Her bir mini grafiğin maksimum veri değeri | Her bir mini grafiğin veri değeri aralığı için en yüksek değer. Dizideki dizin, DataTable'daki sütun diziniyle eşleşmelidir. Tüm değerler null ise bu, serideki maksimum değer olur. |
dk | Sayı dizisi | Her bir mini grafiğin minimum veri değeri | Her bir mini grafiğin veri değeri aralığı için en düşük değer. Dizideki dizin, DataTable'daki sütun diziniyle eşleşmelidir. Tüm değerler boşsa bu, serideki en düşük değer olur. |
showAxisLines | boolean | true | True (doğru) ise eksen çizgileri gösterilir. Yanlış değerine ayarlanırsa bunlar geçerli değildir ve showValueEtiketler için varsayılan değer false'tur. |
showValueLabels | boolean | true değerine sahiptir (showAxisLines'ın yanlış olduğu durumlar hariç). | Doğru değerine ayarlanırsa değer ekseni etiketleri gösterilir. |
title | Dize dizisi | Başlık gösterilmiyor | Her mini grafik için kullanılacak başlıklar. |
genişlik | sayı | Kapsayıcı genişliği | Grafiklerin piksel cinsinden genişliği. |
düzen | dize | "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 öğeleri dizisi | Seçili grafiklerin dizinlerini bir nesne dizisi olarak döndürür. Her nesne, seçilen bir mini grafiğin sütun numarasını içeren bir sütun özelliğine sahiptir. Birden fazla seçili sütun döndürebilir. |
setSelection(selection) |
yok | Belirtilen mini grafikleri ve belirtilmeyen tüm mini grafikleri seçer. seçim, her biri seçili mini grafiğin dizini olan sayısal column özelliğine sahip bir nesne dizisidir. Daha fazla bilgi için setSelection() bölümüne bakın. |
Etkinlikler
Ad | Açıklama | Özellikler |
---|---|---|
seç | Standart seçim etkinliği. | Yok |
Veri Politikası
Lütfen Chart API günlük kaydı politikasını inceleyin.