Bu sayfada, bir grafikte yapılan değişikliklerin anında uygulanması yerine nasıl animasyonlu hale getirileceği açıklanmaktadır.
İçindekiler
Genel bakış
Google grafikleri, başlangıçta grafiği ilk çizdiğiniz zaman veya veriler ya da seçeneklerde değişiklik yaptıktan sonra grafiği yeniden çizdiğiniz zaman iki yolla sorunsuz bir şekilde canlandırılabilir.
Başlangıçta animasyon eklemek için:
- Grafik verilerinizi ve seçeneklerinizi belirleyin. Animasyon süresi ve yumuşak geçiş türü belirlediğinizden emin olun.
-
animation: {"startup": true}belirleyin. Seçeneklerinizde bunu ayarlamak, grafiğinizin referans değerle çizilen dizi değerleriyle başlamasına ve son durumuna giden animasyona neden olur. chart.draw()numaralı telefonu arayarak verilerinizi ve seçeneklerinizi iletin.
Geçişi canlandırmak için:
- Oluşturulmuş bir grafikle başlayın.
- Veri tablosunu veya seçeneklerini değiştirin. Farklı grafik türleri farklı değişiklikleri destekler. Hangi grafik türleri için 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ş yapmak için grafiğinizde
chart.draw()ile arama yapın.
Aşağıda, bir düğmeye yapılan her tıklamadan sonra çubuk grafikte sunulan tek değeri değiştiren basit bir örnek verilmiştir:
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 destek, bir grafikten diğerine değişiklik 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ı olduğundan sütunlar orijinal türlerini ve rollerini korur.
- Sütunların (dizi) eklenmesi veya kaldırılması.
- Satır (kategori) ekleme veya kaldırma.
-
Grafik seçeneklerinde yapılan değişiklikler. Şu anda değişiklik sırasında animasyon uygulanacak seçenekler şunlardır:
-
görünüm penceresi (
vAxis.viewWindow.min,vAxis.viewWindow.max,hAxis.viewWindow.min,hAxis.viewWindow.max) — Görüntüleme penceresinin değiştirilmesi, "yakınlaştırma" ve sürekli "kayma" efektlerinin sağlanması için yararlı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, LineChart, AreaChart, BarChart, BubbleChart, ColumnChart, Şamdan grafik, SteppedAreaChart, ComboChart, Gösterge |
| Satır ekleme/kaldırma | ScatterChart, LineChart, AreaChart, BubbleChart, ComboChart (yalnızca çizgi/alan serisi ile) |
| Sütun ekleme/kaldırma | ScatterChart, LineChart, AreaChart, BarChart, BubbleChart, ColumnChart, Şamdan grafik, SteppedAreaChart, ComboChart |
| Grafik seçeneklerini değiştirme | ScatterChart, LineChart, AreaChart, BarChart, BubbleChart, ColumnChart, Şamdan grafik, SteppedAreaChart, ComboChart |
Geçiş davranışı
| 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ış
|
Etkinlikler
Grafik çizildiğinde, grafik harici yöntem çağrıları için hazır olduğunda "hazır" bir etkinlik tetiklenir.
Geçiş tamamlandığında grafik animationfinish etkinliğini tetikleyecektir.
| 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);
}
}