סקירה כללית
ב-Google מידע יש שלושה סוגים של קווי מגמה: לינארי, פולינומי או מעריכי.
מגמות קוויות
קו מגמה
בתרשים שלמטה ניתן לראות קו מגמה ליניארי על תרשים פיזור, המשווה את גיל עצי המייפל הסוכרים לקוטר של הגזעים שלהם. אפשר להעביר את העכבר מעל קו המגמה כדי לראות את המשוואה שמחושבת על ידי תרשימים: 4.885 כפול הקוטר + 0.730.
כדי לשרטט קו מגמה בתרשים, משתמשים באפשרות trendlines ומציינים באילו סדרות נתונים להשתמש:
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Diameter', 'Age'],
[8, 37], [4, 19.5], [11, 52], [4, 22], [3, 16.5], [6.5, 32.8], [14, 72]]);
var options = {
title: 'Age of sugar maples vs. trunk diameter, in inches',
hAxis: {title: 'Diameter'},
vAxis: {title: 'Age'},
legend: 'none',
trendlines: { 0: {} } // Draw a trendline for data series 0.
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
קווי מגמה ליניאריים הם הסוג הנפוץ ביותר של קו מגמה. אבל לפעמים עקומה היא השיטה הטובה ביותר לתיאור נתונים, ולכן יש צורך בסוג נוסף של קו מגמה.
מגמות מעריכיות
אם הנתונים שלכם מוסברים בצורה הטובה ביותר באמצעות הפונקציה aax+b, תוכלו להשתמש במאפיין type כדי לציין קו מגמה
הערה: בניגוד לקווי מגמה ליניאריים, יש כמה דרכים שונות לחשב קווי מגמה מעריכיים. אנחנו מספקים כרגע רק שיטה אחת, אבל תתמוך בעתיד ביותר שיטות, ולכן יכול להיות שהשם או ההתנהגות של קו המעריכים הנוכחי ישתנו.
בתרשים הזה משתמשים גם ב-visibleInLegend: true
כדי להציג את עקומת המעריך במקרא.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Generation', 'Descendants'],
[0, 1], [1, 33], [2, 269], [3, 2013]
]);
var options = {
title: 'Descendants by Generation',
hAxis: {title: 'Generation', minValue: 0, maxValue: 3},
vAxis: {title: 'Descendants', minValue: 0, maxValue: 2100},
trendlines: {
0: {
type: 'exponential',
visibleInLegend: true,
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div2'));
chart.draw(data, options);
}
שינוי הצבע
כברירת מחדל, הקווים הססגוניים נצבעים באותו אופן כמו סדרת הנתונים, אבל הם בהירים יותר. אפשר לשנות זאת באמצעות המאפיין color.
כאן אנחנו מדמים כמה ספרות של החישובים התבצעו בשנה לפי תקופת חישוב פורה, וצובעים את המעלות המעריכיות הירוקות.
מפרט המפרט של מגמות:
trendlines: {
0: {
type: 'exponential',
color: 'green',
}
}
מגמות פולינומיות
כדי ליצור קו מגמה פולינומי, צריך לציין את polynomial ואת degree. הפעילו שיקול דעת מכיוון שהם עלולים להוביל לתוצאות מטעות. בדוגמה הבאה, כאשר מערך נתונים לינארי בעקביות משורטט באמצעות קו מגמה מעוקב (רמה 3):
צניחה חדה אחרי נקודת הנתונים האחרונה מופיעה רק מכיוון שהרחבנו באופן מלאכותי את הציר האופקי ל-15. בלי להגדיר את hAxis.maxValue כ-15, הקישור אמור להיראות כך:
נתונים זהים, פולינום זהה, חלון אחר של הנתונים.
var options = {
title: 'Age vs. Weight comparison',
legend: 'none',
crosshair: { trigger: "both", orientation: "both" },
trendlines: {
0: {
type: 'polynomial',
degree: 3,
visibleInLegend: true,
}
}
};
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Age', 'Weight'],
[ 8, 12],
[ 4, 5.5],
[ 11, 14],
[ 4, 5],
[ 3, 3.5],
[ 6.5, 7]
]);
var options = {
title: 'Age vs. Weight comparison',
legend: 'none',
crosshair: { trigger: 'both', orientation: 'both' },
trendlines: {
0: {
type: 'polynomial',
degree: 3,
visibleInLegend: true,
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('polynomial2_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id='polynomial2_div' style='width: 900px; height: 500px;'></div>
</body>
</html>
שינוי השקיפות והרוחב של הקו
תוכלו לשנות את השקיפות של קו המגמה על ידי הגדרת opacity לערך בין 0.0 ל-1.0, ולרוחב הקו על ידי הגדרת האפשרות lineWidth.
trendlines: {
0: {
color: 'purple',
lineWidth: 10,
opacity: 0.2,
type: 'exponential'
}
}
האפשרות lineWidth תהיה מתאימה לרוב השימושים, אבל אם אתם אוהבים את המראה של pointSize, יש אפשרות להשתמש בו כדי להתאים אישית את גודל הנקודות שניתן לבחור בהן מתוך קו המגמה:
בדיוק כמו שאור הוא גם גל וגם חלקיק, קו מגמה הוא גם קו וגם חבורה של נקודות. מה שהמשתמשים רואים תלוי באופן האינטראקציה שלהם איתם: בדרך כלל, קו, אבל כשמעבירים את העכבר מעל קו הזמן, נקודה מסוימת מודגשת. הקוטר שלה יהיה שווה ל:
- קו המגמה
pointSizeאם הוגדר, אחרת... pointSizeהגלובלי, אם הוגדר...- 7
עם זאת, אם תגדירו את האפשרות הגלובלית או את מגמה pointSize, כל הנקודות שניתן לבחור יוצגו, ללא קשר לlineWidthשל קו מגמה.
var options = {
legend: 'none',
hAxis: { ticks: [] },
vAxis: { ticks: [] },
pointShape: 'diamond',
trendlines: {
0: {
type: 'polynomial',
degree: 3,
visibleInLegend: true,
pointSize: 20, // Set the size of the trendline dots.
opacity: 0.1
}
}
};
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['X', 'Y'],
[0, 4],
[1, 2],
[2, 4],
[3, 6],
[4, 4]
]);
var options = {
legend: 'none',
hAxis: { ticks: [] },
vAxis: { ticks: [] },
colors: ['#703583'],
pointShape: 'diamond',
trendlines: {
0: {
type: 'polynomial',
degree: 3,
visibleInLegend: true,
pointSize: 20, // Set the size of the trendline dots.
opacity: 0.1
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_pointSize'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_pointSize" style="width: 900px; height: 500px;"></div>
</body>
</html>
הצגת הנקודות
כדי ליצור קווי מגמה, הם חותמים על כמות של נקודות בתרשים. האפשרות pointsVisible של קו המגמה קובעת אם הנקודות של קו מגמה מסוים יוצגו. אפשרות ברירת המחדל לכל קווי המגמה היא true, אבל אם רצית להשבית את אפשרות החשיפה של קו המגמה הראשון, עליך להגדיר את הערך trendlines.0.pointsVisible: false.
בתרשים שבהמשך אפשר לראות איך לשלוט בנקודות על כל מגמה.
var options = {
height: 500,
legend: 'none',
colors: ['#9575cd', '#33ac71'],
pointShape: 'diamond',
trendlines: {
0: {
type: 'exponential',
pointSize: 20,
opacity: 0.6,
pointsVisible: false
},
1: {
type: 'linear',
pointSize: 10,
pointsVisible: true
}
}
};
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['X', 'Y', 'Z'],
[0, 4, 5],
[1, 2, 6],
[2, 4, 8],
[3, 6, 10],
[4, 4, 11],
[5, 8, 13],
[6, 12, 15],
[7, 15, 19],
[8, 25, 21],
[9, 34, 23],
[10, 50, 27]
]);
var options = {
height: 500,
legend: 'none',
colors: ['#9575cd', '#33ac71'],
pointShape: 'diamond',
trendlines: {
0: {
type: 'exponential',
pointSize: 20,
opacity: 0.6,
pointsVisible: false
},
1: {
type: 'linear',
pointSize: 10,
pointsVisible: true
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
שינוי התווית
אם תבחרו באפשרות visibleInLegend, התווית תציג את המשוואה של קו המגמה. אפשר להשתמש במאפיין labelInLegend כדי לציין תווית אחרת. כאן אנחנו מציגים קו מגמה לכל אחת מהסדרות, ומגדירים את התוויות במקרא ל"באג קו" (לסדרה 0) ול"קו בדיקה" (סדרה 1).
trendlines: {
0: {
labelInLegend: 'Bug line',
visibleInLegend: true,
},
1: {
labelInLegend: 'Test line',
visibleInLegend: true,
}
}
קשרים
המרכז לנחישות, שנקרא R2 בנתונים סטטיסטיים, מזהה עד כמה קו מגמה תואם לנתונים. קורלציה מושלמת היא 1.0, וההשוואה הנכונה היא 0.0.
תוכלו לתאר את ר' 2 במקרא של התרשים על ידי הגדרת האפשרות showR2 לtrue.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Age', 'Weight'],
[ 8, 12],
[ 4, 5.5],
[ 11, 14],
[ 4, 5],
[ 3, 3.5],
[ 6.5, 7]
]);
var options = {
hAxis: {minValue: 0, maxValue: 15},
vAxis: {minValue: 0, maxValue: 15},
chartArea: {width:'50%'},
trendlines: {
0: {
type: 'linear',
showR2: true,
visibleInLegend: true
}
}
};
var chartLinear = new google.visualization.ScatterChart(document.getElementById('chartLinear'));
chartLinear.draw(data, options);
options.trendlines[0].type = 'exponential';
options.colors = ['#6F9654'];
var chartExponential = new google.visualization.ScatterChart(document.getElementById('chartExponential'));
chartExponential.draw(data, options);
}
</script>
</head>
<body>
<div id="chartLinear" style="height: 350px; width: 800px"></div>
<div id="chartExponential" style="height: 350px; width: 800px"></div>
</body>
</html>