এই পৃষ্ঠাটি বর্ণনা করে যে কীভাবে একটি চার্টে করা পরিবর্তনগুলিকে তাৎক্ষণিকভাবে প্রয়োগ করার পরিবর্তে অ্যানিমেট করা যায়৷
বিষয়বস্তু
ওভারভিউ
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.count -
vAxis.directionএবংhAxis.direction -
vAxis.baselineএবংhAxis.baseline -
vAxis.logScaleএবংhAxis.logScale - চার্টের আকার (
heightএবংwidth) - চার্ট এলাকা (
chartArea.height,chartArea.width,chartArea.top,chartArea.left)
- ভিউ উইন্ডো (
| পরিবর্তনের ধরন | বৈধ চার্ট প্রকার |
|---|---|
| মান পরিবর্তন | স্ক্যাটারচার্ট, লাইনচার্ট, এরিয়াচার্ট, বারচার্ট, বাবলচার্ট, কলামচার্ট, ক্যান্ডেলস্টিকচার্ট, স্টেপডএরিয়াচার্ট, কম্বোচার্ট, গেজ |
| সারি যোগ করা/সরানো হচ্ছে | স্ক্যাটারচার্ট, লাইনচার্ট, এরিয়াচার্ট, বাবলচার্ট, কম্বোচার্ট (শুধুমাত্র লাইন/এরিয়া সিরিজ সহ) |
| কলাম যোগ/সরানো হচ্ছে | স্ক্যাটারচার্ট, লাইনচার্ট, এরিয়াচার্ট, বারচার্ট, বাবলচার্ট, কলামচার্ট, ক্যান্ডেলস্টিকচার্ট, স্টেপডএরিয়াচার্ট, কম্বোচার্ট |
| চার্টের বিকল্পগুলি পরিবর্তন করা হচ্ছে | স্ক্যাটারচার্ট, লাইনচার্ট, এরিয়াচার্ট, বারচার্ট, বাবলচার্ট, কলামচার্ট, ক্যান্ডেলস্টিকচার্ট, স্টেপডএরিয়াচার্ট, কম্বোচার্ট |
রূপান্তর আচরণ
| নাম | |
|---|---|
| animation.duration | অ্যানিমেশনের সময়কাল, মিলিসেকেন্ডে। বিস্তারিত জানার জন্য, অ্যানিমেশন ডকুমেন্টেশন দেখুন। প্রকার: সংখ্যা ডিফল্ট: 0 |
| animation.easing | অ্যানিমেশনে প্রয়োগ করা ইজিং ফাংশন। নিম্নলিখিত বিকল্পগুলি উপলব্ধ:
প্রকার: স্ট্রিং ডিফল্ট: 'লিনিয়ার' |
| 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);
}
}