این صفحه نحوه متحرک سازی تغییرات ایجاد شده در نمودار را به جای اعمال فوری آنها توضیح می دهد.
فهرست
بررسی اجمالی
نمودارهای Google می‌توانند به یکی از دو روش به آرامی متحرک شوند، یا در هنگام راه‌اندازی زمانی که نمودار را برای اولین بار ترسیم می‌کنید، یا زمانی که نموداری را پس از ایجاد تغییر در داده‌ها یا گزینه‌ها دوباره ترسیم می‌کنید.
برای انیمیشن در راه اندازی:
- داده ها و گزینه های نمودار خود را تنظیم کنید. مطمئن شوید که مدت زمان انیمیشن و نوع کاهش آن را تنظیم کنید.
- تنظیم
animation: {"startup": true}— تنظیم این مورد در گزینه های شما باعث می شود نمودار شما با مقادیر سری ترسیم شده در خط مبنا شروع شود و تا حالت نهایی متحرک شود. -
chart.draw()را فراخوانی کنید و داده ها و گزینه های خود را ارسال کنید.
برای متحرک سازی یک انتقال:
- با یک نمودار از قبل رندر شده شروع کنید.
- جدول داده ها یا گزینه ها را اصلاح کنید. انواع نمودارهای مختلف از تغییرات مختلف پشتیبانی می کنند. برای اطلاع از اینکه چه تغییراتی برای انواع نمودارها پشتیبانی می شود، به اصلاحات پشتیبانی شده مراجعه کنید.
- رفتار انتقال را با استفاده از گزینه animation مشخص کنید.
- برای انتقال به مقادیر جدید،
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) — تغییر پنجره نمایش برای دستیابی به جلوه‌های "zoom" و "drift" مداوم مفید است (نمونه‌های زیر را ببینید. ) - مقادیر
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)
- پنجره نمایش (
| نوع اصلاح | انواع نمودار معتبر |
|---|---|
| تغییر ارزش | ScatterChart، LineChart، AreaChart، BarChart، BubbleChart، ColumnChart، CandlestickChart، Stepped AreaChart، ComboChart، Gauge |
| افزودن/حذف ردیف ها | ScatterChart، LineChart، AreaChart، BubbleChart، ComboChart (فقط با سری خط/منطقه) |
| اضافه کردن/حذف ستون ها | ScatterChart، LineChart، AreaChart، BarChart، BubbleChart، ColumnChart، CandlestickChart، Stepped AreaChart، ComboChart |
| اصلاح گزینه های نمودار | ScatterChart، LineChart، AreaChart، BarChart، BubbleChart، ColumnChart، CandlestickChart، Stepped AreaChart، ComboChart |
رفتار انتقالی
| نام | |
|---|---|
| انیمیشن.مدت | مدت زمان انیمیشن، بر حسب میلی ثانیه. برای جزئیات، به مستندات انیمیشن مراجعه کنید. نوع: شماره پیش فرض: 0 |
| انیمیشن.تسهیل | تابع easing برای انیمیشن اعمال می شود. گزینه های ذیل در دسترس هستند:
نوع: رشته پیش فرض: "خطی" |
| انیمیشن.استارت آپ | تعیین می کند که آیا نمودار در قرعه کشی اولیه متحرک می شود یا خیر. اگر نوع: بولی پیش فرض نادرست |
مناسبت ها
هنگام ترسیم نمودار، زمانی که نمودار برای فراخوانی های متد خارجی آماده شود، یک رویداد "آماده" فعال می شود. هنگامی که انتقال کامل شد، نمودار رویداد 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);
}
}