Genel bakış
Tarayıcıda SVG veya VML kullanılarak oluşturulan kabarcık grafik. Balonların üzerine geldiğinizde ipuçlarını gösterir.
Kabarcık grafik, iki ila dört boyut içeren bir veri kümesini görselleştirmek için kullanılır. İlk iki boyut görsel olarak koordinatlar, üçüncüsü renk ve boyut olarak görselleştirilir.
Ö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':['corechart']}); google.charts.setOnLoadCallback(drawSeriesChart); function drawSeriesChart() { var data = google.visualization.arrayToDataTable([ ['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'], ['CAN', 80.66, 1.67, 'North America', 33739900], ['DEU', 79.84, 1.36, 'Europe', 81902307], ['DNK', 78.6, 1.84, 'Europe', 5523095], ['EGY', 72.73, 2.78, 'Middle East', 79716203], ['GBR', 80.05, 2, 'Europe', 61801570], ['IRN', 72.49, 1.7, 'Middle East', 73137148], ['IRQ', 68.09, 4.77, 'Middle East', 31090763], ['ISR', 81.55, 2.96, 'Middle East', 7485600], ['RUS', 68.6, 1.54, 'Europe', 141850000], ['USA', 78.09, 2.05, 'North America', 307007000] ]); var options = { title: 'Fertility rate vs life expectancy in selected countries (2010).' + ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region', hAxis: {title: 'Life Expectancy'}, vAxis: {title: 'Fertility Rate'}, bubble: {textStyle: {fontSize: 11}} }; var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="series_chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
Rakamlarla Renklendirme
Balonları aşağıdaki örnekte gösterildiği gibi bir değerle orantılı olarak renklendirmek için colorAxis
seçeneğini kullanabilirsiniz.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['ID', 'X', 'Y', 'Temperature'], ['', 80, 167, 120], ['', 79, 136, 130], ['', 78, 184, 50], ['', 72, 278, 230], ['', 81, 200, 210], ['', 72, 170, 100], ['', 68, 477, 80] ]); var options = { colorAxis: {colors: ['yellow', 'red']} }; var chart = new google.visualization.BubbleChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
Etiketleri Özelleştirme
Balon yazı tipini, yazı tipini ve rengi bubble.textStyle
seçeneğiyle kontrol edebilirsiniz:
var options = { title: 'Fertility rate vs life expectancy in selected countries (2010).' + ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region', hAxis: {title: 'Life Expectancy'}, vAxis: {title: 'Fertility Rate'}, bubble: { textStyle: { fontSize: 12, fontName: 'Times-Roman', color: 'green', bold: true, italic: true } } };
<head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'], ['CAN', 80.66, 1.67, 'North America', 33739900], ['DEU', 79.84, 1.36, 'Europe', 81902307], ['DNK', 78.6, 1.84, 'Europe', 5523095], ['EGY', 72.73, 2.78, 'Middle East', 79716203], ['GBR', 80.05, 2, 'Europe', 61801570], ['IRN', 72.49, 1.7, 'Middle East', 73137148], ['IRQ', 68.09, 4.77, 'Middle East', 31090763], ['ISR', 81.55, 2.96, 'Middle East', 7485600], ['RUS', 68.6, 1.54, 'Europe', 141850000], ['USA', 78.09, 2.05, 'North America', 307007000] ]); var options = { title: 'Fertility rate vs life expectancy in selected countries (2010).' + ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region', hAxis: {title: 'Life Expectancy'}, vAxis: {title: 'Fertility Rate'}, bubble: { textStyle: { fontSize: 12, fontName: 'Times-Roman', color: 'green', bold: true, italic: true } } }; var chart = new google.visualization.BubbleChart(document.getElementById('textstyle')); chart.draw(data, options); } </script> </head> <body> <div id="textstyle" style="width: 900px; height: 500px;"></div> </body> </html>
Yukarıdaki grafikte yer alan etiketleri okumak zordur ve bunun nedenlerinden biri, çevresindeki beyaz alandır. Buna aura denir. Onların grafiklerinizi tercih etmezseniz bubble.textStyle.auraColor
özelliğini 'none'
değerine ayarlayabilirsiniz.
var options = { title: 'Fertility rate vs life expectancy in selected countries (2010).' + ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region', hAxis: {title: 'Life Expectancy'}, vAxis: {title: 'Fertility Rate'}, bubble: { textStyle: { auraColor: 'none' } } };
<head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'], ['CAN', 80.66, 1.67, 'North America', 33739900], ['DEU', 79.84, 1.36, 'Europe', 81902307], ['DNK', 78.6, 1.84, 'Europe', 5523095], ['EGY', 72.73, 2.78, 'Middle East', 79716203], ['GBR', 80.05, 2, 'Europe', 61801570], ['IRN', 72.49, 1.7, 'Middle East', 73137148], ['IRQ', 68.09, 4.77, 'Middle East', 31090763], ['ISR', 81.55, 2.96, 'Middle East', 7485600], ['RUS', 68.6, 1.54, 'Europe', 141850000], ['USA', 78.09, 2.05, 'North America', 307007000] ]); var options = { title: 'Fertility rate vs life expectancy in selected countries (2010).' + ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region', hAxis: {title: 'Life Expectancy'}, vAxis: {title: 'Fertility Rate'}, bubble: { textStyle: { auraColor: 'none', } } }; var chart = new google.visualization.BubbleChart(document.getElementById('noAura')); chart.draw(data, options); } </script> </head> <body> <div id="noAura" style="width: 900px; height: 500px;"></div> </body> </html>
Yükleniyor
google.charts.load
paket adı "corechart"
.
google.charts.load("current", {packages: ["corechart"]});
Görselleştirmenin sınıf adı: google.visualization.BubbleChart
.
var visualization = new google.visualization.BubbleChart(container);
Veri Biçimi
Satırlar: Tablodaki her bir satır tek bir balonu temsil eder.
Sütunlar:
Sütun 0 | 1. Sütun | 2. Sütun | Sütun 3 (isteğe bağlı) | Sütun 4 (isteğe bağlı) | |
---|---|---|---|---|---|
Amaç: | Balonun kimliği (adı) | X koordinatı | Y koordinatı | Sütun türüne bağlı olarak gradyan ölçeğinde bir rengi temsil eden dizi kimliği veya değer:
|
Boyut; bu sütundaki değerler, sizeAxis seçeneği kullanılarak gerçek piksel değerlerine eşlenmiştir. |
Veri Türü: | string | number (sayı) | number (sayı) | dize veya sayı | number (sayı) |
Yapılandırma Seçenekleri
Ad | |
---|---|
animasyon.süre |
Animasyonun milisaniye cinsinden süresi. Ayrıntılar için animasyon dokümanlarına bakın. Tür: sayı
Varsayılan: 0
|
animasyon.yumuşak geçiş |
Animasyona uygulanan yumuşak geçiş işlevi. Aşağıdaki seçenekler kullanılabilir:
Tür: dize
Varsayılan: "doğrusal"
|
animasyon.başlangıç |
Grafiğin ilk çizimde animasyon oluşturup oluşturmayacağını belirler. Tür: boole
Varsayılan yanlış
|
ekseniTitleSKonumu |
Eksen başlıklarının yerleştirileceği grafik alanı. Desteklenen değerler:
Tür: dize
Varsayılan: "out"
|
arka plan rengi |
Grafiğin ana alanının arka plan rengi. Basit bir HTML renk dizesi (ör. Tür: dize veya nesne
Varsayılan: "white"
|
arka plan rengi.fırça |
HTML renk dizesi olarak grafik kenarlığının rengi. Tür: dize
Varsayılan: "#666"
|
arka plan Rengi.strokeGenişliği |
Piksel cinsinden kenarlık genişliği. Tür: sayı
Varsayılan: 0
|
arka plan Rengi.dolgu |
HTML renk dizesi olarak grafik dolgu rengi. Tür: dize
Varsayılan: "white"
|
balon |
Balonların görsel özelliklerini yapılandırmak için üyeleri olan bir nesne. Tür: nesne
Varsayılan: null
|
baloncuk.opaklığı |
0'ın opak, 1 tamamen opak olduğu baloncukların opaklığı. Tür: 0,0 ile 1,0 arasında bir sayı
Varsayılan: 0,8
|
Bubble.stroke |
Baloncukların fırça rengi. Tür: dize
Varsayılan: "#ccc"
|
Bubble.textStil |
Balon metni stilini belirten bir nesne. Nesnenin biçimi şu şekildedir: {color: <string>, fontName: <string>, fontSize: <number>}
Tür: nesne
Varsayılan:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
grafikAlanı |
Grafik alanının yerleşimini ve boyutunu yapılandırmak için üyeleri olan bir nesne (eksen ve açıklamalar hariç, grafiğin kendisinin çizildiği yer). İki biçim desteklenir: Sayı veya sayı ve ardından %. Örnek: Tür: nesne
Varsayılan: null
|
grafikAlanı.Arkaplan Rengi |
Grafik alanı arka plan rengi. Bir dize kullanıldığında, onaltılık bir dize olabilir (ör. "#fdc") veya İngilizce renk adını kullanın. Bir nesne kullanıldığında aşağıdaki özellikler sağlanabilir:
Tür: dize veya nesne
Varsayılan: "white"
|
grafikAlanı.sol |
Grafiğin sol kenarlıktan ne kadar uzağa çizileceği. Tür: sayı veya dize
Varsayılan: otomatik
|
grafikAlanı.top |
Grafiğin üst kenarlıktan ne kadar uzağa çizileceği. Tür: sayı veya dize
Varsayılan: otomatik
|
grafikAlanı.genişliği |
Grafik alanı genişliği. Tür: sayı veya dize
Varsayılan: otomatik
|
grafikAlanı.yükseklik |
Grafik alanı yüksekliği. Tür: sayı veya dize
Varsayılan: otomatik
|
renkler |
Grafik öğeleri için kullanılacak renkler. Her bir öğenin HTML renk dizesi olduğu bir dize dizisi. Örneğin: Tür: Dize dizisi
Varsayılan: varsayılan renkler
|
Renk Ekseni |
Renk sütunu değerleri ve renkler arasında eşleme ya da gradyan ölçeği kullanarak belirtilen bir nesne. Bu nesnenin özelliklerini belirtmek için aşağıda gösterildiği gibi nesne değişmez gösterimini kullanabilirsiniz: {minValue: 0, colors: ['#FF0000', '#00FF00']} Tür: nesne
Varsayılan: null
|
colorAxis.minValue |
Varsa grafik rengi verileri için minimum bir değer belirtir. Bu değer ve daha düşük değerdeki renk verisi değerleri, Tür: sayı
Varsayılan: Grafik verilerindeki minimum renk sütunu değeri
|
colorAxis.maxValue |
Varsa grafik rengi verileri için maksimum değeri belirtir. Bu değer ve daha yüksek değerdeki renk verisi değerleri, Tür: sayı
Varsayılan: Grafik verilerinde maksimum renk sütunu değeri
|
colorAxis.values |
Varsa değerlerin renklerle nasıl ilişkilendirilebileceğini kontrol eder. Her değer, Tür: sayı dizisi
Varsayılan: null
|
renkEkseni.renkler |
Görselleştirmedeki değerlere atanacak renkler. Her bir öğenin HTML renk dizesi olduğu bir dize dizisi. Örneğin: Tür: Renk dizeleri dizisi
Varsayılan: null
|
renkAxis.legend |
Gradyan renk göstergesinin stilini belirten bir nesne. Tür: nesne
Varsayılan: null
|
colorAxis.legend.position |
Açıklamaların konumu. Aşağıdakilerden biri olabilir:
Tür: nesne
Varsayılan: "top" (üst)
|
colorAxis.legend.textStyle |
Açıklama metni stilini belirten bir nesne. Nesnenin biçimi şu şekildedir: {color: <string>, fontName: <string>, fontSize: <number>}
Tür: nesne
Varsayılan:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
colorAxis.legend.numberBiçim |
Sayısal etiketler için bir biçim dizesi. Bu, ICU desen kümesi'nin bir alt kümesidir.
Örneğin Tür: dize
Varsayılan: otomatik
|
Etkileşimi etkinleştir |
Grafiğin kullanıcı tabanlı etkinliklerde bulunup bulunmadığı veya kullanıcı etkileşimine tepki verip vermediği. Yanlış değerine ayarlanırsa grafik, "select" (seç) veya diğer etkileşime dayalı etkinlikleri atlar (ancak hazır veya hata etkinliklerini göndermez) ve fareyle üzerine gelindiğinde gösterilen metni görüntülemez veya kullanıcı girişine bağlı olarak başka şekilde değişiklik yapmaz. Tür: boole
Varsayılan: true
|
gezgin |
Bu özellik deneyseldir ve gelecekteki sürümlerde değişebilir. Not: Gezgin yalnızca sürekli eksenlerle (ör. sayılar veya tarihler) çalışır. Tür: nesne
Varsayılan: null
|
explorer.actions |
Google Listeler Gezgini üç işlemi destekler:
Tür: Dize dizisi
Varsayılan: ['dragToPan', 'rightClickToReset']
|
explorer.eksen |
Varsayılan olarak, Tür: dize
Varsayılan: Hem yatay hem de dikey kaydırma
|
explorer.keepinBounds |
Varsayılan olarak, veriler nerede olursa olsun kullanıcılar her yönde kaydırılabilir. Kullanıcıların orijinal grafiğin ötesine geçmemek için Tür: boole
Varsayılan: false
|
gezgin.maxZoom |
Gezginin yakınlaştırabileceği maksimum değer. Varsayılan olarak, kullanıcılar orijinal görünümün yalnızca% 25'ini görünecek kadar yakınlaştırma yapabilir. Tür: sayı
Varsayılan: 0,25
|
explorer.maxZoomout |
Gezginin uzaklaşabileceği maksimum değer. Varsayılan olarak, kullanıcılar grafiğin kullanılabilir alanın yalnızca 1/4'ünü kaplayacak kadar uzaklaşabilir. Tür: sayı
Varsayılan: 4
|
gezgin.ZoomDelta |
Kullanıcılar yakınlaştırdığında veya uzaklaştırdığında, Tür: sayı
Varsayılan: 1,5
|
yazı tipi boyutu |
Grafikteki tüm metinlerin piksel cinsinden varsayılan yazı tipi boyutu. Belirli grafik öğelerinin özelliklerini kullanarak bunu geçersiz kılabilirsiniz. Tür: sayı
Varsayılan: otomatik
|
yazı tipi adı |
Grafikteki tüm metinlerin varsayılan yazı tipi yüzü. Belirli grafik öğelerinin özelliklerini kullanarak bunu geçersiz kılabilirsiniz. Tür: dize
Varsayılan: "score"
|
Zorunlu iFrame |
Grafiği satır içi bir çerçevenin içine çizer. (IE8'de bu seçeneğin yoksayıldığını unutmayın; tüm IE8 grafikleri i-frame'ler ile çizilmiştir.) Tür: boole
Varsayılan: false
|
hAxis'ler |
Çeşitli yatay eksen öğelerini yapılandırmak için üyeler içeren bir nesne. Bu nesnenin özelliklerini belirtmek için aşağıda gösterildiği gibi nesne değişmez gösterimini kullanabilirsiniz: { title: 'Hello', titleTextStyle: { color: '#FF0000' } } Tür: nesne
Varsayılan: null
|
hAxis.baseline |
Yatay eksenin referans değeri. Tür: sayı
Varsayılan: otomatik
|
hAxis.baselineColor |
Yatay eksen referans çizgisinin rengi. Herhangi bir HTML renk dizesi olabilir. Örneğin:
Tür: sayı
Varsayılan: "siyah"
|
hAxis.direction |
Yatay eksendeki değerlerin büyüme yönü. Değerlerin sırasını tersine çevirmek için Tür: 1 veya -1
Varsayılan: 1
|
hAxis.biçimi |
Sayısal eksen etiketleri için bir biçim dizesi. Bu, ICU desen kümesi'nin bir alt kümesidir. Örneğin
Etikete uygulanan gerçek biçimlendirme, API'nin yüklenmiş olduğu yerel ayardan türetilir. Daha ayrıntılı bilgi için belirli bir yerel ayara sahip grafikler yükleme başlıklı makaleyi inceleyin.
Onay işareti değerleri ve kılavuz çizgileri hesaplanırken, ilgili tüm kılavuz çizgisi seçeneklerinin birkaç alternatif kombinasyonu dikkate alınır ve biçimlendirilmiş işaret etiketlerinin kopyalanması veya örtüşmesi durumunda alternatifler reddedilir.
Bu nedenle, yalnızca tam sayı onay işaretinin gösterilmesini istiyorsanız Tür: dize
Varsayılan: otomatik
|
hAxis.gridlines |
Yatay eksendeki ızgara çizgilerini yapılandıracak özelliklere sahip bir nesne. Yatay eksen kılavuz çizgilerinin dikey olarak çizildiğini unutmayın. Bu nesnenin özelliklerini belirtmek için aşağıda gösterildiği gibi nesne değişmez gösterimini kullanabilirsiniz: {color: '#333', minSpacing: 20} Tür: nesne
Varsayılan: null
|
hAxis.gridlines.color |
Grafik alanı içindeki yatay kılavuz çizgilerinin rengi. Geçerli bir HTML renk dizesi belirtin. Tür: dize
Varsayılan: "#CCC"
|
hAxis.gridlines.count |
Grafik alanı içindeki yaklaşık yatay kılavuz çizgisi sayısı.
Tür: sayı
Varsayılan: -1
|
hAxis.gridlines.units |
Grafik hesaplanan ızgaralarla kullanıldığında tarih/tarih/saat/saat veri türlerinin çeşitli yönleri için varsayılan biçimi geçersiz kılar. Yıl, ay, gün, saat, dakika, saniye ve milisaniye biçimlendirmesine izin verir. Genel biçim şöyledir: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Daha fazla bilgiyi Tarihler ve Saatler'de bulabilirsiniz. Tür: nesne
Varsayılan: null
|
hAxis.minor Izgaralar |
hAxis.gridlines seçeneğine benzer olarak, yatay eksendeki alt ızgaraları yapılandırmak için üyeleri olan bir nesne. Tür: nesne
Varsayılan: null
|
hAxis.minor Izgaralar.renk |
Grafik alanı içindeki yatay küçük kılavuz çizgilerinin rengi. Geçerli bir HTML renk dizesi belirtin. Tür: dize
Varsayılan: Kılavuz çizgisi ve arka plan renklerinin bir karışımı
|
hAxis.minor Izgaralar.count |
Sayısı 0 olarak ayarlanmış küçük kılavuz çizgilerini devre dışı bırakma dışında Tür: sayı
Varsayılan:1
|
hAxis.minorCURlines.units |
Grafik cinsinden hesaplanan küçük tablolarla kullanıldığında tarih/tarih/saat/saat veri türlerinin çeşitli yönleri için varsayılan biçimi geçersiz kılar. Yıl, ay, gün, saat, dakika, saniye ve milisaniye biçimlendirmesine izin verir. Genel biçim şöyledir: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Daha fazla bilgiyi Tarihler ve Saatler'de bulabilirsiniz. Tür: nesne
Varsayılan: null
|
hAxis.logÖlçek |
Yatay ekseni logaritmik ölçek yapan Tür: boole
Varsayılan: false
|
hAxis.scaleType |
Yatay ekseni logaritmik ölçek yapan
Tür: dize
Varsayılan: null
|
hAxis.metinKonumu |
Yatay eksen metninin grafik alanına göre konumu. Desteklenen değerler: "out", "in", "none". Tür: dize
Varsayılan: "out"
|
hAxis.textStil |
Yatay eksen metin stilini belirten bir nesne. Nesnenin biçimi şu şekildedir: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Tür: nesne
Varsayılan:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.ticks |
Otomatik olarak oluşturulan X ekseni onaylarını belirtilen diziyle değiştirir. Dizinin her bir öğesi geçerli bir onay değeri (sayı, tarih, tarih/saat veya günün saati gibi) ya da bir nesne olmalıdır. Bu nesne bir işaret değeri için
ViewWindow, geçersiz kılınacak bir Örnekler:
Tür: Öğe dizisi
Varsayılan: otomatik
|
hAxis.başlığı |
Yatay eksenin başlığını belirten Tür: dize
Varsayılan: null
|
hAxis.titleTextStil |
Yatay eksen başlık metni stilini belirten bir nesne. Nesnenin biçimi şu şekildedir: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Tür: nesne
Varsayılan:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.maxValue |
Yatay eksenin maksimum değerini belirtilen değere taşır. Çoğu grafikte sağ tarafta yer alır. Bu değer, verilerin maksimum x değerinden küçük bir değere ayarlanırsa yoksayılır.
Tür: sayı
Varsayılan: otomatik
|
hAxis.minDeğeri |
Yatay eksenin minimum değerini belirtilen değere taşır. Bu, çoğu grafikte sol tarafta kalır. Bu değer, verilerin minimum x değerinden büyük bir değere ayarlanırsa yoksayılır.
Tür: sayı
Varsayılan: otomatik
|
hAxis.viewWindowMode |
Değerleri grafik alanı içinde oluşturmak için yatay eksenin nasıl ölçekleneceğini belirtir. Aşağıdaki dize değerleri desteklenir:
Tür: dize
Varsayılan: "Güzel"e eşdeğerdir, ancak kullanılırsa
haxis.viewWindow.min ve haxis.viewWindow.max öncelikli olur.
|
hAxis.viewWindow |
Yatay eksenin kırpma aralığını belirtir. Tür: nesne
Varsayılan: null
|
hAxis.viewWindow.max |
Oluşturulacak maksimum yatay veri değeri.
Tür: sayı
Varsayılan: otomatik
|
hAxis.viewWindow.min |
Oluşturulacak minimum yatay veri değeri.
Tür: sayı
Varsayılan: otomatik
|
yükseklik |
Grafiğin piksel cinsinden yüksekliği. Tür: sayı
Varsayılan: kapsayıcı öğenin yüksekliği
|
açıklama |
Açıklamaların çeşitli yönlerini yapılandırmak için üyelerden oluşan bir nesne. Bu nesnenin özelliklerini belirtmek için aşağıda gösterildiği gibi nesne değişmez gösterimini kullanabilirsiniz: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Tür: nesne
Varsayılan: null
|
açıklama.hizalama |
Açıklamaların hizalaması. Aşağıdakilerden biri olabilir:
Başlangıç, orta ve bitiş, açıklamanın stiline (dikey veya yatay) göre belirlenir. Örneğin, "sağ" açıklamasındaki "başlangıç" ve "bitiş" sırasıyla üst ve alt kısımda yer alır. "Üst" açıklama için ise "başlangıç" ve "bitiş", alanın sol ve sağ tarafında sırasıyla yer alır. Varsayılan değer, göstergenin konumuna bağlıdır. "Alt" açıklamalar için varsayılan değer "center", diğer açıklamalar ise "start"tır. Tür: dize
Varsayılan: otomatik
|
Legend.maxLines |
Açıklamalardaki maksimum satır sayısı. Açıklamalarınıza satır eklemek için bunu birden büyük bir sayıya ayarlayın. Not: Oluşturulan gerçek satır sayısını belirlemek için kullanılan mantığın devamlılığı değişmedi. Bu seçenek şu anda yalnızcaLegend.position, "top" olduğunda çalışır. Tür: sayı
Varsayılan: 1
|
açıklama.sayfaDizini |
Açıklamanın ilk seçtiğiniz sıfır tabanlı sayfa dizini. Tür: sayı
Varsayılan: 0
|
açıklama.konumu |
Açıklamaların konumu. Aşağıdakilerden biri olabilir:
Tür: dize
Varsayılan: "sağ"
|
Legend.textStil |
Açıklama metni stilini belirten bir nesne. Nesnenin biçimi şu şekildedir: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Tür: nesne
Varsayılan:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
seçimModu |
Tür: dize
Varsayılan: "tek"
|
series |
Anahtarların dizi adları (Renk sütunundaki değerler) ve grafikteki ilgili serinin biçimini açıklayan her bir nesne olduğu bir nesne nesnesi. Dizi veya değer belirtilmezse global değer kullanılır. Her nesne aşağıdaki özellikleri destekler:
series: {'Europe': {color: 'green'}} Tür: İç içe yerleştirilmiş nesneler içeren nesne
Varsayılan: {}
|
sizex ekseni |
Balon boyutuyla değerlerin nasıl ilişkilendirildiğini yapılandırmak için üyeleri olan bir nesne. Bu nesnenin özelliklerini belirtmek için aşağıda gösterildiği gibi nesne değişmez gösterimini kullanabilirsiniz: {minValue: 0, maxSize: 20} Tür: nesne
Varsayılan: null
|
sizeAxis.maxSize 'ı seçin |
Olası en büyük balonun piksel cinsinden maksimum yarıçapı. Tür: sayı
Varsayılan: 30
|
sizeAxis.maxValue |
Tür: sayı
Varsayılan: Grafik verilerindeki maksimum boyut sütunu değeri
|
bedenAxis.minSize |
Olası en küçük balonun piksel cinsinden minimum yarıçapı. Tür: sayı
Varsayılan: 5
|
sizeAxis.minValue |
Tür: sayı
Varsayılan: Grafik verilerindeki minimum boyut sütunu değeri
|
Sıralama Balonları |
Doğru değerine ayarlanırsa balonları boyutu daha küçük olan büyük baloncukların üzerinde görünecek şekilde sıralar. Yanlış değerine ayarlanırsa balonlar DataTable'daki sıralamalarına göre sıralanır. Tür: boole
Varsayılan: true
|
tema |
Tema, belirli bir grafik davranışı veya görsel efekt sağlamak için birlikte çalışan, önceden tanımlanmış bir dizi seçenek değeridir. Şu anda yalnızca bir tema kullanılabilir:
Tür: dize
Varsayılan: null
|
başlık |
Grafiğin üzerinde görüntülenecek metin. Tür: dize
Varsayılan: başlık yok
|
başlıkKonumu |
Grafik alanına kıyasla grafik başlığı nereye yerleştirilmelidir? Desteklenen değerler:
Tür: dize
Varsayılan: "out"
|
başlıkMetin Stili |
Başlık metin stilini belirten bir nesne. Nesnenin biçimi şu şekildedir: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Tür: nesne
Varsayılan:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
ipucu |
Çeşitli ipucu öğelerini yapılandırmak için üyeleri olan bir nesne. Bu nesnenin özelliklerini belirtmek için aşağıda gösterildiği gibi nesne değişmez gösterimini kullanabilirsiniz: {textStyle: {color: '#FF0000'}, showColorCode: true} Tür: nesne
Varsayılan: null
|
ipucu.ishtml |
Doğru değerine ayarlanırsa HTML tarafından oluşturulan (SVG ile oluşturulan yerine) ipuçlarını kullanın. Daha fazla ayrıntı için İpucu İçeriğini Özelleştirme bölümüne bakın. Not: HTML araç ipucu içeriğinin ipuçu sütunu veri rolü aracılığıyla özelleştirilmesi, Balon Listesi görselleştirmesi tarafından desteklenmez. Tür: boole
Varsayılan: false
|
ipucu.metinStil |
İpucu metin stilini belirten bir nesne. Nesnenin biçimi şu şekildedir: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Tür: nesne
Varsayılan:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
ipucu.tetikleyici |
İpucunun gösterilmesine neden olan kullanıcı etkileşimi:
Tür: dize
Varsayılan: "odak"
|
vAxis |
Çeşitli dikey eksen öğelerini yapılandırmak için üyeler içeren bir nesne. Bu nesnenin özelliklerini belirtmek için aşağıda gösterildiği gibi nesne değişmez gösterimini kullanabilirsiniz: {title: 'Hello', titleTextStyle: {color: '#FF0000'}} Tür: nesne
Varsayılan: null
|
vAxis.baseline |
Dikey eksen tabanını belirten Tür: sayı
Varsayılan: otomatik
|
vAxis.baselineColor |
Dikey eksen referans çizgisinin rengini belirtir. Herhangi bir HTML renk dizesi olabilir. Örneğin: Tür: sayı
Varsayılan: "siyah"
|
vAxis.direction |
Dikey eksendeki değerlerin büyüme yönü. Varsayılan olarak düşük değerler grafiğin altında yer alır. Değerlerin sırasını tersine çevirmek için Tür: 1 veya -1
Varsayılan: 1
|
vAxis.biçimi |
Sayısal eksen etiketleri için bir biçim dizesi. Bu, ICU desen kümesi'nin bir alt kümesidir.
Örneğin
Etikete uygulanan gerçek biçimlendirme, API'nin yüklenmiş olduğu yerel ayardan türetilir. Daha ayrıntılı bilgi için belirli bir yerel ayara sahip grafikler yükleme başlıklı makaleyi inceleyin.
Onay işareti değerleri ve kılavuz çizgileri hesaplanırken, ilgili tüm kılavuz çizgisi seçeneklerinin birkaç alternatif kombinasyonu dikkate alınır ve biçimlendirilmiş işaret etiketlerinin kopyalanması veya örtüşmesi durumunda alternatifler reddedilir.
Bu nedenle, yalnızca tam sayı onay işaretinin gösterilmesini istiyorsanız Tür: dize
Varsayılan: otomatik
|
vAxis.gridlines |
Dikey eksendeki ızgara çizgilerini yapılandırmak için üyeleri olan bir nesne. Dikey eksen kılavuz çizgilerinin yatay olarak çizildiğini unutmayın. Bu nesnenin özelliklerini belirtmek için aşağıda gösterildiği gibi nesne değişmez gösterimini kullanabilirsiniz: {color: '#333', minSpacing: 20} Tür: nesne
Varsayılan: null
|
vAxis.gridlines.renk |
Grafik alanı içindeki dikey kılavuz çizgilerinin rengi. Geçerli bir HTML renk dizesi belirtin. Tür: dize
Varsayılan: "#CCC"
|
vAxis.gridlines.count |
Grafik alanı içindeki yaklaşık yatay kılavuz çizgisi sayısı.
Tür: sayı
Varsayılan: -1
|
vAxis.gridlines.units |
Grafik hesaplanan ızgaralarla kullanıldığında tarih/tarih/saat/saat veri türlerinin çeşitli yönleri için varsayılan biçimi geçersiz kılar. Yıl, ay, gün, saat, dakika, saniye ve milisaniye biçimlendirmesine izin verir. Genel biçim şöyledir: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]}, hours: {format: [/*format strings here*/]}, minutes: {format: [/*format strings here*/]}, seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]} } } Daha fazla bilgiyi Tarihler ve Saatler'de bulabilirsiniz. Tür: nesne
Varsayılan: null
|
vAxis.minor Izgaralar |
vAxis.gridlines seçeneğine benzer şekilde, dikey eksende alt ızgaraları yapılandırmak için üyeleri olan bir nesne. Tür: nesne
Varsayılan: null
|
vAxis.minor Izgaralar.renk |
Grafik alanı içindeki dikey alt kılavuz çizgilerinin rengi. Geçerli bir HTML renk dizesi belirtin. Tür: dize
Varsayılan: Kılavuz çizgisi ve arka plan renklerinin bir karışımı
|
vAxis.minor Izgaralar.count |
reşit olmayan kılavuz çizgileri sayısı, 0 olarak ayarlanarak hariç tutulan küçük ızgaraların devre dışı bırakılması hariç çoğunlukla kullanımdan kaldırılır. Küçük kılavuz çizgilerinin sayısı, ana kılavuz çizgileri (vAxis.gridlines.interval) ve gerekli minimum aralık (vAxis.minor Izgaralar.minSCPM) arasındaki aralığa bağlıdır. Tür: sayı
Varsayılan: 1
|
vAxis.minor Izgaralar.units |
Grafik cinsinden hesaplanan küçük tablolarla kullanıldığında tarih/tarih/saat/saat veri türlerinin çeşitli yönleri için varsayılan biçimi geçersiz kılar. Yıl, ay, gün, saat, dakika, saniye ve milisaniye biçimlendirmesine izin verir. Genel biçim şöyledir: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Daha fazla bilgiyi Tarihler ve Saatler'de bulabilirsiniz. Tür: nesne
Varsayılan: null
|
vAxis.logÖlçek |
Doğru ise dikey ekseni logaritmik ölçek yapar. Not: Tüm değerler pozitif olmalıdır. Tür: boole
Varsayılan: false
|
vAxis.ölçekTürü |
Dikey ekseni logaritmik ölçek yapan
Tür: dize
Varsayılan: null
|
vAxis.metinKonumu |
Dikey eksen metninin grafik alanına göre konumu. Desteklenen değerler: "out", "in", "none". Tür: dize
Varsayılan: "out"
|
vAxis.metinStil |
Dikey eksen metin stilini belirten bir nesne. Nesnenin biçimi şu şekildedir: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Tür: nesne
Varsayılan:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.ticks |
Otomatik olarak oluşturulan Y ekseni onay işaretlerini belirtilen diziyle değiştirir. Dizinin her bir öğesi geçerli bir onay değeri (sayı, tarih, tarih/saat veya günün saati gibi) ya da bir nesne olmalıdır. Bu nesne bir işaret değeri için
ViewWindow, geçersiz kılınacak bir Örnekler:
Tür: Öğe dizisi
Varsayılan: otomatik
|
vAxis.başlık |
Dikey eksen için bir başlık belirten Tür: dize
Varsayılan: başlık yok
|
vAxis.başlıkMetin Stili |
Dikey eksen başlık metni stilini belirten bir nesne. Nesnenin biçimi şu şekildedir: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Tür: nesne
Varsayılan:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.maxValue |
Dikey eksenin maksimum değerini, belirtilen değere taşır. Bu, çoğu grafikte yukarı yönde olacaktır. Bu değer, verilerin maksimum y değerinden küçük bir değere ayarlanırsa yoksayılır.
Tür: sayı
Varsayılan: otomatik
|
vAxis.minDeğeri |
Dikey eksenin minimum değerini belirtilen değere taşır. Bu, çoğu grafikte aşağı yönlü olacaktır. Bu değer, verilerin minimum y değerinden büyük bir değere ayarlanırsa yoksayılır.
Tür: sayı
Varsayılan: null
|
vAxis.viewWindowMode |
Değerleri grafik alanında oluşturmak için dikey eksenin nasıl ölçekleneceğini belirtir. Aşağıdaki dize değerleri desteklenir:
Tür: dize
Varsayılan: "Güzel"e eşdeğerdir, ancak kullanılırsa
vaxis.viewWindow.min ve vaxis.viewWindow.max öncelikli olur.
|
vAxis.viewWindow |
Dikey eksenin kırpma aralığını belirtir. Tür: nesne
Varsayılan: null
|
vAxis.viewWindow.max |
Oluşturulacak maksimum dikey veri değeri.
Tür: sayı
Varsayılan: otomatik
|
vAxis.viewWindow.min |
Oluşturulacak minimum dikey veri değeri.
Tür: sayı
Varsayılan: otomatik
|
genişlik |
Grafiğin piksel cinsinden genişliği. Tür: sayı
Varsayılan: kapsayıcı öğenin genişliği
|
Yöntemler
Yöntem | |
---|---|
draw(data, options) |
Grafiği çizer. Grafik, yalnızca Dönüş Türü: yok
|
getAction(actionID) |
İstenen Dönüş Türü: nesne
|
getBoundingBox(id) |
Değerler, grafiğin kapsayıcısıyla ilgilidir. Bunu, grafik çizildikten sonra çağırın. Dönüş Türü: nesne
|
getChartAreaBoundingBox() |
Grafik içeriğinin sol, üst, genişlik ve yüksekliğini içeren bir nesne döndürür (yani etiketler ve açıklama hariç):
Değerler, grafiğin kapsayıcısıyla ilgilidir. Bunu, grafik çizildikten sonra çağırın. Dönüş Türü: nesne
|
getChartLayoutInterface() |
Grafiğin ve yerleşimin öğelerinin ekran yerleşimi hakkında bilgi içeren bir nesne döndürür. Döndürülen nesnede aşağıdaki yöntemler çağrılabilir:
Bunu, grafik çizildikten sonra çağırın. Dönüş Türü: nesne
|
getHAxisValue(xPosition, optional_axis_index) |
Örnek: Bunu, grafik çizildikten sonra çağırın. İade Türü: numara
|
getImageURI() |
Grafiği resim URI'si olarak serileştirilmiş olarak döndürür. Bunu, grafik çizildikten sonra çağırın. PNG Grafiklerini Yazdırma konusuna bakın. Dönüş Türü: dize
|
getSelection() |
Seçilen grafik varlıklarından oluşan bir diziyi döndürür.
Balon, seçilebilir öğelerdir.
Bu grafik için herhangi bir zamanda yalnızca bir varlık seçilebilir.
Dönüş Türü: Seçim öğeleri dizisi
|
getVAxisValue(yPosition, optional_axis_index) |
Örnek: Bunu, grafik çizildikten sonra çağırın. İade Türü: numara
|
getXLocation(dataValue, optional_axis_index) |
Grafik kapsayıcısının sol kenarına göre Örnek: Bunu, grafik çizildikten sonra çağırın. İade Türü: numara
|
getYLocation(dataValue, optional_axis_index) |
Grafik kapsayıcısının üst kenarına göre Örnek: Bunu, grafik çizildikten sonra çağırın. İade Türü: numara
|
removeAction(actionID) |
İstenen İade Türü:
none |
setAction(action) |
Kullanıcı işlem metnini tıkladığında yürütülecek bir ipucu işlemi belirler.
İpucu işlemlerinin tümü, grafiğin İade Türü:
none |
setSelection() |
Belirtilen grafik öğelerini seçer. Önceki seçimleri iptal eder.
Balon, seçilebilir öğelerdir.
Bu grafik için tek seferde yalnızca bir öğe seçilebilir.
Dönüş Türü: yok
|
clearChart() |
Grafiği temizler ve ayrılan tüm kaynaklarını serbest bırakır. Dönüş Türü: yok
|
Etkinlikler
Bu etkinliklerin nasıl kullanılacağı hakkında daha fazla bilgi için Temel Etkileşim, Etkinlikleri Kullanma ve Etkinleştirme Etkinlikleri başlıklı makalelere bakın.
Ad | |
---|---|
animationfinish |
Geçiş animasyonu tamamlandığında tetiklenir. Özellikler: yok
|
click |
Kullanıcı grafiğin içini tıkladığında tetiklenir. Başlık, veri öğeleri, gösterge girişleri, eksenler, kılavuz çizgileri veya etiketlerin ne zaman tıklandığını belirlemek için kullanılabilir. Özellikler: targetID
|
error |
Grafik oluşturulmaya çalışılırken bir hata oluştuğunda tetiklenir. Özellikler: kimlik, mesaj
|
legendpagination |
Kullanıcı, sayfalara ayırma göstergelerini tıkladığında tetiklenir. Mevcut sıfır tabanlı sayfa dizinini ve toplam sayfa sayısını geri verir. Özellikler: currentPageIndex, totalPages
|
onmouseover |
Kullanıcı görsel bir varlığın üzerine geldiğinde tetiklenir. İlgili veri tablosu öğesinin satır ve sütun dizinlerini geri verir. Balon, veri tablosundaki bir satırla ilişkilidir (sütun dizini boş). Özellikler: satır, sütun
|
onmouseout |
Kullanıcı görsel varlıktan fareyi uzaklaştırdığında tetiklenir. İlgili veri tablosu öğesinin satır ve sütun dizinlerini geri verir. Balon, veri tablosundaki bir satırla ilişkilidir (sütun dizini boş). Özellikler: satır, sütun
|
ready |
Grafik, harici yöntem çağrıları için hazır. Grafik ve çizim yöntemlerinden sonra etkileşimde bulunmak isterseniz Özellikler: yok
|
select |
Kullanıcı bir görsel öğeyi tıkladığında tetiklenir. Nelerin seçildiğini öğrenmek için Özellikler: yok
|
Veri Politikası
Tüm kod ve veriler tarayıcıda işlenir ve oluşturulur. Hiçbir sunucuya veri gönderilmez.