Kullanımdan kaldırıldı
Bu görselleştirmenin yerini yeni sürüm aldı. Lütfen bu sürümü kullanın. Kolay taşıma için lütfen sürüm notları sayfasına bakın.
Genel bakış
SVG veya VML kullanılarak tarayıcıda oluşturulan dağılım grafiği. Noktalar tıklandığında ipuçlarını gösterir.
Dağılım grafiği, sayı grupları arasındaki ilişkiyi eşlemek için kullanılır.
Oluşturan: Google
Örnek
Görselleştirme Oyun Alanı'nda kodu kendiniz kodlayın
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["scatterchart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Age', 'Weight'], [ 8, 12], [ 4, 5.5], [ 11, 14], [ 4, 5], [ 3, 3.5], [ 6.5, 7] ]); var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, titleX: 'Age', titleY: 'Weight', legend: 'none', pointSize: 5}); } </script> </head> <body> <div id="chart_div"></div> </body> </html>
Yükleniyor
google.load
paket adı "scatterchart"
google.load("visualization", "1", {packages: ["scatterchart"]});
Görselleştirmenin sınıf adı: google.visualization.ScatterChart
var visualization = new google.visualization.ScatterChart(container);
Veri Biçimi
İki veya daha fazla sütun gerekir, bunların tümü sayısal olmalıdır. İlk sütundaki değerler X ekseni için kullanılır. Aşağıdaki sütunlarda bulunan değerler Y ekseni için kullanılır. Her sütun ayrı bir renkle görüntülenir.
X ekseninde gösterilen minimum ve maksimum sayılar, veri tablosundaki minimum ve maksimum X değerleridir. Bu değerlerin altında veya üstünde fazladan boşluk gösterilmeye zorlamak için maksimum veri değerinin altında veya üstünde X değerine sahip bir satır ekleyin ve satırda Y değeri belirtmeyin. Bu şekilde minimum, maksimum veya her iki değer için bir satır ekleyebilirsiniz.
Yapılandırma Seçenekleri
Ad | Tür | Varsayılan | Açıklama |
---|---|---|---|
eksen rengi | dize veya Nesne | varsayılan renk | Eksenin rengi. Olası değerler, backgroundColor yapılandırma seçeneğindeki değerlerdir. |
eksenArka Rengi | dize veya Nesne | varsayılan renk | Eksen arka planının etrafındaki kenarlık. Olası değerler, backgroundColor yapılandırma seçeneğindeki değerlerdir. |
ekseniYazıBoyutu | number (sayı) | otomatik | Grafik ekseni metninin piksel cinsinden yazı tipi boyutu. |
arka plan Rengi | dize veya Nesne | varsayılan renk | Grafiğin ana alanının arka plan rengi.
Aşağıdakilerden biri olabilir:
|
kenarlık rengi | dize veya Nesne | varsayılan renk | Grafik öğelerinin çevresindeki kenarlık. Olası değerler, backgroundColor yapılandırma seçeneğindeki değerlerdir. |
renkler | Dize dizisi | Varsayılan renkler | Grafik öğeleri için kullanılacak renkler. Bir dize dizisi. Her öğe, HTML tarafından desteklenen bir renk dizesidir (ör. "red" veya "#00cc00"). |
araç ipucunu etkinleştir | boolean | true | Doğru değerine ayarlanırsa kullanıcı bir veri noktasını tıkladığında araç ipuçları gösterilir. |
odakBorderColor | dize veya Nesne | varsayılan renk | Odaklanılan (fare tarafından işaret edilen) grafik öğelerinin etrafındaki kenarlık. Olası değerler, backgroundColor yapılandırma seçeneğindeki değerlerdir. |
yükseklik | number (sayı) | Kapsayıcının yüksekliği | Grafiğin piksel cinsinden yüksekliği. |
açıklama | string | "sağ" | Açıklamaların konumu ve türü. Aşağıdakilerden biri olabilir:
|
arka plan rengi | dize veya Nesne | varsayılan renk | Grafiğin açıklama bölümünün arka plan rengi. Olası değerler, backgroundColor yapılandırma seçeneğindeki değerlerdir. |
açıklamaYazıBoyutu | number (sayı) | otomatik | Açıklamalar yazı tipinin piksel cinsinden boyutu. |
açıklama MetniRenkleri | dize veya Nesne | varsayılan renk | Açıklama metni rengi. Olası değerler, backgroundColor yapılandırma seçeneğindeki değerlerdir. |
satır Boyutu | number (sayı) | 0 | Çizgi cinsinden piksel cinsinden genişlik. Aynı veri sütununun tüm noktaları arasında bir çizgi göstermek için pozitif değerleri kullanın. |
logScale | boolean | yanlış | Doğruysa Y ekseni logaritmik olarak ölçeklenmelidir. |
logScaleX | boolean | yanlış | Doğru ise X ekseni logaritmik olarak ölçeklenmelidir. |
maks. | number (sayı) | otomatik | En yüksek Y eksenindeki ızgara çizgisini belirtir. Gerçek ızgara çizgisi, iki değerden büyük olur: maksimum seçenek değeri veya sonraki en yüksek ızgara işaretine yuvarlanan en yüksek veri değeri. |
dak | number (sayı) | otomatik | En düşük Y eksenindeki ızgara çizgisini belirtir. Gerçek ızgara çizgisi, iki değerden daha düşük olanı oluşturur. Min. seçenek değeri veya en düşük veri değeri, sonraki alt ızgara işaretine yuvarlanır. |
puntoBoyutu | number (sayı) | 3 | Gösterilen noktaların piksel cinsinden boyutu. |
başlık | string | başlık yok | Grafiğin üzerinde görüntülenecek metin. |
başlıkX | string | başlık yok | Yatay eksenin altında görüntülenecek metin. |
başlıkY | string | başlık yok | Dikey eksene göre görüntülenecek metin. |
başlık Rengi | dize veya Nesne | varsayılan renk | Grafik başlığının rengi. Olası değerler, backgroundColor yapılandırma seçeneğindeki değerlerdir. |
başlıkYazı Boyutu | number (sayı) | otomatik | Grafik başlığı için piksel cinsinden yazı tipi boyutu. |
TipFontSizeSize |
number (sayı) | 11 | İpucu metninin yazı tipi boyutu. İpucu, metni belirtilen yazı tipinde tutamayacak kadar küçükse bu değer azaltılabilir. |
İpucu |
number (sayı) | 60 | İpucunun piksel cinsinden yüksekliği. İpucu yüksekliği sabittir. Metnin uzunluğuna veya yazı tipi boyutuna sığacak şekilde hiçbir zaman büyümez veya küçülmez. Ancak grafik yüksekliğinin 1/3'ünden daha fazlası kırpılır. |
İpucu Genişliği | number (sayı) | 120 | İpucunun piksel cinsinden genişliği. İpucu genişliği sabittir. Metnin uzunluğuna veya yazı tipi boyutuna sığacak şekilde hiçbir zaman büyümez veya küçülmez. Ancak grafik genişliğinden büyük olan her şey kırpılır. |
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. |
getSelection() |
Seçim öğesi dizisi | Standart getSelection() uygulaması.
Seçilen öğeler sütun ve hücre öğeleridir.
Kullanıcı aynı anda yalnızca bir sütun veya hücre seçebilir. |
setSelection() |
yok | Standart setSelection() uygulaması, ancak yalnızca bir öğenin seçimini destekler.
Her seçim girişini sütun veya hücre seçimi olarak ele alır.
Etiket sütununun ve ilk sayısal sütunun (x ekseni değeri sütunu) seçilemeyeceğini unutmayın. |
Etkinlikler
Ad | Açıklama | Özellikler |
---|---|---|
onmouseover |
Kullanıcı fare imlecini bir noktanın üzerine getirip ilgili hücrenin satır ve sütun dizinlerine geçtiğinde tetiklenir. | satır, sütun |
onmouseout |
Kullanıcı fare imlecini bir noktadan uzaklaştırdığında ve karşılık gelen hücrenin satır ve sütun dizinlerinde geçtiğinde tetiklenir. | satır, sütun |
ready |
Grafik, harici yöntem çağrıları için hazır. Çizdikten sonra grafik ve arama yöntemleriyle etkileşimde bulunmak isterseniz draw yöntemini çağırmadan önce bu etkinlik için bir işleyici oluşturmanız ve bunları yalnızca etkinlik tetiklendikten sonra çağırmanız gerekir |
Yok |
select |
Kullanıcı bir noktayı veya göstergeyi tıkladığında tetiklenir. Bir nokta seçildiğinde, veri tablosundaki ilgili hücre seçilir; bir açıklama seçildiğinde veri tablosundaki ilgili sütun seçilir. Nelerin seçildiğini öğrenmek için getSelection() numaralı telefonu arayın. |
Yok |
Veri Politikası
Tüm kod ve veriler tarayıcıda işlenir ve oluşturulur. Hiçbir sunucuya veri gönderilmez.