Genel bakış
Tarayıcıda SVG veya VML kullanılarak oluşturulan bir pasta grafik. Dilimlerin üzerine geldiğinizde ipuçlarını gösterir.
Ö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(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var options = { title: 'My Daily Activities' }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } </script> </head> <body> <div id="piechart" style="width: 900px; height: 500px;"></div> </body> </html>
3D Pasta Grafik Oluşturma
is3D
seçeneğini true
olarak ayarlarsanız pasta grafiğiniz üç boyuta sahip olarak çizilir:
is3D
, varsayılan olarak false
olduğundan burada açıkça true
olarak ayarlanıyor:
<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([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart(document.getElementById('piechart_3d')); chart.draw(data, options); } </script> </head> <body> <div id="piechart_3d" style="width: 900px; height: 500px;"></div> </body> </html>
Donut Grafiği Oluşturma
Donut grafiği, ortasında delik bulunan bir pasta grafiktir. pieHole
seçeneğiyle halka grafikler oluşturabilirsiniz:
pieHole
seçeneği, delik ile grafik arasındaki yarıçap sayısına karşılık gelen 0 ile 1 arasında bir sayıya ayarlanmalıdır. 0,4 ile 0,6 arasındaki sayılar çoğu grafikte en iyi sonucu verir.
1'e eşit veya 1'den büyük değerler göz ardı edilir ve 0 değeri
sırtınızı tamamen kapatır.
<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([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart(document.getElementById('donutchart')); chart.draw(data, options); } </script> </head> <body> <div id="donutchart" style="width: 900px; height: 500px;"></div> </body> </html>
pieHole
ve is3D
seçeneklerini birleştiremezsiniz. pieHole
, yoksayılır.
Google Listeler'in, etiketi dilim merkezine mümkün olduğunca yakın yerleştirmeye çalıştığını unutmayın. Tek bir dilim bulunan halka çizelgeniz varsa dilimin ortası halka deliğine denk gelebilir. Bu durumda, etiketin rengini değiştirin:
var options = { pieHole: 0.5, pieSliceTextStyle: { color: 'black', }, legend: 'none' };
<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([ ['Effort', 'Amount given'], ['My all', 100], ]); var options = { pieHole: 0.5, pieSliceTextStyle: { color: 'black', }, legend: 'none' }; var chart = new google.visualization.PieChart(document.getElementById('donut_single')); chart.draw(data, options); } </script> </head> <body> <div id="donut_single" style="width: 900px; height: 500px;"></div> </body> </html>
Pasta Grafiğin Rotasyonu
Varsayılan olarak, pasta grafikler ilk dilimin sol kenarını yukarıyı işaret ederek başlar. Bunu pieStartAngle
seçeneğiyle değiştirebilirsiniz:
Burada, pieStartAngle: 100
seçeneğini kullanarak grafiği saat yönünde 100 derece döndürüyoruz. (Söz konusu açı "İtalyan" etiketi dilimin içine sığdığından seçin.)
<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([ ['Language', 'Speakers (in millions)'], ['German', 5.85], ['French', 1.66], ['Italian', 0.316], ['Romansh', 0.0791] ]); var options = { legend: 'none', pieSliceText: 'label', title: 'Swiss Language Use (100 degree rotation)', pieStartAngle: 100, }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } </script> </head> <body> <div id="piechart" style="width: 900px; height: 500px;"></div> </body> </html>
Bir Dilimi Patlama
slices
seçeneğinin offset
özelliğini kullanarak pasta dilimlerini grafiğin geri kalanından ayırabilirsiniz:
Bir dilimi ayırmak için slices
nesnesi oluşturun ve 0 ile 1 arasında uygun dilim sayısına offset
atayın. Aşağıda, 4. (Gujarati), 12 (Marathi), 14 (Oriya) ve 15 (Pencapça)
için dilimlere kademeli olarak daha büyük ofsetler atarız:
<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([ ['Language', 'Speakers (in millions)'], ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4], ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300], ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5], ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5], ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33], ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5], ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52] ]); var options = { title: 'Indian Language Use', legend: 'none', pieSliceText: 'label', slices: { 4: {offset: 0.2}, 12: {offset: 0.3}, 14: {offset: 0.4}, 15: {offset: 0.5}, }, }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } </script> </head> <body> <div id="piechart" style="width: 900px; height: 500px;"></div> </body> </html>
Dilimleri Kaldırma
Bir dilimi hariç tutmak için rengi 'transparent'
olarak değiştirin:
Ayrıca, grafiği 135 derece döndürmek için pieStartAngle
, dilimlerden metin kaldırmak için pieSliceText
ve ipuçlarını devre dışı bırakmak için tooltip.trigger
seçeneklerini kullandık:
<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([ ['Pac Man', 'Percentage'], ['', 75], ['', 25] ]); var options = { legend: 'none', pieSliceText: 'none', pieStartAngle: 135, tooltip: { trigger: 'none' }, slices: { 0: { color: 'yellow' }, 1: { color: 'transparent' } } }; var chart = new google.visualization.PieChart(document.getElementById('pacman')); chart.draw(data, options); } </script> </head> <body> <div id="pacman" style="width: 900px; height: 500px;"></div> </body> </html>
Dilim Eşiği
Bir pasta diliminin ayrı ayrı oluşturulması için eşik değerini bir değer olarak ayarlayabilirsiniz. Bu değer, grafiğin yalnızca bir kısmına karşılık gelir (grafiğin tamamı 1 değerindedir). Bu eşiği bütünün bir yüzdesi olarak ayarlamak için, istenen yüzdeyi 100'e bölün (%20 eşiği için değer 0, 2 olur).
sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.
Bu eşiğin altındaki dilimler, tek bir "Diğer" dilimi altında birleştirilir ve eşiğin altındaki tüm dilimlerin birleşik değerine sahip olur.
google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Pizza'); data.addColumn('number', 'Populartiy'); data.addRows([ ['Pepperoni', 33], ['Hawaiian', 26], ['Mushroom', 22], ['Sausage', 10], // Below limit. ['Anchovies', 9] // Below limit. ]); var options = { title: 'Popularity of Types of Pizza', sliceVisibilityThreshold: .2 }; var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); }
Yükleniyor
google.charts.load
paket adı "corechart"
.
google.charts.load("current", {packages: ["corechart"]});
Görselleştirmenin sınıf adı: google.visualization.PieChart
.
var visualization = new google.visualization.PieChart(container);
Veri Biçimi
Satırlar: Tablodaki her satır bir dilimi temsil eder.
Sütunlar:
Sütun 0 | 1. Sütun | ... | Sütun N (isteğe bağlı) | |
---|---|---|---|---|
Amaç: | Dilim etiketleri | Dilim değerleri | ... | İsteğe bağlı roller |
Veri Türü: | string | number (sayı) | ... | |
Rol: | alan | veri | ... | |
İsteğe bağlı sütun rolleri: | Yok | Yok | ... |
Yapılandırma Seçenekleri
Ad | |
---|---|
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"
|
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
|
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
|
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
|
yükseklik |
Grafiğin piksel cinsinden yüksekliği. Tür: sayı
Varsayılan: kapsayıcı öğenin yüksekliği
|
3D |
Doğru ise üç boyutlu grafik gösterir. Tür: boole
Varsayılan: false
|
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
|
açıklama.konumu |
Açıklamaların konumu. Aşağıdakilerden biri olabilir:
Tür: dize
Varsayılan: "sağ"
|
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
|
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>}
|
PieHole |
0 ile 1 arasında ise bir halka grafik gösterir. Yarıçapı, grafiğin yarıçapının Tür: sayı
Varsayılan: 0
|
PieSlice |
Dilimin kenarlıkları. Yalnızca grafik iki boyutlu olduğunda geçerlidir. Tür: dize
Varsayılan: "white"
|
Metin_Metin |
Dilimde gösterilen metnin içeriği. Aşağıdakilerden biri olabilir:
Tür: dize
Varsayılan: "yüzde"
|
pieSliceMetin Stili |
Dilim metin 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>}
|
PieStartAngle |
Grafiği döndürecek derece cinsinden açı. Tür: sayı
Varsayılan:
0 |
geri kategoriler |
Doğruysa dilimleri saat yönünün tersine çizer. Varsayılan olarak saat yönünde çizim yapılır. Tür: boole
Varsayılan: false
|
PieResidueSliceRenk |
Tüm dilimleri sliceGörünürlükThreshold değerinin altında tutan kombinasyon dilimi. Tür: dize
Varsayılan: "#ccc"
|
PieResidueSliceEtiketi |
Kombinasyon dilimi için, tüm dilimleri slicceGörünürlükThreshold değerinin altında tutan bir etiket. Tür: dize
Varsayılan: "Diğer"
|
dilimler |
Her biri, pastadaki ilgili dilimin biçimini açıklayan bir nesne dizisi. Bir dilim için varsayılan değerleri kullanmak üzere boş bir nesne belirtin (ör.
Bir nesne dizisi belirtebilirsiniz. Bunların her biri, verilen sırada dilim için geçerlidir veya her bir alt öğenin hangi dilim için geçerli olduğunu belirten sayısal bir anahtara sahip olduğu bir nesne belirtebilirsiniz. Örneğin, aşağıdaki iki beyan aynıdır ve ilk dilimi siyah, dördüncüsünü ise kırmızı olarak bildirmelisiniz: slices: [{color: 'black'}, {}, {}, {color: 'red'}] slices: {0: {color: 'black'}, 3: {color: 'red'}} Tür: Nesne dizisi veya iç içe yerleştirilmiş nesneler içeren nesne
Varsayılan: {}
|
dilimGörünürlükEşik |
Pastanın, belli bir kısmın ayrı ayrı gösterilmediği kesirli değeri. Bu eşiği geçmeyen tüm dilimler, tüm boyutlarının toplamı olan tek bir "Diğer" dilimi altında birleştirilir. Varsayılan olarak yarım dereceden küçük olan herhangi bir dilim ayrı olarak gösterilmez. // Slices less than 25% of the pie will be // combined into an "Other" slice. sliceVisibilityThreshold: .25 Tür: sayı
Varsayılan: Yarı derece (0,5/360, 1/720 veya 0,0014)
|
başlık |
Grafiğin üzerinde görüntülenecek metin. Tür: dize
Varsayılan: başlık yok
|
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
|
araç ipucu.ignoreBounds |
Not: Bu yalnızca HTML ipuçları için geçerlidir. Bu ayar SVG ipuçlarıyla etkinleştirilirse grafik sınırlarının dışındaki taşma işlemleri kırpılır. Daha fazla ayrıntı için İpucu İçeriğini Özelleştirme bölümüne bakın. Tür: boole
Varsayılan: false
|
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
|
İpucu.ShowRenkKodu |
Doğru değerine ayarlanırsa ipucunda dilim bilgilerinin yanında renkli kareleri gösterir. Tür: boole
Varsayılan: false
|
ipucu.metin |
Kullanıcı bir pasta diliminin üzerine geldiğinde gösterilecek bilgiler. Aşağıdaki değerler desteklenir:
Tür: dize
Varsayılan: "her ikisi"
|
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"
|
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.
Seçilebilir öğeler, dilimler ve açıklama girişidir.
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.
Seçilebilir öğeler, dilimler ve açıklama girişidir.
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 | |
---|---|
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
|
onmouseover |
Kullanıcı görsel bir varlığın üzerine geldiğinde tetiklenir. İlgili veri tablosu öğesinin satır ve sütun dizinlerini geri verir. Bir dilim veya açıklama girişi, 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. Bir dilim veya açıklama girişi, 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.