इस पेज पर, चार्ट में किए गए बदलावों को तुरंत लागू करने के बजाय उन्हें ऐनिमेट करने का तरीका बताया गया है.
विषय सूची
खास जानकारी
Google चार्ट, इन दो में से किसी एक तरीके से आसानी से ऐनिमेट हो सकते हैं. पहली बार चार्ट बनाते समय, स्टार्टअप शुरू होने पर या डेटा या विकल्पों में बदलाव करने के बाद, फिर से चार्ट बनाने पर.
स्टार्टअप पर ऐनिमेट करने के लिए:
- चार्ट का डेटा और उसके विकल्प सेट करना. एक ऐनिमेशन अवधि और ईज़िंग प्रकार सेट करना न भूलें.
-
animation: {"startup": true}सेट करें — अपने विकल्पों में इसे सेट करने से, आपका चार्ट बेसलाइन पर बनाई गई सीरीज़ की वैल्यू के साथ शुरू होगा और अपनी आखिरी स्थिति में ऐनिमेट होगा. chart.draw()पर कॉल करें, जो आपका डेटा और विकल्प दिखाता है.
ट्रांज़िशन को ऐनिमेट करने के लिए:
- पहले से रेंडर किए गए चार्ट से शुरू करें.
- डेटा टेबल या विकल्पों में बदलाव करें. अलग-अलग तरह के चार्ट में अलग-अलग तरह के बदलाव किए जा सकते हैं. वे बदलाव जो इस्तेमाल किए जा सकते हैं देखें. इससे आपको पता चलेगा कि किस तरह के चार्ट में किस तरह के बदलाव किए जा सकते हैं.
- ऐनिमेशन विकल्प का इस्तेमाल करके ट्रांज़िशन व्यवहार तय करें.
- नई वैल्यू पर स्विच करने के लिए, अपने चार्ट पर
chart.draw()को कॉल करें.
यहां एक आसान उदाहरण दिया गया है, जिसमें बटन पर होने वाले हर क्लिक के लिए, बार चार्ट में दिखाई गई एक वैल्यू को बदला जाता है:
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();
}
वे बदलाव जिन्हें लागू किया जा सकता है
अलग-अलग तरह के ट्रांज़िशन के लिए, अलग-अलग चार्ट का इस्तेमाल किया जा सकता है. ट्रांज़िशन के अलग-अलग टाइप इस तरह हैं:
- सिर्फ़ डेटा टेबल की वैल्यू में बदलाव. पंक्तियों और कॉलम की संख्या एक जैसी है और कॉलम अपने मूल टाइप और भूमिकाओं को बनाए रखते हैं.
- कॉलम (सीरीज़) को जोड़ना या हटाना.
- पंक्तियों (कैटगरी) को जोड़ना या हटाना.
-
चार्ट के विकल्पों में किए गए बदलाव. फ़िलहाल, बदलाव होने पर ऐनिमेट किए जाने वाले विकल्पों में ये शामिल हैं:
-
व्यू विंडो (
vAxis.viewWindow.min,vAxis.viewWindow.max,hAxis.viewWindow.min,hAxis.viewWindow.max) — व्यू विंडो को बदलना "ज़ूम" और लगातार "ड्रिफ़्ट" इफ़ेक्ट पाने के लिए फ़ायदेमंद होता है (नीचे दिए गए उदाहरण देखें) -
vAxis.ticksऔरhAxis.ticksवैल्यू vAxis.gridlines.countऔरhAxis.gridlines.countvAxis.directionऔरhAxis.directionvAxis.baselineऔरhAxis.baselinevAxis.logScaleऔरhAxis.logScale- चार्ट का साइज़ (
heightऔरwidth) -
चार्ट एरिया (
chartArea.height,chartArea.width,chartArea.top,chartArea.left)
-
व्यू विंडो (
| बदलाव का टाइप | मान्य चार्ट टाइप |
|---|---|
| मान में बदलाव | ScatterChart, LineChart, LineChart, BarChart, BubbleChart, ColumnChart, कैंडलस्टिकचार्ट, SteppedAreaChart, कॉम्बोचार्ट, गेज |
| पंक्तियां जोड़ना/हटाना | ScatterChart, LineChart, ZoneChart, बबल चार्ट, कॉम्बो चार्ट (सिर्फ़ लाइन/एरिया सीरीज़ के साथ) |
| कॉलम जोड़ना/हटाना | ScatterChart, LineChart, LineChart, BarChart, BubbleChart, ColumnChart, कैंडलस्टिकचार्ट, StepedAreaChart, कॉम्बो चार्ट |
| चार्ट के विकल्पों में बदलाव करना | ScatterChart, LineChart, LineChart, BarChart, BubbleChart, ColumnChart, कैंडलस्टिकचार्ट, StepedAreaChart, कॉम्बो चार्ट |
ट्रांज़िशन का व्यवहार
| नाम | |
|---|---|
| animation.duration |
ऐनिमेशन की अवधि, मिलीसेकंड में. ज़्यादा जानकारी के लिए, ऐनिमेशन दस्तावेज़ देखें. टाइप: नंबर
डिफ़ॉल्ट: 0
|
| animation.easing |
ऐनिमेशन पर ईज़िंग फ़ंक्शन लागू किया गया. ये विकल्प उपलब्ध हैं:
Type: स्ट्रिंग
डिफ़ॉल्ट: 'लीनियर'
|
| animation.startup |
इससे तय होता है कि शुरुआती ड्रॉ पर चार्ट ऐनिमेट होगा या नहीं. अगर टाइप: बूलियन
डिफ़ॉल्ट गलत
|
इवेंट
चार्ट बनाते समय, 'तैयार है' इवेंट तब ट्रिगर होता है, जब चार्ट बाहरी तरीके से कॉल करने के लिए तैयार होता है.
ट्रांज़िशन पूरा होने पर, चार्ट animationfinish इवेंट को सक्रिय कर देगा.
| नाम | |
|---|---|
animationfinish |
ट्रांज़िशन ऐनिमेशन पूरा होने पर ट्रिगर होता है. प्रॉपर्टी: कोई प्रॉपर्टी नहीं
|
उदाहरण
वैल्यू में बदलाव
// 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();
}
पंक्तियां जोड़ना और हटाना
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();
कॉलम जोड़ना और हटाना
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();
व्यू विंडो बदलना
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();
चार्ट का साइज़ बदलना
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);
}
}