סקירה כללית
ב-Google Charts יש תמיכה בשלושה סוגים של קווי מגמות: לינארי, פולינום ומעריכי.
קווי מגמה לינאריים
קו מגמה
בתרשים הבא אפשר לראות קו מגמה לינארי בתרשים פיזור שמשווה את הגיל של מיי הסוכר לקוטר של הגזעים שלהם. אפשר להעביר את העכבר מעל קו המגמה כדי לראות את המשוואה שמחושבת על ידי Google Charts: 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);
}
קווי מגמות לינאריים הם הסוג הנפוץ ביותר של קו מגמה. אבל לפעמים עקומה הכי מתאימה לתיאור נתונים, ולשם כך אנחנו זקוקים לסוג אחר של קו מגמה.
קווי מגמה מעריכיים
אם הסבר על הנתונים שלכם בצורה הטובה ביותר באמצעות מעריכית מסוג eax+b, תוכלו להשתמש במאפיין type כדי לציין קו מגמה
הערה: בשונה מקווי מגמות לינאריים, יש כמה דרכים לחשב קווי מגמה מעריכיים. כרגע יש רק method אחת, אבל אנחנו נתמך בעתיד, ולכן יכול להיות שהשם או ההתנהגות של קו המגמה המעריכי הנוכחי ישתנו.
בתרשים הזה נשתמש גם ב-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 כדי לציין תווית אחרת. כאן אנחנו מציגים קו מגמה לכל אחת משתי הסדרות, ומגדירים את התוויות במקרא ל-"Bug line" (לסדרה 0) ול-"Test line" (סדרה 1).
trendlines: {
0: {
labelInLegend: 'Bug line',
visibleInLegend: true,
},
1: {
labelInLegend: 'Test line',
visibleInLegend: true,
}
}
מתאמים
מקדם הקביעה, שנקרא R2 בסטטיסטיקה, מזהה את מידת ההתאמה של קו מגמה לנתונים. מתאם מושלם הוא 1.0, וקורלציה מושלמת היא 0.0.
כדי לתאר את R2 במקרא של התרשים, צריך להגדיר את האפשרות 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>