بررسی اجمالی
آ
نمودار گوگل از سه نوع خط روند پشتیبانی می کند: خطی، چند جمله ای و نمایی.
خطوط روند خطی
آ
در نمودار زیر می توانید یک خط روند خطی را در نمودار پراکنده مشاهده کنید که سن افراهای قندی را با قطر تنه آنها مقایسه می کند. می توانید روی خط روند حرکت کنید تا معادله محاسبه شده توسط نمودارهای گوگل را ببینید: 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 برای تعیین یک استفاده کنید.
نکته: برخلاف خطوط روند خطی، چندین روش مختلف برای محاسبه خطوط روند نمایی وجود دارد. ما در حال حاضر تنها یک روش ارائه می دهیم، اما در آینده از روش های بیشتری پشتیبانی خواهیم کرد، بنابراین ممکن است نام یا رفتار خط روند نمایی فعلی تغییر کند.
برای این نمودار، ما همچنین از 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 افزایش دادیم.
داده های یکسان، چند جمله ای یکسان، پنجره های متفاوت روی داده ها.
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
با این حال، اگر گزینه global یا trendline 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 است.
با تنظیم گزینه showR2 روی true می توانید R 2 را در افسانه نمودار خود به تصویر بکشید.
<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>