בדף הזה מתואר הנפשת שינויים שבוצעו בתרשים, במקום להחיל אותם באופן מיידי.
תוכן עניינים
סקירה כללית
ניתן ליצור אנימציות בצורה חלקה בתרשימים של 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)
-
חלון הצפייה (
| סוג השינוי | סוגי תרשימים חוקיים |
|---|---|
| שינויים בערכים | תרשים זרימה, תרשים קו, תרשים שטח, בר תרשים, בועה, תרשים עמודות, תרשים עמידות, תרשים שלבים, תרשים משולב, מד |
| הוספה/הסרה של שורות | תרשים פיזור, קו בתרשים, אזור תרשים, בועה, משולב (עם סדרת קו/אזור בלבד) |
| הוספה/הסרה של עמודות | תרשים פיזור, קו תרשים, תרשים שטח, בר תרשים, בועה, תרשים עמודות, תרשים נר, תרשים צעדים, תרשים משולב |
| שינוי אפשרויות התרשים | תרשים פיזור, קו תרשים, תרשים שטח, בר תרשים, בועה, תרשים עמודות, תרשים נר, תרשים צעדים, תרשים משולב |
התנהגות המעבר
| שם | |
|---|---|
| אנימציה.משך |
משך האנימציה, באלפיות השנייה. פרטים נוספים זמינים במסמכי האנימציה. סוג: מספר
ברירת מחדל: 0
|
| אנימציה. |
פונקציית ההתאמה לצפייה על האנימציה. אלו האפשרויות הזמינות:
סוג: מחרוזת
ברירת מחדל: 'לינארי'
|
| אנימציה.התחלה |
קובע אם התרשים יונפש בהגרלה הראשונית. אם הערך סוג: בוליאני
ברירת המחדל לא
|
אירועים
בזמן שרטוט תרשים, אירוע 'מוכן' מופעל כשהתרשים מוכן לקריאות שיטה חיצוניות.
התרשים יפעיל את האירוע 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);
}
}