Genel bakış
Google çubuk grafikleri, kullanıcının tarayıcısına uygun olan SVG veya VML kullanılarak tarayıcıda oluşturulur. Tüm Google grafikleri gibi, çubuk grafikler de kullanıcı verilerin üzerine geldiğinde ipuçlarını gösterir. Bu grafiğin dikey bir sürümü için sütun grafiğine bakın.
Örnekler
Boyama çubukları
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
]);
Çubuk stilleri
Stil rolü, CSS benzeri bildirimlerle çubuk görünümünün çeşitli yönlerini kontrol etmenize olanak tanır:
coloropacityfill-colorfill-opacitystroke-colorstroke-opacitystroke-width
Bir grafikte çok serbest bir şekilde karıştırma yapmanızı (bir stil seçip ona bağlı kalmanız) önerilmez. Tüm stil özelliklerini göstermek için aşağıdaki örnekleri inceleyin:
İlk iki çubuğun her biri belirli bir color kullanır (ilki İngilizce ad, ikincisi RGB değeri ile). opacity seçilmediğinden, varsayılan olarak 1.0 (tamamen opak) kullanılır; bu nedenle ikinci çubuk arkasındaki gri çizgiyi belirsizleştirir. Üçüncü çubukta, kılavuz çizgisini gösteren 0, 2'lik bir opacity kullanılır. Dördüncü çubukta, üç stil özelliği kullanılır: Kenarlıkı çizmek için stroke-color ve stroke-width ve içindeki dikdörtgenin rengini belirtmek için fill-color. En sağdaki çubuk ayrıca kenarlık ve dolgu için opaklıklar seçmek üzere stroke-opacity ve fill-opacity özelliklerini kullanı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']
]);
Etiket çubukları
Grafiklerin onay işareti, açıklama etiketleri ve araç ipuçlarındaki etiketleri gibi çeşitli türleri vardır. Bu bölümde, çubuk grafikte çubukların içine (veya yakınına) nasıl etiket yerleştireceğinizi göreceğiz.
Her bir çubuğa uygun kimyasal sembollerle ek açıklama eklemek istediğimizi varsayalım. Bunun için not özelliğini kullanabiliriz:
Veri tablomuzda, çubuk etiketlerimizi tutmak için { role:
'annotation' } ile yeni bir sütun tanımlarız:
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 fare imlecini çubukların üzerine getirebilir ancak siz bunları çubuklara kendiniz eklemek isteyebilirsiniz:
Her çubuk için ek açıklamayı belirtmek üzere bir DataView oluşturduğumuzdan, bu işlem olması gerekenden biraz daha karmaşıktır.
<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.BarChart(document.getElementById("barchart_values"));
chart.draw(view, options);
}
</script>
<div id="barchart_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, çubuğun içine sığmayacak kadar büyükse dış mekanda gösterilir:
Yığınlı çubuk grafikler
Yığınlı çubuk grafik, alakalı değerleri birbirinin üstüne yerleştiren bir çubuk grafiktir. Negatif değerler varsa grafiğin eksen tabanının altında ters sırada yer alır. Yığınlı çubuk grafikler, genellikle bir kategori doğal bir şekilde 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 çubuk 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ı çubuk grafikler de% 100 yığınlı biçimi destekler. Burada her alan değerindeki öğe yığınları, %100'e kadar kaldırılacak ş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 değer işaretlerini belirttiğinizden emin olun.
var options_stacked = {
isStacked: true,
height: 300,
legend: {position: 'top', maxLines: 3},
hAxis: {minValue: 0}
};
var options_fullStacked = {
isStacked: 'percent',
height: 300,
legend: {position: 'top', maxLines: 3},
hAxis: {
minValue: 0,
ticks: [0, .3, .6, .9, 1]
}
};
Materyal çubuk 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.
Materyal Çubuk Grafiği oluşturma işlemi, artık "Klasik" Çubuk Grafik
olarak adlandıracağımız şekliyle bir tablo 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 bir nesne oluşturun (ancak google.visualization.BarChart yerine google.charts.Bar sınıfı yerine).
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.)
Materyal Çubuk Grafikleri, Klasik Çubuk Grafikler'e kıyasla çok sayıda küçük iyileştirme içerir. İyileştirilmiş bir renk paleti, yuvarlatılmış köşeler, daha anlaşılır etiket biçimlendirmesi, seriler arasındaki varsayılan aralık daha yumuşak, kılavuz çizgileri ve başlıklar (ve altyazı ekleme) buna örnektir.
<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',
},
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="barchart_material" style="width: 900px; 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 nedenle, klasik seçeneklerden herhangi birini kullanıyorsanız bunları şu satırı değiştirerek önemli seçeneklere 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 X grafikleri
Not: Çift X ekseni yalnızca Malzeme grafikleri için kullanılabilir (ör. bar paketine sahip olanlar).
Bazen bir çubuk grafikte bir dizi için üst eksen ve bir diğeri için alt eksen olmak üzere iki bağımsız x ekseni içeren iki seri görüntülemek istersiniz: