Genel bakış
Sütun grafiği, kullanıcının tarayıcısına uygun olan SVG veya VML kullanılarak tarayıcıda oluşturulan dikey çubuk grafiktir. Tüm Google grafikleri gibi, sütun grafikler de kullanıcı verilerin üzerine geldiğinde ipuçlarını gösterir. Bu grafiğin yatay bir sürümü için çubuk grafiğe bakın.
Örnekler
Boyama sütunları
Dört değerli metalin yoğunluğunu grafikle gösterelim:
Yukarıda tüm renkler varsayılan mavidir. Bunun nedeni, bunların tamamının aynı serinin parçası olmasıdır. İkinci bir dizi olsaydı bunlar kırmızı renkte olurdu. Bu renkleri stil rolü ile özelleştirebiliriz:
Renkleri seçmenin üç farklı yolu vardır. Veri tablomuz bunların tümünü gösterir: RGB değerleri, İngilizce renk adları ve CSS benzeri bir beyan:
var data = google.visualization.arrayToDataTable([ ['Element', 'Density', { role: 'style' }], ['Copper', 8.94, '#b87333'], // RGB value ['Silver', 10.49, 'silver'], // English color name ['Gold', 19.30, 'gold'], ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration ]);
Sütun stilleri
Stil rolü, CSS benzeri bildirimlerle sütun görünümünün çeşitli yönlerini kontrol etmenize olanak tanır:
color
opacity
fill-color
fill-opacity
stroke-color
stroke-opacity
stroke-width
Bir grafikte çok serbest bir şekilde karıştırma yapmanızı (bir stil seçip ona bağlı kalmanız) önerilmez. Ancak tüm stil özelliklerini göstermek için aşağıdaki örnekleri inceleyin:
İlk iki sütunda her biri belirli bir color
kullanır (ilki İngilizce ad, ikincisi RGB değerine sahiptir). opacity
seçilmediğinden, varsayılan olarak 1,0 (tamamen opak) kullanılıyor.Bu yüzden ikinci sütun arkasındaki ızgara çizgisini belirsizleştiriyor. Üçüncü sütunda, 0, 2'lik bir opacity
kullanılır ve kılavuz çizgisi gösterilir. Dördüncü simgede ise üç stil özelliği kullanılır: kenarlığı çizmek için stroke-color
ve stroke-width
, içindeki dikdörtgenin rengini belirtmek için fill-color
. En sağdaki sütunda ek olarak kenarlık ve dolgu için opaklıklar seçmek üzere stroke-opacity
ve fill-opacity
kullanılır:
function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Visitations', { role: 'style' } ], ['2010', 10, 'color: gray'], ['2020', 14, 'color: #76A7FA'], ['2030', 16, 'opacity: 0.2'], ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'], ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2'] ]);
Sütunları etiketleme
Grafiklerin onay işareti, açıklama etiketleri ve ipuçlarındaki etiketler gibi çeşitli türleri vardır. Bu bölümde, bir sütun grafiğindeki sütunların içine (veya yakınına) etiketleri nasıl yerleştireceğimizi göreceğiz.
Her bir sütuna uygun kimyasal sembolleri kullanarak ek açıklama eklemek istediğimizi varsayalım. Bunun için not özelliğini kullanabiliriz:
Veri tablomuzda, sütun etiketlerimizi barındırmak için { role:
'annotation' }
içeren yeni bir sütun tanımladık:
var data = google.visualization.arrayToDataTable([ ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ], ['Copper', 8.94, '#b87333', 'Cu' ], ['Silver', 10.49, 'silver', 'Ag' ], ['Gold', 19.30, 'gold', 'Au' ], ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ] ]);
Kullanıcılar veri değerlerini görmek için sütunların üzerine geldiklerinde bu değerleri sütunlara kendiniz eklemek isteyebilirsiniz:
Her sütuna yönelik ek açıklamayı belirtmek için bir DataView
oluşturduğumuzdan bu işlem normalden biraz daha karmaşıktır.
<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([ ["Element", "Density", { role: "style" } ], ["Copper", 8.94, "#b87333"], ["Silver", 10.49, "silver"], ["Gold", 19.30, "gold"], ["Platinum", 21.45, "color: #e5e4e2"] ]); var view = new google.visualization.DataView(data); view.setColumns([0, 1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" }, 2]); var options = { title: "Density of Precious Metals, in g/cm^3", width: 600, height: 400, bar: {groupWidth: "95%"}, legend: { position: "none" }, }; var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values")); chart.draw(view, options); } </script> <div id="columnchart_values" style="width: 900px; height: 300px;"></div>
Değeri farklı bir şekilde biçimlendirmek istersek bir biçimlendirici tanımlayabilir ve bunu aşağıdaki gibi bir işleve sarmalayabiliriz:
function getValueAt(column, dataTable, row) { return dataTable.getFormattedValue(row, column); }
Bunu calc: getValueAt.bind(undefined, 1)
olarak adlandırabiliriz.
Etiket tamamen sütunun içine sığmayacak kadar büyükse dışında gösterilir:
Yığınlı sütun grafikler
Yığınlı sütun grafik, ilgili değerleri birbirinin üstüne yerleştiren bir sütun grafiktir. Negatif değerler varsa grafikte referans çizginin altında ters sırada yer alır. Genellikle bir kategori doğal olarak bileşenlere bölündüğünde kullanılır. Örneğin, bazı varsayımsal kitap satışlarını türe bölmek ve zamanla karşılaştırmak:
isStacked
seçeneğini true
olarak ayarlayarak yığınlı bir sütun grafik oluşturursunuz:
var data = google.visualization.arrayToDataTable([ ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 'Western', 'Literature', { role: 'annotation' } ], ['2010', 10, 24, 20, 32, 18, 5, ''], ['2020', 16, 22, 23, 30, 16, 9, ''], ['2030', 28, 19, 29, 30, 12, 13, ''] ]); var options = { width: 600, height: 400, legend: { position: 'top', maxLines: 3 }, bar: { groupWidth: '75%' }, isStacked: true, };
Yığınlı sütun grafikler de% 100 yığınlamayı destekler. Burada, her bir alan değerindeki öğe yığınları %100'e kadar eklenecek şekilde yeniden ölçeklendirilir. Seçenekler, her bir değeri %100'ün yüzdesi olarak biçimlendiren isStacked: 'percent'
ve her değeri 1'lik kesir olarak biçimlendiren isStacked: 'relative'
şeklindedir. Ayrıca, işlevsel olarak isStacked: true
özelliğine eşdeğer olan bir isStacked: 'absolute'
seçeneği de mevcuttur.
Sağdaki% 100 yığınlı grafikte işaret değerleri 1'in kesirleri olarak göreli 0-1 ölçeğini temel alır, ancak eksen değerleri yüzde olarak görüntülenir. Bunun nedeni, yüzde ekseni çizgilerinin göreli 0-1 ölçek değerlerine "#.##%" biçiminin uygulanması sonucunda ortaya çıkar. isStacked: 'percent'
kullanırken göreli 0-1 ölçeğini kullanarak tüm değer/eksen değerlerini belirttiğinizden emin olun.
var options_stacked = { isStacked: true, height: 300, legend: {position: 'top', maxLines: 3}, vAxis: {minValue: 0} };
var options_fullStacked = { isStacked: 'percent', height: 300, legend: {position: 'top', maxLines: 3}, vAxis: { minValue: 0, ticks: [0, .3, .6, .9, 1] } };
Malzeme sütunu grafikleri oluşturma
2014 yılında Google, Google platformlarında çalışan mülkleri ve uygulamaları (Android uygulamaları gibi) arasında ortak bir görünümü ve tarzı desteklemeyi amaçlayan kurallar yayınladı. Bu çabaya Materyal Tasarım diyoruz. Tüm temel tablolarımızın "Materyal" sürümlerini sağlayacağız. Görünümlerini isterseniz bunları kullanabilirsiniz.
Malzeme Sütun Grafiği oluşturma işlemi, artık "Klasik" Sütun Grafiği olarak adlandırdığımız bir sütun oluşturmaya benzer. Google Görselleştirme API'sini yüklersiniz (ancak 'corechart'
paketi yerine 'bar'
paketiyle), veri tablonuzu tanımlayın ve ardından bir nesne oluşturun (ancak google.visualization.ColumnChart
yerine google.charts.Bar
sınıfı yerine).
Çubuk grafikler ve sütun grafikler özde aynı olsa da yön için çubukların dikey (klasik, sütun grafik) veya yatay (çubuk grafik) olup olmadığına bakılmaksızın her iki Materyal Çubuk Grafiği de adlandırıyoruz. Materyal bölümündeki tek fark, bars
seçeneğidir. 'horizontal'
olarak ayarlandığında yön, geleneksel Klasik Çubuk Grafik'e benzer. Aksi halde çubuklar dikey olur.
Not: Malzeme Listeleri, Internet Explorer'ın eski sürümlerinde çalışmaz. (IE8 ve önceki sürümler, Malzeme Listeleri'nin gerektirdiği SVG'yi desteklemez.)
Malzeme Sütun Listeleri'nde Klasik Sütun Listeleri'ne kıyasla birçok küçük iyileştirme yapıldı. İyileştirilmiş bir renk paleti, yuvarlatılmış köşeler, daha net etiket biçimlendirmesi, seriler arasındaki varsayılan aralık daha yumuşak, kılavuz çizgileri ve başlıklar (altyazıların eklenmesi) bu işleve dahildir.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses', 'Profit'], ['2014', 1000, 400, 200], ['2015', 1170, 460, 250], ['2016', 660, 1120, 300], ['2017', 1030, 540, 350] ]); var options = { chart: { title: 'Company Performance', subtitle: 'Sales, Expenses, and Profit: 2014-2017', } }; var chart = new google.charts.Bar(document.getElementById('columnchart_material')); chart.draw(data, google.charts.Bar.convertOptions(options)); } </script> </head> <body> <div id="columnchart_material" style="width: 800px; height: 500px;"></div> </body> </html>
Materyal Listeleri beta sürümündedir. Görünüm ve etkileşim son derece büyük olsa da Klasik Grafiklerde sunulan seçeneklerin çoğu henüz bu seçeneklerde yer almamaktadır. Henüz desteklenmeyen seçeneklerin listesini bu sorunda bulabilirsiniz.
Ayrıca, seçeneklerin bildirilme şekli kesin değildir. Bu yüzden, klasik seçeneklerden herhangi birini kullanıyorsanız şu satırı değiştirerek materyal seçeneklerinizi dönüştürmeniz gerekir:
chart.draw(data, options);
... ... ile:
chart.draw(data, google.charts.Bar.convertOptions(options));
google.charts.Bar.convertOptions()
kullandığınızda hAxis/vAxis.format
ön ayarları seçenekleri gibi belirli özelliklerden yararlanabilirsiniz.
Çift Y grafikleri
Bazen bir sütun grafiğinde iki bağımsız Y ekseni içeren bir seri görüntülemek istersiniz: Bir seri için sol eksen, diğeri için sağ eksen:
İki y eksenimizin farklı şekillerde etiketlenmesinin ("parpes" ve "görünür büyüklük") değil, her birinin kendi bağımsız ölçekleri ve kılavuz çizgileri olduğunu unutmayın. Bu davranışı özelleştirmek isterseniz vAxis.gridlines
seçeneklerini kullanın.
Aşağıdaki kodda, axes
ve series
seçenekleri birlikte grafiğin çift Y görünümünü belirtir. series
seçeneği, her biri için hangi eksenin kullanılacağını belirtir ('distance'
ve 'brightness'
; veri tablosundaki sütun adlarıyla herhangi bir ilişkisi yoktur). axes
seçeneği, ardından bu grafiği çift Y grafiği yaparak 'distance'
eksenini sola ("parsec" olarak adlandırılır) ve sağdaki 'brightness'
eksenini ("görünür büyüklük" olarak adlandırılır) yerleştirir.
<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', 'bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var button = document.getElementById('change-chart'); var chartDiv = document.getElementById('chart_div'); var data = google.visualization.arrayToDataTable([ ['Galaxy', 'Distance', 'Brightness'], ['Canis Major Dwarf', 8000, 23.3], ['Sagittarius Dwarf', 24000, 4.5], ['Ursa Major II Dwarf', 30000, 14.3], ['Lg. Magellanic Cloud', 50000, 0.9], ['Bootes I', 60000, 13.1] ]); var materialOptions = { width: 900, chart: { title: 'Nearby galaxies', subtitle: 'distance on the left, brightness on the right' }, series: { 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. 1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. }, axes: { y: { distance: {label: 'parsecs'}, // Left y-axis. brightness: {side: 'right', label: 'apparent magnitude'} // Right y-axis. } } }; var classicOptions = { width: 900, series: { 0: {targetAxisIndex: 0}, 1: {targetAxisIndex: 1} }, title: 'Nearby galaxies - distance on the left, brightness on the right', vAxes: { // Adds titles to each axis. 0: {title: 'parsecs'}, 1: {title: 'apparent magnitude'} } }; function drawMaterialChart() { var materialChart = new google.charts.Bar(chartDiv); materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions)); button.innerText = 'Change to Classic'; button.onclick = drawClassicChart; } function drawClassicChart() { var classicChart = new google.visualization.ColumnChart(chartDiv); classicChart.draw(data, classicOptions); button.innerText = 'Change to Material'; button.onclick = drawMaterialChart; } drawMaterialChart(); }; </script> </head> <body> <button id="change-chart">Change to Classic</button> <br><br> <div id="chart_div" style="width: 800px; height: 500px;"></div> </body> </html>
Üst-X grafikleri
Not: Üst X eksenleri yalnızca Malzeme grafikleri için kullanılabilir (ör. bar
paketine sahip olanlar).
X ekseni etiketlerini ve başlığı, alt kısımdan ziyade grafiğinizin üstüne yerleştirmek isterseniz bunu Materyal grafiklerde axes.x
seçeneğiyle yapabilirsiniz:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.arrayToDataTable([ ['Move', 'Percentage'], ["King's pawn (e4)", 44], ["Queen's pawn (d4)", 31], ["Knight to King 3 (Nf3)", 12], ["Queen's bishop pawn (c4)", 10], ['Other', 3] ]); var options = { width: 800, legend: { position: 'none' }, chart: { title: 'Chess opening moves', subtitle: 'popularity by percentage' }, axes: { x: { 0: { side: 'top', label: 'White to move'} // Top x-axis. } }, bar: { groupWidth: "90%" } }; var chart = new google.charts.Bar(document.getElementById('top_x_div')); // Convert the Classic options to Material options. chart.draw(data, google.charts.Bar.convertOptions(options)); }; </script> </head> <body> <div id="top_x_div" style="width: 800px; height: 600px;"></div> </body> </html>
Yükleniyor
google.charts.load
paket adı "corechart"
.
Görselleştirmenin sınıf adı: google.visualization.ColumnChart
.
google.charts.load("current", {packages: ["corechart"]});
var visualization = new google.visualization.ColumnChart(container);
Malzeme Sütun Listeleri için google.charts.load
paket adı "bar"
şeklindedir. (Yazım yanlışı: Malzeme Çubuğu
Grafik her iki yönü de işler.)
Görselleştirmenin sınıf adı: google.charts.Bar
. (Yazım yanlışı: Malzeme Çubuğu Grafiği her iki yönü de işler.)
google.charts.load("current", {packages: ["bar"]});
var chart = new google.charts.Bar(container);
Veri biçimi
Tablodaki her satır, komşu grupları temsil eder.
Satırlar: Tablodaki her bir satır bir grup grubu temsil eder.
Sütunlar:
Sütun 0 | 1. Sütun | ... | Sütun N | |
---|---|---|---|---|
Amaç: | Bu gruptaki 1 değeri çubukla göster | ... | Bu gruptaki N değerlerini sabitleyin | |
Veri Türü: | number (sayı) | ... | number (sayı) | |
Rol: | alan | veri | ... | veri |
İsteğe bağlı sütun rolleri: | ... |
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ış
|
notlar.alwayOutside |
Çubuk ve Sütun grafiklerinde Tür: boole
Varsayılan: false
|
notlar.boxStyle |
Ek açıklamaları destekleyen grafiklerde var options = { annotations: { boxStyle: { // Color of the box outline. stroke: '#888', // Thickness of the box outline. strokeWidth: 1, // x-radius of the corner curvature. rx: 10, // y-radius of the corner curvature. ry: 10, // Attributes for linear gradient fill. gradient: { // Start color for gradient. color1: '#fbf6a7', // Finish color for gradient. color2: '#33b679', // Where on the boundary to start and // end the color1/color2 gradient, // relative to the upper left corner // of the boundary. x1: '0%', y1: '0%', x2: '100%', y2: '100%', // If true, the boundary for x1, // y1, x2, and y2 is the box. If // false, it's the entire chart. useObjectBoundingBoxUnits: true } } } }; Bu seçenek şu anda alan, çubuk, sütun, karma, çizgi ve dağılım grafikleri için desteklenmektedir. Ek açıklama Grafiği tarafından desteklenmez. Tür: nesne
Varsayılan: null
|
notlar.datum |
Ek açıklamaları destekleyen grafiklerde
annotations.datum nesnesi, Google Grafikler'in bağımsız veri öğeleri için sağlanan ek açıklamalar (örneğin, çubuk grafikte her çubukla görüntülenen değerler) seçimini geçersiz kılmanıza olanak tanır. Rengi annotations.datum.stem.color ile, kök uzunluğu annotations.datum.stem.length ile ve stili annotations.datum.style ile kontrol edebilirsiniz.
Tür: nesne
Varsayılan: Renk "siyah", uzunluk 12, stil "nokta"dır.
|
notlar.alanadi |
Ek açıklamaları destekleyen grafiklerde
annotations.domain nesnesi, Google Domains'in bir alan için sağlanan ek açıklamalar (tercih edilen çizgi çizgisindeki X ekseni gibi) üzerindeki ek tercihi geçersiz kılmanıza olanak tanır. Rengi annotations.domain.stem.color ile, kök uzunluğu annotations.domain.stem.length ile ve stili annotations.domain.style ile kontrol edebilirsiniz.
Tür: nesne
Varsayılan: Renk "siyah", uzunluk 5, stil "nokta"dır.
|
notlar.boşluk |
Ek açıklamaları destekleyen grafiklerde
annotations.highContrast boole, Google Grafikler'in ek açıklama rengi seçimini geçersiz kılmanıza olanak tanır. Varsayılan olarak annotations.highContrast ayarı doğrudur. Bu seçenek, Grafiklerin iyi kontrasta sahip bir ek açıklama rengi seçmesine neden olur: Koyu arka planlarda açık renkler, açık renkte ise koyu renk. annotations.highContrast değerini yanlış olarak ayarlarsanız ve kendi ek açıklama renginizi belirtmezseniz Google Listeler, ek açıklama için varsayılan dizi rengini kullanır:
Tür: boole
Varsayılan: true
|
notlar.kök |
Ek açıklamayı destekleyen grafikler için
annotations.stem nesnesi, Google Listeler'in kök stili seçimini geçersiz kılmanıza olanak tanır. Rengi annotations.stem.color ile, kök uzunluğunu ise annotations.stem.length ile kontrol edebilirsiniz. Kök uzunluğu seçeneğinin, 'line' stiline sahip ek açıklamalar üzerinde etkisi olmadığını unutmayın: 'line' veri ek açıklamalarında kök uzunluğu her zaman metinle aynıdır. 'line' alan ek açıklamalarında kök, tüm grafiğe yayılır.
Tür: nesne
Varsayılan: Renk "siyah", alan ek açıklamaları için ise 5 ve veri içeren ek açıklamalar için 12'dir.
|
notlar.stil |
Ek açıklamaları destekleyen grafiklerde
annotations.style seçeneği, Google Grafikler'in ek açıklama türü seçimini geçersiz kılmanıza olanak tanır. 'line' veya 'point' olabilir.
Tür: dize
Varsayılan: "point"
|
notlar.metinStil |
Ek açıklamaları destekleyen grafiklerde
annotations.textStyle nesnesi, ek açıklama metninin görünümünü kontrol eder:
var options = { annotations: { textStyle: { fontName: 'Times-Roman', fontSize: 18, bold: true, italic: true, // The color of the text. color: '#871b47', // The color of the text outline. auraColor: '#d799ae', // The transparency of the text. opacity: 0.8 } } }; Bu seçenek şu anda alan, çubuk, sütun, karma, çizgi ve dağılım grafikleri için desteklenmektedir. Ek açıklama Grafiği tarafından desteklenmez. Tür: nesne
Varsayılan: null
|
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"
|
bar.grupGenişliği |
Bir çubuk grubunun genişliği, şu biçimlerden birinde belirtilir:
Tür: sayı veya dize
Varsayılan:
Altın oranı, yaklaşık "%61,8".
|
barlar |
Malzeme Çubuk Grafiği'ndeki çubukların dikey mi yoksa yatay mı olduğu. Bu seçeneğin Klasik Çubuk Grafikler veya Klasik Sütun Grafikleri üzerinde hiçbir etkisi yoktur. Tür: "yatay" veya "dikey"
Varsayılan: "vertical"
|
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
|
grafik.altbaşlık |
Malzeme Listeleri için bu seçenek alt başlığı belirtir. Altyazıları yalnızca Malzeme Listeleri destekler. Tür: dize
Varsayılan: null
|
grafik.başlık |
Malzeme Listeleri için bu seçenek başlığı belirtir. Tür: dize
Varsayılan: null
|
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
|
dataOpaklık |
Veri noktalarının şeffaflığı (1,0 tamamen opak, 0,0 tamamen şeffaf). Dağılım, histogram, çubuk ve sütun grafiklerde bu, görünür veriler anlamına gelir: Dağılım grafiğindeki noktalar ve diğerlerindeki dikdörtgenler. Veri seçmenin nokta oluşturduğu grafiklerde (çizgi ve alan grafikleri gibi) bu, fareyle üzerine gelindiğinde veya seçildiğinde görünen daireleri belirtir. Karma grafik her iki davranışı da gösterir ve bu seçeneğin diğer grafikler üzerinde hiçbir etkisi yoktur. (Trend çizgisinin opaklığını değiştirmek için trend çizgisi opaklığı bölümüne bakın.) Tür: sayı
Varsayılan: 1,0
|
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
|
odakHedef |
Fareyle üzerine gelindiğinde odağı alan varlığın türü. Ayrıca hangi öğenin fare tıklamasıyla seçileceğini ve hangi veri tablosu öğesinin etkinliklerle ilişkilendirildiğini de etkiler. Aşağıdakilerden biri olabilir:
focusTarget "kategorisi"ndeki ipucu, tüm kategori değerlerini görüntüler. Bu, farklı serilerin değerlerini karşılaştırmak için yararlı olabilir. Tür: dize
Varsayılan: "datum"
|
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. Bu seçenek yalnızca Tür: sayı
Varsayılan: otomatik
|
hAxis.baselineColor |
Yatay eksen referans çizgisinin rengi. Herhangi bir HTML renk dizesi olabilir. Örneğin:
Bu seçenek yalnızca 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 veya tarih ekseni etiketleri için bir biçim dizesi.
Sayı ekseni etiketleri için bu, ondalık biçimlendirmenin alt kümesidir
ICU kalıbı grubu
. Örneğin
Tarih ekseni etiketleri için bu, ICU kalıbı grubu tarih biçiminin 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
Bu seçenek yalnızca bir 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}
Bu seçenek yalnızca bir 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.interval |
Bitişik kılavuz çizgileri arasındaki boyut dizisi (piksel olarak değil, veri değeri olarak). Bu seçenek şu an için yalnızca eksensel eksenler içindir, ancak yalnızca tarihler ve saatler için kullanılan Tür: 10 hariç 1 ile 10 arasında bir sayı.
Varsayılan: hesaplanan
|
hAxis.gridlines.minSPageSpeed |
hAxis ana kılavuz çizgileri arasındaki piksel cinsinden minimum ekran alanı.
Büyük kılavuz çizgilerinin varsayılan değeri, doğrusal ölçekler için Tür: sayı
Varsayılan: hesaplanan
|
hAxis.gridlines.Multiple |
Tüm kılavuz çizgisi ve onay değerleri, bu seçeneğin değerinin katı olmalıdır. Aralıkların aksine, çarpmanın 10 katı gücünün dikkate alınmadığını unutmayın.
Bu nedenle, 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.
Bu seçenek yalnızca bir 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.minor Izgaralar.interval |
reşit olmayan Izgaralar.aralık seçeneği, ana kılavuz çizgisi aralığı seçeneğine benzer ancak seçilen aralık her zaman ana kılavuz çizgisi aralığının eşit bir böleni olacaktır.
Doğrusal ölçekler için varsayılan aralık Tür: sayı
Varsayılan:1
|
hAxis.minorCURlines.minSPageSpeed |
Bitişik alt kılavuz çizgileri ile küçük ve ana hatlar arasında piksel cinsinden gereken minimum boşluk. Varsayılan değer, doğrusal ölçekler için ana ızgara çizgilerinin 1/2 min. ilerleme hızı ve günlük ölçekler için minSPageSpeed'in 1/5'idir. Tür: sayı
Varsayılan: hesaplanan
|
hAxis.minor Izgaralar.çoklu |
Başlıca 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 Bu seçenek yalnızca Tür: boole
Varsayılan: false
|
hAxis.scaleType |
Yatay ekseni logaritmik ölçek yapan
Bu seçenek yalnızca 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:
Bu seçenek yalnızca bir 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.allowKapsayıcıBoundaryTextCutoff |
Yanlış değerine ayarlanırsa grafik kapsayıcı tarafından kırpılmasına izin vermek yerine en harici etiketleri gizler. Doğru değerine ayarlanırsa etiket kırpmaya izin verir. Bu seçenek yalnızca Tür: boole
Varsayılan: false
|
hAxis.slantedText |
Doğru değerine ayarlanırsa yatay eksen metnini, eksen üzerinde daha fazla metin sığdırmak için belirli bir açıdan çizin; yanlışsa yatay eksen metnini dik şekilde çizin. Varsayılan davranış, metnin tamamı dik olarak çekildiğinde eğilmemesi durumunda metni eğmektir. Bu seçeneğin yalnızca Tür: boole
Varsayılan: otomatik
|
hAxis.slantedTextAngle |
Yatay eksen metninin eğimli olması durumunda açısı. Tür: sayı, -90-90
Varsayılan: 30
|
hAxis.maxAlternasyonu |
Maksimum yatay eksen metin seviyesi sayısı. Eksen metin etiketleri çok kalabalık olursa sunucu, etiketleri birbirine yaklaştırmak için komşu etiketleri yukarı veya aşağı kaydırabilir. Bu değer, kullanılacak maksimum düzey sayısını belirtir. Etiketler örtüşmeden sığabiliyorsa sunucu daha az düzey kullanabilir. Tarihler ve saatler için varsayılan değer 1'dir. Tür: sayı
Varsayılan: 2
|
hAxis.maxTextÇizgileri |
Metin etiketleri için izin verilen maksimum satır sayısı. Etiketler çok uzunsa birden fazla satırı kapsayabilir ve satır sayısı varsayılan olarak kullanılabilir alanın yüksekliğiyle sınırlıdır. Tür: sayı
Varsayılan: otomatik
|
hAxis.minTextSİlerleme |
Bitişik iki metin etiketi arasında piksel cinsinden minimum yatay boşluk bulunur. Etiketler çok yoğun bir şekilde yerleştirilmişse veya çok uzunsa, aralık bu eşiğin altına düşebilir. Bu durumda, etiket düzenli olmayan önlemlerden biri uygulanır (ör. etiketleri kesip kısaltmak). Tür: sayı
Varsayılan:
hAxis.textStyle.fontSize değeri |
hAxis.showTextHer |
Gösterilecek yatay eksen etiketi sayısı. 1 işareti her etiketi, 2 değeri ise diğer tüm etiketleri gösterir ve bu şekilde devam eder. Varsayılan ayar, çakışma olmadan mümkün olduğunca fazla etiket göstermeye çalışmaktır. Tür: sayı
Varsayılan: otomatik
|
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.
Bu seçenek yalnızca bir 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.
Bu seçenek yalnızca bir 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:
Bu seçenek yalnızca bir 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 |
Tür: sayı
Varsayılan: otomatik
|
hAxis.viewWindow.min |
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
|
Yığınlı |
Doğru değerine ayarlanırsa her alan değerinde tüm serilerin öğelerini gruplandırır. Not: Sütun, Alan ve Adım Bu, Çubuk Grafikleri için geçerli değildir.
%100 yığınlamada her öğenin hesaplanmış değeri ipucunun gerçek değerinin ardından gösterilir.
Hedef eksenin varsayılan değeri, göreli 0-1 ölçeğine göre
%100 yığınlama yalnızca Tür: boole/dize
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.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ğ"
|
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.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>}
|
yön |
Grafiğin yönü. Tür: dize
Varsayılan: "yatay"
|
geri kategoriler |
Doğru değerine ayarlanırsa serileri sağdan sola çizer. Varsayılan olarak soldan sağa doğru çizim yapılır.
Bu seçenek yalnızca bir Tür: boole
Varsayılan: false
|
series |
Her biri, grafikteki ilgili serinin biçimini açıklayan nesne dizisi. Bir serinin varsayılan değerlerini kullanmak için boş bir nesne {} belirtin. Bir seri veya değer belirtilmezse global değer kullanılır. Her nesne aşağıdaki özellikleri destekler:
Bir dizi diziyi veya her biri, verilen sırayla seriyi uygulayabilir veya her bir alt öğenin hangi diziye uygulanacağını belirten sayısal bir anahtara sahip olduğu bir nesne belirtebilirsiniz. Örneğin, aşağıdaki iki beyan aynıdır ve ilk seriyi efsanede siyah ve eksik olarak, dördüncü serinin efsanede kırmızı olarak ve eksik olduğunu ifade eder: series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } Tür: Nesne dizisi veya iç içe yerleştirilmiş nesneler içeren nesne
Varsayılan: {}
|
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
|
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 seri bilgilerinin yanında renkli kareler gösterin. Tür: boole
Varsayılan: otomatik
|
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"
|
trend çizgileri |
Destekleyen grafiklerde trend çizgilerini gösterir. Doğrusal trend çizgileri varsayılan olarak kullanılır ancak
Trend çizgileri dizi başına tek tek belirtildiğinden seçenekleriniz genellikle aşağıdaki gibi görünür: var options = { trendlines: { 0: { type: 'linear', color: 'green', lineWidth: 3, opacity: 0.3, showR2: true, visibleInLegend: true } } } Tür: nesne
Varsayılan: null
|
trend çizgileri.n.renk |
Trend çizgisinin rengi ( İngilizce renk adı veya on altılık dize olarak ifade edilir). Tür: dize
Varsayılan: varsayılan dizi rengi
|
trend çizgileri.n.derece |
Tür: sayı
Varsayılan: 3
|
trendlines.n.labelInLegend |
Ayarlanırsa trend çizgisi açıklamada bu dize olarak görünür. Tür: dize
Varsayılan: null
|
trendlines.n.lineWidth |
Trend çizgisinin çizgi genişliği (piksel). Tür: sayı
Varsayılan: 2
|
trendlines.n.opacity |
Trend çizgisinin 0,0 (şeffaf) ile 1,0 (opak) arasındaki şeffaflığı. Tür: sayı
Varsayılan: 1,0
|
trendlines.n.pointSize |
Trend çizgileri, grafikte çok sayıda nokta damgalamayla yapılır. Bu gerekli olmayan seçenek, noktaların boyutunu özelleştirmenize olanak tanır. Trend çizgisinin Tür: sayı
Varsayılan: 1
|
trendlines.n.pointsVisible |
Trend çizgileri
grafikte çok sayıda nokta damgalanır. Trend çizgisinin Tür: boole
Varsayılan: true
|
trendlines.n.showR2 |
Açıklama veya trend çizgisi ipucunda belirleme katsayısının gösterilip gösterilmeyeceği. Tür: boole
Varsayılan: false
|
trendlines.n.type |
Trend çizgilerinin Tür: dize
Varsayılan: doğrusal
|
trendlines.n.visibleInLegend |
Trend çizgisi denkleminin açıklamalarda görünüp görünmediği. (Trend çizgisi ipucunda görünür.) Tür: boole
Varsayılan: false
|
vAx'lar |
Grafikte birden fazla dikey eksen varsa tek tek eksen eksenlerinin özelliklerini belirtir.
Her alt nesne bir
Birden fazla dikey eksene sahip bir grafik belirtmek için önce { series: { 2: { targetAxisIndex:1 } }, vAxes: { 1: { title:'Losses', textStyle: {color: 'red'} } } }
Bu özellik bir nesne veya dizi olabilir. Nesne, her biri tanımladığı ekseni belirten sayısal bir etikete sahip nesne koleksiyonudur. Bu, yukarıda gösterilen biçimdir; dizi, eksen başına bir nesne dizisidir. Örneğin, aşağıdaki dizi stili gösterimi, yukarıda gösterilen vAxes: [ {}, // Nothing specified for axis 0 { title:'Losses', textStyle: {color: 'red'} // Axis 1 } ] Tür: Nesne dizisi veya alt nesneleri olan nesne
Varsayılan: null
|
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.interval |
Bitişik kılavuz çizgileri arasındaki boyut dizisi (piksel olarak değil, veri değeri olarak). Bu seçenek şu an için yalnızca eksensel eksenler içindir, ancak yalnızca tarihler ve saatler için kullanılan Tür: 10 hariç 1 ile 10 arasında bir sayı.
Varsayılan: hesaplanan
|
vAxis.gridlines.minSPageSpeed |
hAxis ana kılavuz çizgileri arasındaki piksel cinsinden minimum ekran alanı.
Büyük kılavuz çizgilerinin varsayılan değeri, doğrusal ölçekler için Tür: sayı
Varsayılan: hesaplanan
|
vAxis.gridlines.Multiple |
Tüm kılavuz çizgisi ve onay değerleri, bu seçeneğin değerinin katı olmalıdır. Aralıkların aksine, çarpmanın 10 katı gücünün dikkate alınmadığını unutmayın.
Bu nedenle, 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.interval |
reşit olmayan Izgaralar.aralık seçeneği, ana kılavuz çizgisi aralığı seçeneğine benzer ancak seçilen aralık her zaman ana kılavuz çizgisi aralığının eşit bir böleni olacaktır.
Doğrusal ölçekler için varsayılan aralık Tür: sayı
Varsayılan:1
|
vAxis.minor Izgaralar.minSPageSpeed |
Bitişik alt kılavuz çizgileri ile küçük ve ana hatlar arasında piksel cinsinden gereken minimum boşluk. Varsayılan değer, doğrusal ölçekler için ana ızgara çizgilerinin 1/2 min. ilerleme hızı ve günlük ölçekler için minSPageSpeed'in 1/5'idir. Tür: sayı
Varsayılan: hesaplanan
|
vAxis.minor Izgaralar.çoklu |
Başlıca 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
Bu seçenek yalnızca 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.
Seçilebilir öğeler çubuklar, açıklama girişi ve kategorilerdir.
Çubuk, veri tablosundaki bir hücreye, bir sütun için açıklama girişine (satır dizini null) ve bir satıra ait bir kategoriye (sütun dizini null) karşılık gelir.
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 çubuklar, açıklama girişi ve kategorilerdir.
Çubuk, veri tablosundaki bir hücreye, bir sütun için açıklama girişine (satır dizini null) ve bir satıra ait bir kategoriye (sütun dizini null) karşılık gelir.
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. Ö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. Ö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.