Ö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 resim olarak oluşturulan bir çubuk grafik.
Ö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:["imagebarchart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var chart = new google.visualization.ImageBarChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, min: 0}); } </script> </head> <body> <div id="chart_div" style="width: 400px; height: 240px;"></div> </body> </html>
Yükleniyor
google.charts.load
paket adı "imagebarchart"
google.charts.load("current", {packages: [[]"imagebarchart"]});
Görselleştirmenin sınıf adı: google.visualization.ImageBarChart
var visualization = new google.visualization.ImageBarChart(container);
Veri Biçimi
İlk sütun bir dize olmalı ve kategori etiketini içermelidir. Birden fazla sütun takip edilebilir. Tüm sütunlar sayısal olmalıdır. Her sütun bir dizi bar olarak gösterilir. Veri tablosu birden fazla sayısal sütun içerdiğinde satırdaki değerler yığınlı çubuklar olarak gösterilir.
Yapılandırma Seçenekleri
Ad | Tür | Varsayılan | Açıklama |
---|---|---|---|
arka plan rengi | string | "#FFFFFF" (beyaz) | Chart API'sı renk biçimindeki grafiğin arka plan rengi. |
renkler | Dizi<string> | Otomatik | Her bir veri dizisine belirli renkler atamak için bunu kullanın. Renkler, Chart API'sı renk biçiminde belirtilir.
Renk i, veri sütunu i için kullanılır ve renklerden daha fazla veri sütunu varsa başa gelir. Tüm seriler için tek bir renk varyasyonları kabul ediliyorsa bunun yerine color seçeneğini kullanın. |
Etkinlikleri etkinleştir | boolean | yanlış | Grafiklerin, tıklama veya fareyle üzerine gelme gibi kullanıcı tarafından tetiklenen etkinlikleri atlamasına neden olur. Yalnızca belirli grafik türleri için desteklenir. Aşağıdaki Etkinlikler'e göz atın. |
yükseklik | number (sayı) | Kapsayıcının yüksekliği | Grafiğin piksel cinsinden yüksekliği. |
Yığınlı | boolean | true | Birden fazla veri sütununun yığılmış olarak (gruplandırılmış yerine) gösterilip gösterilmeyeceğini kontrol eder. |
eşit | boolean | yanlış | Çubukların dikey olup olmayacağını kontrol eder. |
açıklama | string | "sağ" | Açıklamaların konumu ve türü. Aşağıdakilerden biri olabilir:
|
maks. | number (sayı) | otomatik | Y ekseninde gösterilecek maksimum değer. |
dak | number (sayı) | otomatik | Y ekseninde gösterilecek minimum değer. |
KategoriKategorilerini | boolean | true | Yanlış değerine ayarlanırsa kategorilerin etiketlerini kaldırır. |
program_değeri | boolean | true | Yanlış değerine ayarlanırsa değerlerin etiketlerini kaldırır. |
başlık | string | başlık yok | Grafiğin üzerinde görüntülenecek metin. |
değerEtiketi Aralığı | number (sayı) | Otomatik | Değer ekseni etiketlerinin gösterileceği aralık. Örneğin, min
0, max 100 ve valueLabelsInterval
20 ise grafikte (0, 20, 40, 60, 80 100) eksen etiketleri gösterilir. |
genişlik | number (sayı) | Kapsayıcının genişliği | Grafiğin piksel cinsinden genişliği. |
Yöntemler
Yöntem | Dönüş Türü | Açıklama |
---|---|---|
draw(data, options) |
yok | Grafiği çizer. |
Etkinlikler
Genel Resim Grafiği sayfasında açıklanan etkinlikleri dinlemek için kaydolabilirsiniz.
Veri Politikası
Lütfen Chart API günlük kaydı politikasını inceleyin.