توضّح هذه الصفحة طريقة إضافة تأثيرات متحركة إلى رسم بياني معيّن، بدلاً من تطبيقها على الفور.
المحتويات
نظرة عامة
يمكن أن تتحرك الرسومات البيانية من 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)
-
نافذة العرض (
| نوع التعديل | أنواع الرسوم البيانية الصالحة |
|---|---|
| التغييرات في القيم | رسم بياني بالنقاط المبعثرة، رسم بياني خطي، مخطّط مساحي، رسم بياني شريطي، رسم بياني فقاعي، رسم بياني عمودي، رسم بياني بالشموع، رسم بياني متدرج للمساحة، رسم بياني تحريري، مقياس |
| إضافة/إزالة الصفوف | المخطط المبعثر، والمخطط الخطي، والمخطط المساحي، والمخطط الفقاعي، والمخطط المختلط (مع سلسلة خط/منطقة فقط) |
| إضافة/إزالة أعمدة | رسم بياني بالنقاط المبعثرة، رسم بياني خطّي، مخطَّط مساحي، رسم بياني شريطي، مخطَّط فقاعي، رسم بياني عمودي، رسم بياني شموع، مخطط منطقة متدرجة، رسم بياني مجمّع |
| تعديل خيارات الرسم البياني | رسم بياني بالنقاط المبعثرة، رسم بياني خطّي، مخطَّط مساحي، رسم بياني شريطي، مخطَّط فقاعي، رسم بياني عمودي، رسم بياني شموع، مخطط منطقة متدرجة، رسم بياني مجمّع |
سلوك الانتقال
| الاسم | |
|---|---|
| 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);
}
}