Bu sayfada, bir grafikte yapılan değişiklikleri anında uygulamak yerine, nasıl canlandıracağınız açıklanmaktadır.
İçindekiler
Genel bakış
Google grafikleri, grafiği ilk çizdiğinizde başlangıçta ya da verilerde veya seçeneklerde değişiklik yaptıktan sonra yeniden çizdiğinizde olmak üzere iki yöntemden biriyle sorunsuz animasyon oluşturabilir.
Başlangıçta animasyon eklemek için:
- Grafik verilerinizi ve seçeneklerinizi belirleyin. Animasyon süresi ve yumuşak geçiş türü ayarladığınızdan emin olun.
-
animation: {"startup": true}değerini ayarlayın. Seçeneklerinizde bunu ayarlamak, grafiğinizin referans değerde çizilen seri değerleriyle başlamasına ve son durumuna kadar animasyon göstermesine neden olur. - Verilerinizi ve seçeneklerinizi ileterek
chart.draw()numaralı telefonu arayın.
Bir geçişe animasyon eklemek için:
- Önceden oluşturulmuş bir grafikle başlayın.
- Veri tablosunu veya seçenekleri değiştirin. Farklı grafik türleri farklı değişiklikleri destekler. Hangi grafik türlerinde hangi değişikliklerin desteklendiğini öğrenmek için Desteklenen Değişiklikler bölümüne bakın.
- Animasyon seçeneğini kullanarak geçiş davranışını belirtin.
- Yeni değerlere geçiş için grafiğinizde
chart.draw()öğesini çağırın.
Bir düğme her tıklandığında çubuk grafikte sunulan tek değeri değiştiren basit bir örneği burada görebilirsiniz:
function init() {
var options = {
width: 400,
height: 240,
animation:{
duration: 1000,
easing: 'out',
},
vAxis: {minValue:0, maxValue:1000}
};
var data = new google.visualization.DataTable();
data.addColumn('string', 'N');
data.addColumn('number', 'Value');
data.addRow(['V', 200]);
var chart = new google.visualization.ColumnChart(
document.getElementById('visualization'));
var button = document.getElementById('b1');
function drawChart() {
// Disabling the button while the chart is drawing.
button.disabled = true;
google.visualization.events.addListener(chart, 'ready',
function() {
button.disabled = false;
});
chart.draw(data, options);
}
button.onclick = function() {
var newValue = 1000 - data.getValue(0, 1);
data.setValue(0, 1, newValue);
drawChart();
}
drawChart();
}
Desteklenen Değişiklikler
Farklı geçiş türleri için sağlanan destek, grafikler arasında farklılık gösterir. Farklı geçiş türleri şunlardır:
- Yalnızca veri tablosu değerlerinde yapılan değişiklikler. Satır ve sütun sayısı aynıdır, sütunlardaki orijinal tür ve roller korunur.
- Sütun (seri) ekleme veya kaldırma.
- Satır (kategori) ekleme veya kaldırma.
-
Grafik seçeneklerinde yapılan değişiklikler. Şu anda değişiklik olduğunda animasyonlu olarak gösterilecek seçenekler şunlardır:
-
Görünüm penceresi (
vAxis.viewWindow.min,vAxis.viewWindow.max,hAxis.viewWindow.min,hAxis.viewWindow.max): Görünüm penceresini değiştirmek, "yakınlaştırma" ve sürekli "drift" efektlerini uygulamak için faydalıdır (aşağıdaki örneklere bakın) -
vAxis.ticksvehAxis.ticksdeğerleri vAxis.gridlines.countvehAxis.gridlines.countvAxis.directionvehAxis.directionvAxis.baselinevehAxis.baselinevAxis.logScalevehAxis.logScale- grafik boyutu (
heightvewidth) -
grafik alanı (
chartArea.height,chartArea.width,chartArea.top,chartArea.left)
-
Görünüm penceresi (
| Değişiklik Türü | Geçerli grafik türleri |
|---|---|
| Değer değişiklikleri | ScatterChart, Çizgi Grafik, AlanGrafik, ÇubukGrafik, Balon Grafik, SütunGrafik, ŞamdanGrafik, SteppedAreaChart, Birleşik Grafik, Gösterge |
| Satır ekleme/kaldırma | ScatterChart, LineChart, AreaChart, BubbleChart, ComboChart (yalnızca çizgi/alan serisiyle) |
| Sütun ekleme/kaldırma | ScatterChart, Çizgi Grafik, AlanGrafik, ÇubukGrafik, BubbleChart, ColumnChart, ŞamdanGrafik, SteppedAreaChart, ComboChart |
| Grafik seçeneklerini değiştirme | ScatterChart, Çizgi Grafik, AlanGrafik, ÇubukGrafik, BubbleChart, ColumnChart, ŞamdanGrafik, SteppedAreaChart, ComboChart |
Geçiş davranışı
| Ad | |
|---|---|
| animation.duration |
Animasyonun süresi (milisaniye cinsinden). Ayrıntılar için animasyon dokümanlarına bakın. Tür: numara
Varsayılan: 0
|
| animation.easing |
Animasyona uygulanan yumuşak geçiş işlevi. Aşağıdaki seçenekler kullanılabilir:
Tür: dize
Varsayılan: 'Doğrusal'
|
| animation.startup |
Grafikteki ilk çizimde animasyonun gösterilip gösterilmeyeceğini belirler. Değer Tür: boole
Varsayılan false
|
Etkinlikler
Bir grafik çizerken, grafik harici yöntem çağrıları için hazır olduğunda "hazır" etkinliği tetiklenir.
Geçiş tamamlandığında grafik, animationfinish etkinliğini tetikler.
| Ad | |
|---|---|
animationfinish |
Geçiş animasyonu tamamlandığında tetiklenir. Özellikler: yok
|
Örnekler
Değer değişiklikleri
// Some raw data (not necessarily accurate)
var rowData1 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua Guinea',
'Rwanda', 'Average'],
['2004/05', 165, 938, 522, 998, 450, 114.6],
['2005/06', 135, 1120, 599, 1268, 288, 382],
['2006/07', 157, 1167, 587, 807, 397, 623],
['2007/08', 139, 1110, 615, 968, 215, 409.4],
['2008/09', 136, 691, 629, 1026, 366, 569.6]];
var rowData2 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua Guinea',
'Rwanda', 'Average'],
['2004/05', 122, 638, 722, 998, 450, 614.6],
['2005/06', 100, 1120, 899, 1268, 288, 682],
['2006/07', 183, 167, 487, 207, 397, 623],
['2007/08', 200, 510, 315, 1068, 215, 609.4],
['2008/09', 123, 491, 829, 826, 366, 569.6]];
// Create and populate the data tables.
var data = [];
data[0] = google.visualization.arrayToDataTable(rowData1);
data[1] = google.visualization.arrayToDataTable(rowData2);
var options = {
width: 400,
height: 240,
vAxis: {title: "Cups"},
hAxis: {title: "Month"},
seriesType: "bars",
series: {5: {type: "line"}},
animation:{
duration: 1000,
easing: 'out'
},
};
var current = 0;
// Create and draw the visualization.
var chart = new google.visualization.ComboChart(document.getElementById('visualization'));
var button = document.getElementById('b1');
function drawChart() {
// Disabling the button while the chart is drawing.
button.disabled = true;
google.visualization.events.addListener(chart, 'ready',
function() {
button.disabled = false;
button.value = 'Switch to ' + (current ? 'Tea' : 'Coffee');
});
options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea') + ' Production by Country';
chart.draw(data[current], options);
}
drawChart();
button.onclick = function() {
current = 1 - current;
drawChart();
}
Satır ekleme ve kaldırma
var options = {
width: 400,
height: 240,
vAxis: {minValue:0, maxValue:100},
animation: {
duration: 1000,
easing: 'in'
}
};
var chart = new google.visualization.LineChart(
document.getElementById('visualization'));
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'y');
data.addRow(['100', 123]);
data.addRow(['700', 17]);
var button = document.getElementById('b1');
function drawChart() {
// Disabling the button while the chart is drawing.
button.disabled = true;
google.visualization.events.addListener(chart, 'ready',
function() {
button.disabled = false;
});
chart.draw(data, options);
}
button.onclick = function() {
if (data.getNumberOfRows() > 5) {
data.removeRow(Math.floor(Math.random() * data.getNumberOfRows()));
}
// Generating a random x, y pair and inserting it so rows are sorted.
var x = Math.floor(Math.random() * 1000);
var y = Math.floor(Math.random() * 100);
var where = 0;
while (where < data.getNumberOfRows() && parseInt(data.getValue(where, 0)) < x) {
where++;
}
data.insertRows(where, [[x.toString(), y]]);
drawChart();
}
drawChart();
Sütun ekleme ve kaldırma
var options = {
width: 400,
height: 240,
vAxis: {minValue:0, maxValue:1000},
animation: {
duration: 1000,
easing: 'out'
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById('visualization'));
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz';
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'A');
data.addColumn('number', 'B');
data.addRow(['A', 123, 40]);
data.addRow(['B', 17, 20]);
var addButton = document.getElementById('b1');
var removeButton = document.getElementById('b2');
function drawChart() {
// Disabling the buttons while the chart is drawing.
addButton.disabled = true;
removeButton.disabled = true;
google.visualization.events.addListener(chart, 'ready',
function() {
// Enabling only relevant buttons.
addButton.disabled = (data.getNumberOfColumns() - 1) >= chars.length;
removeButton.disabled = (data.getNumberOfColumns() - 1) < 2;
});
chart.draw(data, options);
}
function shuffleAndDrawChart() {
for (var i = 0; i < data.getNumberOfRows(); ++i) {
for (var j = 1; j < data.getNumberOfColumns(); ++j) {
var num = Math.floor(Math.random() * 1000);
data.setValue(i, j, num);
}
}
drawChart();
}
addButton.onclick = function() {
data.addColumn('number', chars[data.getNumberOfColumns() - 1]);
shuffleAndDrawChart();
}
removeButton.onclick = function() {
data.removeColumn(data.getNumberOfColumns() - 1);
shuffleAndDrawChart();
}
drawChart();
Görünüm penceresini değiştirme
var options = {
width: 400,
height: 240,
animation: {
duration: 1000,
easing: 'in'
},
hAxis: {viewWindow: {min:0, max:5}}
};
var chart = new google.visualization.SteppedAreaChart(
document.getElementById('visualization'));
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'y');
var MAX = 10;
for (var i = 0; i < MAX; ++i) {
data.addRow([i.toString(), Math.floor(Math.random() * 100)]);
}
var prevButton = document.getElementById('b1');
var nextButton = document.getElementById('b2');
var changeZoomButton = document.getElementById('b3');
function drawChart() {
// Disabling the button while the chart is drawing.
prevButton.disabled = true;
nextButton.disabled = true;
changeZoomButton.disabled = true;
google.visualization.events.addListener(chart, 'ready',
function() {
prevButton.disabled = options.hAxis.viewWindow.min <= 0;
nextButton.disabled = options.hAxis.viewWindow.max >= MAX;
changeZoomButton.disabled = false;
});
chart.draw(data, options);
}
prevButton.onclick = function() {
options.hAxis.viewWindow.min -= 1;
options.hAxis.viewWindow.max -= 1;
drawChart();
}
nextButton.onclick = function() {
options.hAxis.viewWindow.min += 1;
options.hAxis.viewWindow.max += 1;
drawChart();
}
var zoomed = false;
changeZoomButton.onclick = function() {
if (zoomed) {
options.hAxis.viewWindow.min = 0;
options.hAxis.viewWindow.max = 5;
} else {
options.hAxis.viewWindow.min = 0;
options.hAxis.viewWindow.max = MAX;
}
zoomed = !zoomed;
drawChart();
}
drawChart();
Grafik boyutunu değiştirme
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart () {
function genData () {
var array = [];
for (var i = 0; i < 10; i++) {
var x = i,
y = Math.floor(Math.random() * 50),
z = Math.floor(Math.random() * 25);
array.push([x, y, z]);
}
return array;
}
function doubleIt() {
options.chartArea.height = '100%';
options.chartArea.width = '100%';
}
function halveIt() {
options.chartArea.height = '50%';
options.chartArea.width = '50%';
}
function goTo50() {
options.chartArea.left = '50%';
options.chartArea.top = '50%';
}
function goTo10() {
options.chartArea.left = '10%';
options.chartArea.top = '10%';
}
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
data.addColumn('number', 'Z');
data.addRows(genData());
var options = {
height: 500,
chartArea: {
height: '50%',
width: '50%',
top: '10%',
left: '10%'
},
colors: ['#ee8100', '#9575cd'],
animation: {
duration: 1500,
easing: 'linear',
startup: true
},
vAxis: {
ticks: [10, 20, 30, 40, 50, 60],
gridlines: {color: '#ccc'}
},
hAxis: {
ticks: [0, 4, 8, 12],
gridlines: {color: '#ccc'}
},
legend: {position: 'none'},
enableInteractivity: false
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
var btns = document.querySelector('#btns');
btns.onclick = function (e) {
switch(e.target.id) {
case "size":
options.chartArea.height === '50%' ? doubleIt() : halveIt();
break;
case "slide":
options.chartArea.left === '10%' ? goTo50() : goTo10();
}
chart.draw(data, options);
}
}